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 GA132+

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 (), 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.

   

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

   

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

   The () icon appears at the top right corner, confirming the fields group is 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 (), 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 () and fill in the information for a few more fields groups.

   

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 (), 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.

   

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.

   

7. 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.

   

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.

    

11. Preview the display page template by clicking None → Select Other Item → Software Engineers at the top right corner.

    

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

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.

   

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 content page, add some Heading fragments to it, and map the article’s fields to the fragments:

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

2. Click New → Page. 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).

   

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.

   

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

Related Topics

• Mapping and Linking Fragment Elements
• Mapping Web Content Templates to Fragments
• Mapping Calendar Event Fields to Display Page Templates