Mapping Repeatable Fields to Fragments

Important

Currently, this feature is behind a release feature flag (LPD-11377). Read Release Feature Flags for more information.

Liferay DXP 2024.Q3+/Portal 7.4 GA125+

When creating fields on web content structures, you can make them repeatable. You can then map these fields to fragments and publish them on a page. This is a great way to publish structured content that follows a pattern, such as a FAQ, a job listing, or in the example below, an employee directory.

Creating a Web Content Structure With Repeatable Fields

This example creates a structure with a repeatable fields group to store basic information about employees in a fictional software company.

  1. Open the Site Menu (Site Menu), expand Content & Data, and go to Web Content.

  2. Select the Structures tab and click New. Name the structure Employee Info.

  3. Drag and drop a Text field to the structure. Change its label to Name.

  4. Add a second Text field on top of the Name field to create a fields group. Label it Job Title.

    Create a fields group by adding a field on top of another.

  5. Add a third Text field into the Fields Group to place it at the end of the group. Label it Contact.

    Add a field to the end of the fields group.

  6. Select the Fields Group and, on the right side, toggle the Repeatable option on.

    The (Add icon) icon appears at the top right corner, confirming the fields group is repeatable.

    Mark the fields group as repeatable.

  7. Click Save.

Creating a Web Content Article

Create a web content article based on the Employee Info web content structure and add information about the software engineers in the fictional company.

  1. Open the Site Menu (Site Menu), expand Content & Data, and go to Web Content.

  2. Select the Web Content tab and click New. Choose Employee Info structure. Name the article Software Engineers.

  3. Add a name, a job title, and contact for an employee.

  4. Click (Duplicate icon) and fill in the information for a few more fields groups.

    Fill in the repeatable fields.

  5. Click Publish.

Mapping Repeatable Fields in Display Page Templates

Create a display page template and map the repeatable fields of the Software Engineers article to fragments within a Collection Display fragment to display the list of software engineers in the company.

  1. Open the Site Menu (Site Menu), expand Design, and go to Page Templates.

  2. Select the Display Page Templates tab and click New. Select a Master Page.

  3. Name it Software Engineers List. Select Web Content Article as the Content Type and Employee Info as the Subtype. Click Save.

  4. In the Fragments and Widgets sidebar, look for the Collection Display fragment and drag and drop it into the page.

  5. Select the Collection Display fragment and, on the right, click Select Collection.

    Select a collection to display.

  6. In the modal window that opens, select the Repeatable Fields Collection Provider tab and choose the collection you want to display. In this example, it’s Fields Group.

    Choose a collection from the Repeatable Fields Collection Provider tab.

  7. Add a Heading fragment into the Fields Group collection item.

    Add a Heading fragment into the Fields Group collection item.

    Note

    If the collection display contains more than one item, you can drag the fragment or widget to any of them. The rest of the items in your collection use the same layout settings automatically.

  8. Double-click the Heading fragment. On the right, under the Mapping tab, select Name as the field.

    Map the Heading's content to the field inside the repeatable fields group.

  9. Repeat the same process to add two more Heading fragments to the first Collection Item and select Job Title and Contact as their fields.

  10. To help visualize the collection items, select the last Heading mapped to the Contact field. On the right, select the Styles tab. Under Spacing, add a Spacer 4 as the Margin Bottom.

    Add a margin to the last Heading fragment to help visualizing the blocks.

  11. Preview the display page template by clicking NoneSelect Other ItemSoftware Engineers at the top right corner.

    Select a web content article to preview the display page template.

In the end, you should see the information added to the repeatable fields groups in the Software Engineers article.

All the information added to the article appears in the Collection Display fragment.

Mapping Repeatable Fields to Other Fragments in Content Pages

You can also map repeatable fields to other fragments in content pages and select which iteration to display. In this example, create a simpler web content structure and article with the names of employees in a certain department. Then, map the information to fragments added to a content page.

Start by creating another web content structure and article:

  1. Create a simple web content structure named Employees with one repeatable Text field labeled Name.

    Create a web content structure with a repeatable field.

  2. Create a web content article based on the Employees structure. Name it however you want and add some names to it. In this example, it’s called Spanish Employees and it’s a list of Spanish employees.

    Create a web content article based on the Employees structure.

Create a content page, add some Heading fragments to it, and map the article’s fields to the fragments:

  1. Open the Site Menu (Site Menu), expand Site Builder, and go to Pages.

  2. Click NewPage. Select the Blank template and name it.

  3. In the Fragments and Widgets sidebar, look for the Heading fragment and drag and drop it into the page.

  4. Double-click the Heading fragment. On the right, select the Spanish Employees article as the Item and Name (Repeatable) as the Field.

    The repeatable fields are marked as (Repeatable).

    Map the heading to the repeatable field.

  5. Choose which Iteration to Display: First, Last, or select a Specific Number.

    The iteration numbers start at one. If the specific number doesn’t exist, the field appears as empty.

    Choose an iteration to display.

This way, you can select and display specific fields from the list of repeatable fields.

As a result, you can display specific fields from the list of repeatable fields.

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy