Liferay Fragments: Embedded Widgets

Overview

Liferay fragments may include other widgets inside the fragment code. This article explains how to do it.

Embedding Portlets

Embedding “<lfr-widget” widgets

Liferay provides OOTB functionality to include widgets into fragments. Just type “<lft-widget-”, and you’ll see the list of available widgets: 

For example, 

 <lfr-widget-nav></lfr-widget-nav> 

will include a navigation widget to the fragment:

Then you can configure it as a regular widget on the page.

Note: only those widgets can be included this way, which have

"com.liferay.fragment.entry.processor.portlet.alias="

property defined in portlet configuration.

For example, navigation widget has “nav” alias:

@Component(

  immediate = true,

  property = {

     "com.liferay.fragment.entry.processor.portlet.alias=nav",

//...

  },

  service = Portlet.class

)

public class SiteNavigationMenuPortlet extends MVCPortlet {

}

That’s why is available using 

 <lfr-widget-nav></lfr-widget-nav> 

in a fragment.

Embedding custom widgets

Like the default Liferay widgets, custom ones can be also embedded to fragments. To do this, an alias property (mentioned above) should be defined in custom widget configuration:

@Component(

  immediate = true,

  property = {

     "com.liferay.fragment.entry.processor.portlet.alias=my-demo",

//...

  },

  service = Portlet.class

)

public class MyDemoPortlet extends MVCPortlet {

}

Once widget with alias property is deployed - it can be embedded to a fragment:

 <lfr-widget-my-demo></lfr-widget-my-demo> 

Embedding other widgets

Those widgets, which do not have the “alias” property still can be embedded, but in a different way, using the liferay_portlet tag library.

For example, language portlet can be included this way:

[@liferay_portlet["runtime"]

portletName="com_liferay_site_navigation_language_web_portlet_SiteNavigationLanguagePortlet"/]

Or a personal bar can be included like this:

[@liferay_portlet["runtime"]

portletName="com_liferay_product_navigation_user_personal_bar_web_portlet_ProductNavigationUserPersonalBarPortlet"/]

Portlet preferences can be also passed to the embedded widget, sample:

[#assign languagePreferences = freeMarkerPortletPreferences.getPreferences({

   "displayStyle": "ddmTemplate_LANGUAGE-ICON-FTL"

}) /]

[@liferay_portlet["runtime"] defaultPreferences=languagePreferences

portletName="com_liferay_site_navigation_language_web_portlet_SiteNavigationLanguagePortlet"/]

Here we define the default display style for the language widget:

Embedding a DropZone

To make fragments even more dynamic - we can embed a DropZone (area, where users are able to add widgets/fragments).

<lfr-drop-zone></lfr-drop-zone>

This will provide content editors with the possibility to add another fragments/widgets to the defined dropzone inside a fragment, sample:

For example, a search bar can be added to the drop zone:

Enjoy 😏