Page Fragment Editor Interface Reference¶
The Page Fragment editor’s interface is organized into two tabs:
The sections below cover how to use these portions of the interface. See Developing Page Fragments to learn how to develop Page Fragments.
The code editor is split into four panes:
HTML: Supports standard HTML, along with Liferay Portal specific tags and FreeMarker (using the alternative (square bracket) syntax) that can be used to add dynamic behavior.
$( to begin using auto-completion to find variable names. Type
[@ to use auto-completion to find taglib names.
CSS: Supports standard CSS.
Preview: provides a live preview of the component that updates as you write code. You can switch between desktop, mobile, tablet, and expanded views.
Defining configurations for Page Fragments is available in Liferay DXP 7.2 SP1+ and Liferay Portal GA2+.
The Configuration tab provides input for adding configuration options to the Page Fragment’s Configuration Menu. This is equivalent to the
configuration.json file that the Fragments Toolkit produces. For example, you can add a selector to your Page Fragment’s configuration options that lets users choose a color for the Page Fragment’s heading. Defining configuration options for a Page Fragment gives it more flexibility, reducing the number of Page Fragments you must maintain.
Changes made to the configuration are automatically made available to the code editor. If your configuration is invalid, you can’t publish your Page Fragment. Be sure to always have a valid JSON configuration before previewing or publishing Page Fragments.
In DXP 7.3+, you can also select a checkbox near the top of the page to make your fragment cacheable. If this option is enabled, then the fragment is added to the cache when it is added to a page, improving the performance of pages with these fragments.