Wasim's Site

Liferay Fragment Configuration Builder

Build Liferay page fragment configuration.json files visually. Add text inputs, select dropdowns, color pickers, and item selectors. Export ready-to-use JSON for your fragment project — no coding required.

Liferay Fragment Config Builder

Build Liferay fragment configuration.json files visually. Add configurable fields (text, select, color, item selector) and export ready-to-use JSON.

Add Configuration Field

Add fields to generate your configuration.json file.

About Fragment Configuration Files

A Liferay page fragment is a reusable HTML, CSS, and JavaScript component that can be added to portal pages. A configuration.json file makes your fragment configurable — it defines which settings site administrators can edit when they add your fragment to a page. Without it, fragments are static. With it, they become flexible tools that editors can customize without code.

Why Use Fragment Configuration?

  • Editability: Site admins can customize your fragment without touching code.
  • Reusability: One fragment can be configured differently on different pages.
  • Professional: Fragments with configuration feel more polished and production-ready.
  • Reduces Code Duplication: No need to build multiple similar fragments.

Configuration Field Types

This tool supports four primary field types:

  • Text Input: Simple text field for strings and numbers. Use for titles, labels, URLs, etc.
  • Select: Dropdown with predefined options. Use for choosing styles, layouts, or modes.
  • Color Picker: Visual color selection. Use for theme colors, backgrounds, or highlights.
  • Item Selector: Browse and select portal items (documents, images, web content). Use for dynamic content references.

How to Use This Builder

  1. Plan your fields. Decide which settings site admins should customize.
  2. Add each field. Fill in name, label, type, description, and options (if applicable).
  3. Review the JSON. The preview shows the generated configuration.json.
  4. Download or copy. Download the file directly or copy it to your clipboard.
  5. Deploy. Add the JSON to your fragment project root and deploy.

Example: A Color Theme Fragment

Suppose you have a carousel fragment that displays products. You might want to let site admins customize:

  • Background color (Color Picker)
  • Text color (Color Picker)
  • Display mode: Grid or Carousel (Select with options)
  • Number of items to show (Text Input)

This tool lets you build that configuration.json without writing any JSON by hand.

Fragment Project Structure

Once you download your configuration.json, your fragment project should look like:

my-fragment/ ├── configuration.json ├── index.html ├── styles.css ├── script.js └── thumbnail.png

Frequently Asked Questions

What is a fragment configuration.json?
A configuration.json file in a Liferay page fragment project defines the configurable fields that site administrators can edit when the fragment is added to a page. Each field appears in the fragment's configuration panel.
What field types are supported?
Text Input (simple text), Select (dropdown with options), Color Picker (color selection), and Item Selector (select portal items like documents or images).
Do I need to know JSON?
No. This tool generates valid configuration.json for you. Just add fields with a form, and copy or download the generated JSON file.
Can I edit the JSON after downloading?
Yes. The generated JSON is standard JSON following Liferay's data engine schema. You can edit it in any text editor and drop it into your fragment project.
Where do I put the configuration.json?
Place it in the root of your fragment project directory (same level as the HTML and CSS files). Liferay will automatically detect and load it.

Official Resources