Introduction:
- Fragments were introduced in the Liferay 7.0 version.
- Fragments are made from three components of web pages : HTML, CSS and JavaScript
- Fragments are collections of pre-designed web elements, such as images, text, videos, and forms, that can be used to build pages and applications quickly and easily.
Benefits :
- Fragments are reusable components that can be added to a site, for providing a way to create a custom page layouts and designs without needing to write any code.
- Fragments are a powerful tool for creating dynamic, modular, and reusable content in Liferay Portal.
Prerequisites :
- Liferay 7.x
- Basic understanding of Liferay
Environmental Requirements :
- Liferay
There are 2 types of fragment :
- Basic Fragment
- Form fragment
In this blog we will talk about basic fragment
Create Basic Fragment
Follow the following steps to create a fragment in Liferay.
- Login to your liferay portal as administrator.
- Navigate to the Side menu (◧) and select the Design option.
- Then click on the “Fragments” option.
- Click on Add icon (╂) to create new Fragment sets.
- Enter the name and description of the new fragment sets.
- Click on the save button. New fragment sets are ready , We can create fragments.
- Go to the desired fragment sets and click on add button (╂) to create new fragments.
- Select the fragment type. Here the selected fragment type is basic fragment and then click on the next tab.
- Enter the fragment name and click on add button.
- Now we open the fragment and fragments look like below:
Here we can see the four section:
- The top left pane is for entering HTML.
- The top right pane is for entering CSS.
- The bottom left pane is for entering JavaScript.
- The bottom right pane provides a live preview as you work in the other panes.
Here are some HTML editing shortcuts:
- Enter an open angle bracket (<) to access standard HTML tags and Liferay’s Fragment-specific tags.
- Start an element attribute with data to access Liferay’s editable Fragment attributes .
- We can create Editable components
- We can Create Configurable components
- We can Embed liferay’s widgets
Create editable components
- data-lfr-editable-type: image
- This attribute is used in liferay for the purpose of changing an image using Liferay’s content management system(CMS).
- data-lfr-editable-type: link
- This attribute is used in liferay for the purpose of changing the link using Liferay’s content management system(CMS).
- data-lfr-editable-type:text
- This attribute is used in liferay to indicate that a particular section of text on a web page can be edited using Liferay’s content management system (CMS).
- data-lfr-editable-type:html
- This attribute is used in liferay to indicate that a particular section of HTML code can be edited by Liferay’s built in content management system(CMS).
- data-lfr-editable-type:rich-text
- This attribute is used in liferay for the purpose of changing the rich-text in a particular section in a web page using Liferay’s content management system(CMS).
Create configurable components
Here we write the json for color picker and number of cards.
- JSON for Number of Cards
- JSON for Color Picker
Embed liferay’s widgets
- We can use different types of liferay’s widgets in fragments.
For example, I have embedded liferay’s search bar.
<lfr-widget-search-bar></lfr-widget-search-bar>
- Use liferay search bar in content page, search bar look like below:
Example below shows the card component with editable text, image, rich- text and links.
- In the configuration tab, use the JSON field to add the configuration option to the page fragment.
- Click on Publish to save your fragments and make it available for use in Content pages. In the content page, default number of cards – 1 and default color for cardtitle – red.
For fragment use, navigate to the Fragments and Widgets → Personal (As per your fragment set name) → test (your fragment name).
After select number of card and select the card title color, content look like below image:
- After publish, change the number of cards and card title color , content page look like below:
Note:
We can update the fragment code many times, But changes will not be reflected on the page where the fragment is placed. Everytime we change code we need to remove fragments and again need to drop on the page.
This process is not feasible right ? So we can enable fragment propagation property from the system.
Here are the steps to enable fragment propagation !
Automatically Propagating Changes
Follow these steps to automatically propagating changes to all instances of a fragment:
- Open the Global Menu (◧) .Then navigate to Control Panel → Configuration → System Settings
- Under the content and data section, click on the Page Fragments.
- Check the Propagate Fragment Changes Automatically box.
- Click on Save.
