For Liferay DXP 7.4+, Fragment Collections are called Fragment Sets in the Liferay UI.
Sets organize Fragments so that groups of related Fragments can be managed and shared. Users navigate Sets when selecting Fragments to add to a page, so you’ll create Fragments in Sets that make it easy to combine into Pages. An example appears in the admin page, which shows all the out-of-the-box Fragments (and their code). A Page Fragment’s code can be updated through the admin interface. If you want your Page Fragment’s code instead to be static (locked and unable to be edited through the interface), you can create a Contributed Fragment Set.
Browser-based tools help you create Fragments directly on your system, and CLI-based tools integrate with your own toolset to preserve your productivity:
- The Built-in Fragments Editor: use the built-in editor to develop Page Fragments inside of Liferay Portal.
- The Fragments Toolkit: use the Fragments CLI to generate, import, and export Page Fragments and Fragment Sets from your desktop.
- Editable Elements: make text, images, links, and “rich” text elements editable, so users can replace the content with custom text and images. This is the key feature of Fragments that makes them reusable. You can also embed widgets.
- Drop Zones: Add drop zones to Fragments using the
<lfr-drop-zone></lfr-drop-zone>label. Once added, you can drag and drop Fragments and widgets into the defined area.
- Configuration Options : Add configuration options to the application’s Configuration Menu, like modifying the Fragment’s font color.
- FreeMarker: FreeMarker is a templating language that enhances HTML with variables, conditional statements, and more. From your HTML, you can use the alternative (square bracket) syntax for FreeMarker.
Grant permission to Create or Edit templates in FreeMarker to trusted users only. See Assigning Permissions to Web Content Structures and Templates for information about Web Content Templates security.
We recommend these best practices when writing your Fragment code:
- Make your code semantic and highly reusable.
- Namespace your Fragments properly so they don’t interfere with other elements on the page outside of the Fragment.
- Use the autogenerated Fragment class as the basis for all CSS selectors you add to avoid impacting other Fragments.
- Escape Fragment configuration text values.