How To Edit Fragments In Liferay 7.1 Using Inline Editing Tools?


How To Edit Fragments In Liferay 7.1 Using Inline Editing Tools?

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:

JavaScript: Provides dynamic behavior to the page fragment with ease.

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.

Read MoreHow to override Liferay 7 portal JavaScript?

The CSS, HTML and JavaScript are standard codes for building a web portal but Liferay enhances them using the page fragments. It allows developers to specify text and images that can be edited in near real-time usage along with the ability to utilize “Rich Text”. Liferay portlets can be embedded in fragments as “Widgets” creating dynamic pages compared to static web content.

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.

Content Page

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.


In order to create content pages, you need to develop respective fragments. Fragments are the building blocks that is used to create contents for the content page. You can create fragment by using HTML, CSS and JavaScript.

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

Now let’s go through the code we had used in the fragments. You must be aware with the HTML & CSS code used here. New stuff are the Fragment specific tags. These tags makes the content editable even at the time of publishing. Here we will go through each of them one by one as follow:

Code Snippet:


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.
  • Publish

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.

What else?

You can also explore your knowledge about Building Digital Workplace by One Brick At A Time using Liferay Enterprise Solutions by visiting our blog.

This blog has been written by our Consultant Kuldeep Acharya