Web Experience new features in Liferay Portal 7.2 b1

With the previous release of Liferay Portal 7.1, there was a significant change on the approach to author pages within Liferay Portal, developed under the “Modern Site Building” project.

The ultimate goal of this vision is to empower non-technical users to create stunning websites. To achieve that goal, we envisioned the role of the marketer and business users as specific personas to keep in mind when designing the new features of Web Experience.

Liferay Portal 7.2 has continued the path that we started with version 7.1, leveraging and improving the Web Content Authoring experience through the following new features. Those new features are related to editing of Content Pages, Display Pages, Fragments, Navigation Menus and Pages Administration.

In short, the main goal is to make easier and give more powerful tools to non-technical users to create and edit sites and pages. But there have also been some improvements useful for web developers.

Content Pages.

The Content Pages’ edition has now been improved to allow a more visual edition and to give the business user the ability to configure a bigger number of styling characteristics.

On the right side of the editor there is a toolbar that allows you to switch between Sections, SectionBuilder, Widget or a structure view of the page.

Section Builder with visual page layout edition

The section Builder allows the editor to configure different layouts for the page


The layout can be filled with some basic components also available from the palette on the left.

Once the Layout has been chosen it can be customized by dragging its columns to resize to a different arrangement.


The layout can be also configured with certain style properties, like the Background Color, background image or customization of the spacing, number of columns, or padding and margins. Those properties can be accessed by a floating icon menu that appears when the layout is selected.


Out of the box fragments (for sections and components)

There are two types of fragments now: sections and components, that can be used to compose fragments.

We already provide a good bunch of them out of the box but, as a developer, you can change the ones provided and provide your own as part of your Liferay-based solution.

Allow marketers to also add widgets to a content page.

In 7.1 only the web developers could embed widgets within a fragment, and marketers could config those. With Liferay Portal 7.2, non technical users can also add any widget to the fragments created inline within the page.

Fully realistic editing (full edit mode)

Non technical users can now edit Content Pages within the context of the page. That means that, now the user has all the CSS loaded and all page elements (like headers and footers) are shown while the user is editing the content, giving a more realistic view of how the page will look like when published.

Improvements on editing basic text styles for rich text editable.

Now, marketers and business users can edit not only text and rich text on pages, but also they can modify some basic styling options such as:


Display Pages.

Display Pages is a tool to allow Marketers, Business Users and designers to display reusable contents and determine its look and feel. With version 7.2, their capabilities have been extended to support the following:

Change the theme and settings of display pages independently

Display pages are no longer stuck to the theme configured for the whole site, and the Marketer can change it or its settings for any manually created pages.

Portlet developers can add a field to the asset type to specify the preferred Display pages for the asset.

Developers can add support for Display pages in their custom entities by implementing AssetDisplayContributor and then add a field to the form of the custom entity so that the authors can choose a specific Display Page for it.

To add that field, developers just need to use the new taglib <liferay-asset:select-asset-display-page/> which renders a form field which allows to select an Asset Display Page for the specific asset type.

There are three possible types of display pages:

  1. Default display page for the asset type (if defined in the Display Pages administration application)

  2. Specify some display page using corresponding item selector

  3. None - the entity will not be visualizable using Display pages

Display page selector taglib has the following attributes:

  • classNameId (long - required) - a class name ID of the asset type to select an asset display page for.

  • classPK (long) - a primary key of the asset entry to select an asset display page for.

  • classTypeId (long) - a class type ID of the asset type to select an asset display page for.

  • eventName (String) - event name which fires when user selects a display page using item selector.

  • groupId (long - required) - a group ID of the entity to select an asset display page for.

  • showPortletLayouts (boolean) - allow selecting pages with Asset Publisher configured as a default Asset Publisher for the page.


Fragments are the building blocks that can be used by Marketers to compose and edit Display Pages and Content Pages. Fragments are defined by from an HTML block, CSS styling and some Javascript code to define dynamic behaviour.

Fragments are usually created by web developers, possibly using their preferred editors or tools. For that reason, in 7.2 a special focus has been put on making easier for them to import fragments from external sources, while the internal fragment editor has been improved

Fragment Editor shows available special tags.

When the developer starts typing a special tag to add dynamic behaviour on the code, and has introduced the <lfr prefix, the code editor will show a list with the available tags:


Fragment Toolkit: New npm tool to create, retrieve and upload fragments from command line.

A new yeoman generator allows the web developers to create new projects to create fragments using the developer’s preferred tools and environment and import or export fragments to liferay.

To install the generator you will simply need to run:

$ npm install --global generator-liferay-fragments

Once it is installed, the new project to create the fragments can be created using yeoman:

$ yo
? 'Allo! What would you like to do?
 Run a generator
 Liferay Theme
 Metal Clay
❯ Liferay Fragments


 Update your generators
 Install a generator
(Move up and down to reveal more choices)


After running the generator, the structure for the new fragment is created and the developers can use their preferred environment to edit the fragments


Once the project is created, some npm scripts are available to be executed with

$npm run <task>

Where task could be one of:

  • add-fragment: Creates a new empty fragment

  • add-collection: Creates a new empty fragment collection

  • compress: Compress every collection and fragment in current project inside a build/ file

  • export: Get’s every collection and fragment from a Liferay Site and adds them to current project

  • import: Sends every collection and fragment in current project to a Liferay Site

  • import:watch: Shortcut for “npm run import -- --watch”. Same as import, but watches for any change in current project and upload fragments automatically


Support for importing thumbnails, images and other resources in a fragment or collection of fragments.

Now it is possible to attach images to fragments or collections so that they can be easily reused by several fragments by referencing them by name within the HTML block or the CSS stylesheet.

The images can be uploaded to the ‘Resources’ tab on the Page Fragments collections administration:


And then, when editing the fragment code on the editor, the images can be referenced by its name


Also the resources will be included in the zip file when exporting, or importing the fragment collection. The zip file with the contents of the export has the following structure:

  • resources

    • resource1

    • resource2

  • fragments

    • fragment1

      • thumbnail.png

      • index.html

      • index.js

      • index.css

      • fragment.json

    • fragment2

      • thumbnail.png

      • index.html

      • index.js

      • index.css

      • fragment.json

  • collection.json


Navigation Menus

With the Navigation Menus introduced in 7.1, the site navigation could be detached from the page hierarchy, but there were some use cases that the navigations menus were not able to cover all the required features.

In 7.2 Navigation menus have been improved to:

The following improvements will need to be made to make it possible:

  • Add back the ability to move a page in the hierarchy (i.e. changing the parent page)

  • Add back the ability to reorder sibling pages

  • Allow selecting the page hierarchy when displaying a menu (from the Navigation Menu widget). If the site has both public pages and private pages, it should be possible to select either of them as the menu.

  • Add back the "hidden" checkbox when editing a page to allow specifying whether a page should be shown in the "Page Hierarchy Menu" or not.

    • If possible, make the text the reverse, to be positive. So instead of "Hidden" make it "Show in Pages Hierarchy Menu"

    • If there are public and private pages, then the text should be "Show in Public Pages Hierarchy Menu" and "Show in Private Pages Hierarchy Menu" respectively

  • It is no longer necessary to automatically create a navigation menu from the page hierarchy the first page an admin goes to "Navigation Menus" administration.

  • When adding a page, the checkbox to select a menu to automatically add the page to should not be displayed if there isn't any menu marked as "Add pages to this menu by default". If there is, the checkbox should be unchecked by default. Ideally, if there are several menus, each of them should have their own checkbox.

Pages Administration

Pages administration application in Liferay Portal Administration area has been improved to allow finding and navigating to a specific page more easily:


Search Pages by text

On the header of the pages administration there is a search box that allows to search pages also for their text, and not only navigating the page structure using the Miller columns below.

If you write a text and click the search icon, a list with all the matching pages by title will be shown:


Navigate directly to a page by its name

A new Page Navigator tool is provided so that Site admins can go directly to any page easily while browsing the site. On the top bar, the page name can show a dropdown menu that will show a search box to allow the site admin to look and navigate directly to that page.


Improved UX in Page Management

The UX on the page management has been reviewed and improved based on previous feedback. It makes easier the navigation between the different levels. And also allows to select multiple pages.


Streamlined Structure Content Authoring

As mentioned in the beginning one of the main goals for 7.2 has been to improve the authoring experience for non-technical users, and some features have been added to provide a structured web content authoring:

Powerful web content preview capabilities

The web content can be now previewed in several different contexts no matter which is the approval cycle that they go through.

So, web content authors can now see it

  • Preview a draft content before it’s published

  • Preview a pending content going through workflow

  • Preview a content scheduled to be displayed in the future

Also, they can be previewed in different contexts depending on where that content would or could be displayed:

  • Preview with any desired template

  • Preview with any desired display page template

  • Preview within a specific page where it’s being displayed


Show where a Web Content is included

As Web Content can be used in fragments or Display pages to make it reusable, the same content can be included in different pages, and the users responsible of authoring and managing the content sites, can easily lose track of where the display is shown.

To avoid that problem, now the Web Content shows where it is being displayed.This includes the following display mechanisms:

  • Web Content Display

  • Asset Publisher (only when Manual Selection is used)

  • Fragments (once LPS-86139 is implemented)

New web content editor with a focus on the content fields

Creation of Web Content without having a template.

With the introduction of Fragments in release 7.1, templates are not the only way to display content in a Web Content. Thus, in version 7.2 it is possible to create a web content without having to assign a template for it. This makes it easier for business users to create their own content structure using the visual form editor, since an automatic template will now be provided for them.

Also, the Web Content Manager has been improved to provide a fluid an distraction-free authoring experience


Content Sets

Finally, a new way for creating lists of content that can be included, personalized and reused across different places has been through the creation of several Content Sets:

  • Reusable collections of manually selected content

  • Reusable collections based on dynamic rules

Other changes

Allow change background image in a fragment.

With the 7.2 release, non-technical users can also edit the background image of a fragment to change it from the default one specified by the web developer when the fragment was first designed. This way, fragments with background images will be now more versatile and could be reused in more situations.

Display information of the author of a web content

The Marketers can now configure to display the name and profile image of the author and the last editor of any web content (or article).


These are a lot of changes in the way that non technical users can edit contents using liferay, and also a good set of new features that allow the web developer to give more useful authoring tools to them.

We have highlighted in this posts the ones that probably will be more noticeable, but you can already start playing and experimenting with these in the released Liferay Portal 7.2 Beta 1 Version.