This website uses cookies to ensure you get the best experience. Learn More.
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.
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.
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.
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.
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.
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.
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:
Alignment
Heading type (h1, h2, etc)
Line-height
Bootstrap Color
Bootstrap Background color
Bootstrap text styles (lead, display-1, display-2, etc).
Bootstrap Spacing (standard margin and padding 1 to 5)
Clean format
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:
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.
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.
<liferay-asset:select-asset-display-page/>
There are three possible types of display pages:
Default display page for the asset type (if defined in the Display Pages administration application)
Specify some display page using corresponding item selector
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.
classNameId
classPK (long) - a primary key of the asset entry to select an asset display page for.
classPK
classTypeId (long) - a class type ID of the asset type to select an asset display page for.
classTypeId
eventName (String) - event name which fires when user selects a display page using item selector.
eventName
groupId (long - required) - a group ID of the entity to select an asset display page for.
groupId
showPortletLayouts (boolean) - allow selecting pages with Asset Publisher configured as a default Asset Publisher for the page.
showPortletLayouts
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
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:
<lfr
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-fragment
add-collection: Creates a new empty fragment collection
add-collection
compress: Compress every collection and fragment in current project inside a build/fragments.zip file
compress
export: Get’s every collection and fragment from a Liferay Site and adds them to current project
export
import: Sends every collection and fragment in current project to a Liferay Site
import
import:watch: Shortcut for “npm run import -- --watch”. Same as import, but watches for any change in current project and upload fragments automatically
import:watch
npm run import -- --watch
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
collection.json
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 application in Liferay Portal Administration area has been improved to allow finding and navigating to a specific page more easily:
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:
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.
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.
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:
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
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)
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
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
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.
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.
