Liferay - Low Code No Code Web Component

The Best Of Both Worlds

Web components are a set of standardized web platform APIs that allow developers to create reusable and encapsulated custom HTML elements; They are built using web technologies such as HTML, CSS, and JavaScript and can be used to build web applications that are modular, interoperable, and highly reusable.

Liferay has opened the space for their customers to embed any web component easily in the platform using the client extensions, which we have discussed in the previous article, and it has empowered the customers with a user-friendly user interface to embed them easily with zero coding.

Having that said it means you can build your custom user interface components outside liferay. Using Liferay headless you will be able to pull data from Liferay and render it within your component, a good aspect we need to talk about is that Liferay has provided the web components developer with a Java Script Context Variable to feed the web component with the page context, and since the web component will be natively integrated with the page DOM elements then it will have seamless access to this variable which include much information like currently selected language, current logged in user and the current user security access token which will be used to invoke headless APIs.

Pulling data from Liferay using headless inside your web component is one good approach but sometimes you will need to enable the end users “Content Authors” to pass the data to the web component using the same experience they get with the fragments where they will able to drag and drop the fragment into any page and then do an inline editing for the content within that fragment using the page designer, and this is the question in this article can we have a decoupled user interface component “Decoupled Web Component”?

The answer is yes, using the standard implementation of a web component you will notice that we can have injectable areas where you will be able to inject your content at the run time, that's something you can do using Web Components Slots.

Having that said, it will take us to the next part of the story; How can we integrate the Editable Web Components with Liferay? The answer is very simple, Using Liferay Fragments along with JS client extensions, the following are steps to do so:

  1. Create Web Component “Design it with Slots”

  2. Build the Web Components into a single JavaScript and CSS files

  3. Navigate to Liferay -> Client Extensions -> Add JS Client Extensions and your JS.

  4. Navigate to Liferay -> Client Extensions -> Add CSS Client Extensions and add your CSS.

  5. Enable your JS and CSS on a page or the whole site based on where you will use the Web Component(s).

  6. Create a Liferay Fragment and add your HTML template which defines the web components and the editable areas with Liferay Editable tags.

  7. Create / Edit Liferay Page, drag and drop the fragment, and start editing the content.

Below is an example of a Slotted Web Component:

<div class="hero">

   <div class="hero-profile-img">

       <slot  name="c_image_banner"></slot>

   </div>

   <div class="hero-description-bk"></div>

   <div class="hero-logo">

       <slot  name="c_image"></slot>

   </div>

   <div class="hero-description">

      <slot name="c_title"></slot>

   </div>

   <div  class="hero-date">

       <slot name="c_date"></slot>

   </div>

   <div class="hero-btn">

       <slot name="c_link"></slot>

   </div>

</div>

 

In this example, you will notice that we will need to add the slot tag in the areas where we need to inject content within the web component, it's very important to have the slot name attribute defined.

Below is an example of the required fragment:

<lr-slotted-card>

   <lfr-editable id="banner" slot="c_image_banner" type="image">

       <img  class="test-image" style="width:100%;height:100%" src="">

   </lfr-editable>

   <lfr-editable id="logo" slot="c_image" type="image">

       <img style="width:100%;height:100%" class="test-image" src="">

   </lfr-editable>

   <h3 slot="c_title" data-lfr-editable-id="title" data-lfr-editable-type="text">Card Title</h3>

   <p slot="c_date" data-lfr-editable-id="date" data-lfr-editable-type="text">Card Date</p>

   <a slot="c_link" data-lfr-editable-id="link" data-lfr-editable-type="link">Link</a>

</lr-slotted-card>

 

 

Example Source Repository

https://github.com/mahmoudhtayem87/generic_components