How to Build Editable Sections with Fragments in Liferay DXP 7.4

Introduction

Liferay DXP 7.4 makes it simple to create custom fragments that can be edited directly on a page. Fragments empower developers and content authors to reuse UI components while still customizing text, images, or layouts without touching code.

In this guide, we’ll build a repeatable editable section using fragments, so content creators can add multiple sections dynamically on a page.

---

1. What Are Fragments?

A fragment is a reusable piece of UI (HTML, CSS, JS) that can be dropped into Liferay’s page builder.
Each fragment can have:

• Static content → fixed UI
• Editable content → text, images, or links that content editors can change
• Repeatable sections → flexible layouts with multiple instances

---

2. Creating a Custom Fragment

1. Go to Control Panel → Design → Fragments
2. Create a New Fragment Collection (e.g., CustomSections).
3. Inside it, create a Fragment → Editable Section.

This creates 3 files:

• fragment.html
• fragment.css
• fragment.js

3. Adding Editable Fields

In fragment.html:

<section class="custom-section">
  <h2 data-lfr-editable-id="title" data-lfr-editable-type="text">
    Default Section Title
  </h2>

  <p data-lfr-editable-id="description" data-lfr-editable-type="text">
    Enter section description here.
  </p>

  <img 
    src="https://via.placeholder.com/600x200" 
    alt="Placeholder"
    data-lfr-editable-id="image" 
    data-lfr-editable-type="image"
  />
</section>

This makes the title, description, and image editable in the page editor.

---

4. Styling the Section

In fragment.css:

.custom-section {
  padding: 2rem;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #f8fafc;
  margin-bottom: 1.5rem;
}

.custom-section h2 {
  color: #0055aa;
  margin-bottom: 0.5rem;
}

---

5. Enabling Repeatable Sections

To make the fragment repeatable, add a configuration JSON.

Create fragment.json:

{
  "editableFields": {
    "title": {
      "type": "text",
      "repeatable": true
    },
    "description": {
      "type": "text",
      "repeatable": true
    },
    "image": {
      "type": "image",
      "repeatable": true
    }
  }
}

Now, editors can add multiple blocks of this fragment in a page.

---

6. Using in a Page Template

1. Go to Site Builder → Page Templates.
2. Insert your fragment (Editable Section).
3. Authors can now duplicate it as many times as needed → perfect for feature sections, FAQs, testimonials, or content blocks.

---

7. Common Issues

• Edits not saving? → Ensure fragment is published, not just saved as draft.
• CSS not applied? → Scope selectors with .custom-section to avoid conflicts.
• Repeatable not working? → Check fragment.json syntax.

---

Conclusion

With editable, repeatable fragments, you can create flexible, reusable content sections in Liferay DXP 7.4. This makes it easier for business users to build pages without involving developers for every change.