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.
![Fragment list screen | Fragments in Liferay Fragment list screen](https://www.ignek.com/wp-content/uploads/2024/03/Fragment-list-screen-1024x293.webp)
- Enter the name and description of the new fragment sets.
![Name and describe new fragment sets | Fragments in Liferay Name and describe new fragment sets](https://www.ignek.com/wp-content/uploads/2024/03/Name-and-describe-new-fragment-sets-1024x432.webp)
- 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.
![Create new fragments with one click | Fragments in Liferay Create new fragments with one click](https://www.ignek.com/wp-content/uploads/2024/03/Create-new-fragments-with-one-click-1024x443.webp)
- Select the fragment type. Here the selected fragment type is basic fragment and then click on the next tab.
![Fragment types list | Fragments in Liferay Fragment types list](https://www.ignek.com/wp-content/uploads/2024/03/Fragment-types-list.webp)
- Enter the fragment name and click on add button.
![Adding fragment name | Fragments in Liferay Adding fragment name](https://www.ignek.com/wp-content/uploads/2024/03/Adding-fragment-name.webp)
![List of created fragments | Fragments in Liferay List of created fragments](https://www.ignek.com/wp-content/uploads/2024/03/List-of-created-fragments-1024x389.webp)
- Now we open the fragment and fragments look like below:
![Fragment contents displayed in code snippet | Fragments in Liferay Fragment contents displayed in code snippet](https://www.ignek.com/wp-content/uploads/2024/03/Fragment-contents-displayed-in-code-snippet-1024x480.webp)
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.
![HTML editing shortcuts angle bracket access | Fragments in Liferay HTML editing shortcuts angle bracket access](https://www.ignek.com/wp-content/uploads/2024/03/HTML-editing-shortcuts-angle-bracket-access.webp)
- Start an element attribute with data to access Liferay’s editable Fragment attributes .
![Utilize data for editable Fragment | Fragments in Liferay Utilize data for editable Fragment](https://www.ignek.com/wp-content/uploads/2024/03/Utilize-data-for-editable-Fragment.webp)
- We can create Editable components
- We can Create Configurable components
- We can Embed liferay’s widgets
Create editable components
![Build editable components with Liferay | Fragments in Liferay Build editable components with Liferay](https://www.ignek.com/wp-content/uploads/2024/03/Build-editable-components-with-Liferay.webp)
- 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
![Innovative Liferay search bar integration | Fragments in Liferay Innovative Liferay search bar integration](https://www.ignek.com/wp-content/uploads/2024/03/Innovative-Liferay-search-bar-integration-1024x622.webp)
- JSON for Color Picker
![implement Liferays sleek content search | Fragments in Liferay implement Liferay's sleek content search](https://www.ignek.com/wp-content/uploads/2024/03/implement-Liferays-sleek-content-search-1024x518.webp)
Embed liferay’s widgets
- We can use different types of liferay’s widgets in fragments.
![Access and use of fragment in a page | Fragments in Liferay Access and use of fragment in a page](https://www.ignek.com/wp-content/uploads/2024/03/Access-and-use-of-fragment-in-a-page-1024x436.webp)
For example, I have embedded liferay’s search bar.
![Customize card number and title colors | Fragments in Liferay Customize card number and title colors](https://www.ignek.com/wp-content/uploads/2024/03/Customize-card-number-and-title-colors-1024x452.webp)
- Use liferay search bar in content page, search bar look like below:
![Update card count and adjust title color | Fragments in Liferay Update card count and adjust title color](https://www.ignek.com/wp-content/uploads/2024/03/Update-card-count-and-adjust-title-color-1024x311.webp)
Example below shows the card component with editable text, image, rich- text and links.
![Configurable components of Fragment | Fragments in Liferay Configurable components of Fragment](https://www.ignek.com/wp-content/uploads/2024/03/Configurable-components-of-Fragment.webp)
![Custom JSON configuration | Fragments in Liferay Custom JSON configuration example](https://www.ignek.com/wp-content/uploads/2024/03/Custom-JSON-configuration-example.webp)
![Use various Liferay widgets in fragments | Fragments in Liferay Use various Liferay widgets in fragments](https://www.ignek.com/wp-content/uploads/2024/03/Use-various-Liferay-widgets-in-fragments-1024x444.webp)
- 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).
![Editable card component with text image | Fragments in Liferay Editable card component with text, image](https://www.ignek.com/wp-content/uploads/2024/03/Editable-card-component-with-text-image-1024x477.webp)
After select number of card and select the card title color, content look like below image:
![Editable card component with CSS | Fragments in Liferay Editable card component with CSS](https://www.ignek.com/wp-content/uploads/2024/03/Editable-card-component-with-CSS-1024x475.webp)
- After publish, change the number of cards and card title color , content page look like below:
![Review of complete fragment code | Fragments in Liferay Review of complete fragment code](https://www.ignek.com/wp-content/uploads/2024/03/Review-of-complete-fragment-code-1024x429.webp)
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
![Automatically propagate changes to all fragments | Fragments in Liferay Automatically propagate changes to all fragments](https://www.ignek.com/wp-content/uploads/2024/03/Automatically-propagate-changes-to-all-fragments-1024x464.webp)
- Under the content and data section, click on the Page Fragments.
![Page Fragments under system setting | Fragments in Liferay Page Fragments under system setting](https://www.ignek.com/wp-content/uploads/2024/03/Page-Fragments-under-system-setting-1024x586.webp)
- Check the Propagate Fragment Changes Automatically box.
![Propagate Fragment configurations | Fragments in Liferay Propagate Fragment configurations](https://www.ignek.com/wp-content/uploads/2024/03/Propagate-Fragment-configurations-1024x346.webp)
- Click on Save.