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.
Code Editor
The code editor is split into four panes:
HTML: Supports standard HTML, along with Liferay-specific tags and FreeMarker (using the alternative (square bracket) syntax) that can be used to add dynamic behavior.
Type $( to begin using auto-completion to find variable names. Type [@ to use auto-completion to find taglib names.
CSS: Supports standard CSS.
JavaScript: Supports standard JavaScript. You can also access configuration values in the FreeMarker context in the JavaScript pane.
Preview: provides a live preview of the component that updates as you write code. You can switch between desktop, mobile, tablet, and expanded views.
Configuration
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 fragment’s Configuration Menu. For example, you can add a selector to your fragment’s configuration options to choose a color for the fragment’s heading. Defining configuration options for a fragment gives it more flexibility, reducing the number of fragments you must maintain.
Changes to the configuration automatically appear in the code editor. If your configuration is invalid, you can’t publish your fragment. Always ensure the JSON configuration is valid before previewing or publishing fragments.
Configuration values are made available to the fragment through the FreeMarker context in the HTML pane. You can combine configuration options with conditional values in the HTML to create dynamic experiences for the user. You can also access these values via JavaScript. See Making Page Fragments Configurable for more information.