Scaling Liferay Fragments: How AI and Automation Accelerated My UX Library

My Liferay Fragments repository has been a personal lab for UI experimentation for quite some time, but it gained wider visibility when it was highlighted during my DEVCON talk on Responsive Navigation in Liferay.

While that talk focused on a specific set of menu fragments, the repository has since undergone a massive transformation. By partnering with Gemini, I have refactored the entire project to move beyond manual management into a high-efficiency automation suite.

The Story: Accelerating with AI

The goal was to transition from "cool fragments" to "production-ready tools." Using Gemini, I was able to rapidly expand the library while adding professional standards that would have been too time-consuming to maintain manually:

• The "Gemini 15" Showcase: I have introduced a dedicated collection of 15 AI-generated fragments. These fragments showcase how AI can handle complex JavaScript logic, such as the auto-advancing digits in my Meter Reading fragment, refined to handle edge cases like copy-pasting.

• Localised CX (Client Extensions): Every fragment now supports seamless localization through dedicated language properties, ensuring global readiness right out of the box.

• Showcase Data Integration: To help you see the value immediately, fragments now include built-in showcase data, allowing you to visualize complex UI components in the Page Editor without pre-configuring data sources.

A "Zero-Menu" Deployment Process

Perhaps the most significant upgrade is the enhanced release process. Gone are the days of manual imports through the DXP interface.

With the help of automation, the repository now packages fragments into deployable ZIP files. This allows for a "drop-and-go" workflow: simply download the latest release and save it into your Liferay deploy folder. The system handles the rest, making it faster than ever to move from a GitHub repo to a live site.

Featured Highlights

• Automated Meter Reading: A utility fragment that captures numeric values with professional UX patterns (auto-advancement, backspace logic) and pushes data to Liferay Objects via a custom readingCallback().

• Commerce Dynamic Badge Overlay: Automatically flags products as "New" or "Low Stock" based on real-time Commerce data, with configurable positioning and styles.

• Collection-Based Date Displays: Intelligent UI for mapping date ranges directly from your data sources.

Explore the Evolution

Whether you're looking for reference code or ready-to-use components, the new automated structure makes it easier than ever to explore what's possible when you combine Liferay DXP with AI-assisted development.

Explore the Repository: peterrichards-lr/liferay-fragments