Loop through external data

In the previous lesson you created a page that can dynamically display details for a single article. Now you will create a page that displays a list of articles, along with a link to the article detail page.

Create an articles page#

1. In Uniform, navigate to the Project Map.
2. Edit the node Home > Articles.
3. Set the following values:

   Name	Value
   Node type	Composition
   Composition option	Create new
   Composition type	Page

4. Click Save.
5. In the project map, navigate to the node Home > Articles.
6. Open the composition.
7. Change the following values on the composition:

   Field	Value
   Composition Name	Article

Connect data resources#

1. Open the data resources for the composition.
2. Delete the resource Single Article Content.
3. Click the button +.
4. Click add.
5. Enter the following values:
   Select a tabContentful
6. Click Save.
7. Under the field Content Block settings, select one of the entries.

   About this step

   This entry is only used so the components displayed within Canvas have a value during the authoring process.

8. Click Save.
9. Add another data resource using the following settings:
   Select a tabContentful
10. Click Save.
11. Under the field Articles settings, enter the following values:
    Select a tabContentful

    About this step

    This entry is only used so the components displayed within Canvas have a value during the authoring process.

12. Click Save.

Configure the page#

1. On the Hero component, set the following parameters:

   Name	Mapping
   Eyebrow text
   Title Style	H2
   Description

2. On the Hero component, map the following parameters:
   Select a tabContentful
3. On the Breadcrumbs component, set the following parameters:

   Name	Mapping
   Display Root Node	ticked
   Display Placeholder Nodes	ticked
   Separator	Chevron

4. Under the Breadcrumbs component, add the Grid component.
5. On the Grid component, set the following parameters:

   Name	Mapping
   Columns Count	3
   Gap X	Small

6. Inside the Grid component there is a slot named Grid Inner. Add the Loop component to this slot.
7. In the parameters for the Loop component, click select a data array.
8. Select the data resource Articles Content.
9. Select the following node:
   Select a tabContentful
10. Click Connect.
11. Inside the Loop component, add the Card component.
12. On the Card component, map the following parameters:
    Select a tabContentful
13. On the Card component, set the following parameters:
    Select a tabContentful
14. Click Publish.
15. On the published site, navigate to the articles page.