Page Fragment Editor Interface¶
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.
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 CE 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.