A collection of robust, accessible, and responsive Liferay fragments for DXP platforms.
- 🚀 Deployment
- Core Fragments
- Specialized Collections
- 🖼️ Visual Gallery
- 📖 Recipes & Workflows
- ⚙️ Prerequisites & Setup
- ❓ Troubleshooting & FAQ
- 🛠️ Developer Resources
Use the provided deploy-fragment-zips.sh script to automate the deployment of
your fragment and Language ZIPs.
./deploy-fragment-zips.sh [TARGET_PATH] [--all | folder_name1 folder_name2 ...]- TARGET_PATH: The root of a Liferay Workspace or a standalone Liferay bundle.
- --all: Deploys all ZIPs found in the
/zipsdirectory. - folder_name: Space-separated list of specific fragment or collection folder names to deploy.
./deploy-fragment-zips.sh ~/liferay-workspace --all
./deploy-fragment-zips.sh /opt/liferay gemini-generated master-page-background-colourTo demonstrate the data-driven capabilities of fragments like Activity Heatmap
or Object-Linked Chart, you can deploy the sample showcase datasets.
Note: Liferay 2025.Q4.10 or later is required for these datasets to function correctly due to site-scoping requirements.
./deploy-fragment-zips.sh [TARGET_PATH] --showcaseThis will deploy all showcase resources found in
other-resources/showcase-data/.
- Build the assets: Run
./create-fragment-zips.shto generate the ZIP files. - Deploy Fragments: Copy the
.zipfiles from./zips/fragments/to your Liferay instance's/deployfolder. - Deploy Language Overrides: Copy the
-language-batch-cx.zipfiles from./zips/language/to your Liferay instance's/osgi/client-extensions/folder. - Deploy Special Resources: Copy any
.zipfiles from/other-resources/*/dist/to your Liferay instance's/osgi/client-extensions/folder.
Liferay will automatically import the fragments and register the language overrides as Client Extensions.
If you want to target a specific Virtual Instance or Site, set these environment
variables before running ./create-fragment-zips.sh:
COMPANY_WEB_ID: The Web ID of the Virtual Instance (Defaults to*/ Global).GROUP_KEY: The Site Friendly URL or Name (Ignored ifCOMPANY_WEB_IDis*).
These fragments provide foundational utility and data display capabilities.
- Commerce
- Content
- Form Utilities
- Form Field Enhancements
- Populated Form Fields (Persistence, Derived Values)
- Liferay Iframer
- Meter Reading (DEPRECATED)
- Date Display (DEPRECATED)
A suite of high-fidelity, data-driven fragments designed for modern Liferay portals.
- Data Visualization
- Object Integration
- High-Fidelity UI
- Content Fragments
- Object Fragments
- Pulse Integration Fragments
- Campaign Initialiser
- Cookie Sniffer
- Custom Event Listener
- Pulse Button
- Collection Summary (Campaign Tracking)
- Finance Fragments
- Conditional Content (Outcome-based Drop Zones)
- Tracker Fragments
- Tracker (Container)
- Tracker Step
- Collection Summary (Multi-step Process Indicators)
- Dashboard Components
- Widget Modifiers
- Alerts Modifier
- Collection Summary (Alerts/Announcements Enhancements)
- Layout Components
- Header Components
- Responsive Menu Fragments
- Hero Assets
- Master Page Utilities (Global BG Control)
- Profile Fragments (DEPRECATED)
- Commerce Fragments
- User & Account Fragments
For more information on developing Liferay fragments, refer to the following official Liferay Learn guides:
- Fragment-Specific Tags and Attributes Reference:
A comprehensive guide to the
data-lfrattributes and FreeMarker variables available within fragments. - Fragment Configuration Types Reference:
Details on all available configuration field types (text, checkbox, select,
etc.) for
configuration.json. - Page Fragment Editor Interface Reference: An overview of the built-in Page Editor interface and how it interacts with your fragment code.
To maintain high quality and compatibility across all fragments, all contributions must adhere to these mandatory standards:
- Explicit Paths:
fragment.jsonMUST explicitly definehtmlPath,jsPath,cssPath, andconfigurationPath. Defaults are not permitted. - JS Encapsulation: All JavaScript must be encapsulated in an initialization
function (e.g.,
initMyFragment()). Top-levelreturnstatements are strictly prohibited. - Site-Scoping: Fragments using Object APIs must support Site-scoped data
via dynamic discovery (see
gemini.mdfor the pattern).
- Grouped Fields: Fields must be logically grouped into named field sets (e.g., Data, Behavior, Style).
- Dependency Scope: Dependent fields and their source fields MUST reside within the same field set. Liferay does not support cross-field-set dependencies.
- Holistic Renaming: Renaming a field in
configuration.jsonrequires immediate, coordinated updates to all references inindex.js,index.html, andindex.ftl.
- Comprehensive Coverage: ALL labels and descriptions in
configuration.json(includingvalidValues) MUST have a corresponding entry inLanguage_en_US.properties. - No Lazy Keys: Properties where the key equals the value (e.g.,
lfr.key=lfr.key) are prohibited and will fail the audit. - Mandatory Descriptions: Every configuration field MUST have a meaningful description to assist content creators in the Page Editor.
- Safe Tokens: Use CSS variables defined in THEMES.md. Avoid hardcoded hex colors.
- Linter Enforcement: Every change must pass the local audit script before
submission:
npm run lint
- 🖼️ Visual Gallery - A screenshot-first guide to every fragment.
- 📖 Recipes & Workflows - Step-by-step guides for common fragment combinations.
- ⚙️ Prerequisites & Setup - Mandatory Liferay configurations (SAP, FreeMarker).
- ❓ Troubleshooting & FAQ - Common issues and solutions.
- 🎬 Videos - Video tutorials and walkthroughs.
- Miscellaneous Fragments