Liferay regularly updates its versions with latest features and functionalities to provide users with a great experience. It wanted enterprise users and developers to provide more features with less coding. Their Digital Experience Platform has unmatched capabilities to build enterprise portals. Let’s learn about Fragments and its inline editing tool
What is a Fragment?
Liferay developers needed a tool to edit page templates on the go without changing a lot of code. So, they have created Fragments to apply templates to multiple pages. Fragments can be reused several times by non-technical and technical users to push out content within an enterprise portal. That saves time and costs along with human efforts to create new pages by writing the same code repeatedly.
Liferay’s page fragments are “reusable page parts” that are developed by UI and UX consultants that can be used by non-technical users. Earlier, developers used generic content pages but with enhanced branding users demanded a better experience with the content. So, Liferay decided to allow developers to create page templates that can be used a “fragment” that can be reused within a theme without having to use generic pages.
Fragments are designed and developed to allow business users and marketers to build content pages that look and act like an actual web page. A page fragment can be created from a page fragment collection from the library using these three tools:
HTML: It is the main markup of the fragment and with its special tags, developers can add dynamic behavior to a content page.
CSS: Positions and Styles are the fragment’s markup in a page.
How to use Inline Editing Feature in Liferay 7.1?
Using Inline Editing tools, Liferay Digital Experience Platform aka DXP makes it easy to use fragment feature. Let’s see the use case of this feature.
Multiple Pages/ Sections like About us, Mission & Vision, Our Team, and Contact are created for users to view them. We can use Fragments for such site content that can be easily maintained by non-technical users.
Liferay introduced new kind of page called Content page that is mostly used when your page consists of static contents. Basic idea of content page is to design the page as per the requirement. Once the design get ready respective fragments needs to be developed. This fragments altogether create a page template which indeed used to create content page. This means content page comprised of all the elements that can be customized later on as and when needed.
One of the main features of the fragment is editable contents. Developer can specify text and images as editable. Along with this, it also supports Liferay specific features by allowing portlets to be embedded in the fragments to make the content page more dynamic than traditional Liferay web contents. You can also configure embedded portlet directly from the page. Once your all fragments get published you must start building your page template.
Page template is created by using multiple fragments as per user requirements. You can use any fragment multiple times in the page template. Once your page template is ready you can create your content page by using it. Let’s go through one basic example that shows the usage of Fragments, Page Template & Content Page.
First of all we will create 3 fragments of the text, image and widget respectively. In order to create fragment perform the following steps.
- Go to Site Administration > Build > Page Fragments
- Create new fragments named Text Fragment / Image Fragment / Breadcrumb Fragment ( Widget )
- Add HTML & CSS code as shown in the below mentioned screenshots respectively and then Publish the fragment
tag is used to make the content ( text / image ) editable type=”text” will create text content that can be edited later Each editable content must have unique id type=”image” will create image content that can be edited later In order to add the widget in the fragment you need to use this tag with the alias of specific widget Example : for Navigation Portlet, for Breadcrumb Portlet
Apart from the text and image type, fragment also support rich-text type of editable content which provides WYSIWYG editor that allows additional text formatting, adding images and many more.
In order to add your custom widget inside the fragment you need to specify alias in it’s portlet class as mentioned below :
Then you can use that widget in the fragment by tag.
Now we are ready with our fragments to create page template. Create page template by following below mentioned steps :
- Go to Site Administration > Build > Pages
- Go to the Page Templates tab.
- Add new Content Page Template named Editable Template.
- It will open page that allows you to design your template by adding specific fragments. Let’s add Breadcrumb Fragment, Text Fragment and Image Fragment respectively in our page template.
Now, we will create our content page by using our Editable Template.
Create content page by following below mentioned steps :
- Go to Site Administration > Build > Pages
- Add new Public Page
- Select Editable Template
- Provide name of the page
- It will open page that allow you to edit the page template content to the page specific contents.
Note: You can edit your page content anytime just by clicking on the edit icon from the top-navigation.