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. Navigate to Experience > 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, click the node Home > Articles to open the new composition.

Add data resources#

Content Block#

1. In the side rail, click .
2. Click the button Add data resource.
3. Click the add link in the upper right-hand corner of the drawer.
4. Select your data source.
   Select a tabContentfulContentstack

   Contentful > Contentful

   Contentstack > Contentstack

5. Enter the following values:
   Select a tabContentfulContentstack

   Field	Value
   Archetype	Single Entry
   Allowed Content Types	Content Block
   Name	Content Block
   Public ID	contentBlock

   Field	Value
   Archetype	Single Entry
   Allowed Content Types	Content Block
   Search fields	Title
   Name	Content Block
   Public ID	contentBlock

6. Click Save.
7. Select the entry with the following title:
   Articles for all your brewing needs

   CopyCopied!
8. Click Save.

Articles#

1. Select your data source.
   Select a tabContentfulContentstack

   Contentful > Contentful

   Contentstack > Contentstack

2. Enter the following values:
   Select a tabContentfulContentstack

   Field	Value
   Archetype	Query
   Allowed Content Types	Article
   Name	Articles
   Public ID	articles

   Field	Value
   Archetype	Dynamic Query
   Allowed Content Types	Article
   Search fields	Slug
   Name	Articles
   Public ID	articles

3. Click Save.
4. Under the field Articles settings, enter the following values:
   Select a tabContentfulContentstack

   Field	Value
   Count	25
   Sort	CreatedAt
   Sort Order	Descending

   Field	Value
   Count	25
   Sort	Created At
   Sort Order	Descending

   About this step

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

5. Click Save.
6. In the upper right-hand corner of the data resources drawer, click to close the drawer.

Configure the components#

Update Page component#

1. Select the Page component.
2. Set the following parameters:

   Parameter name	External field
   Page Title	Articles page

Update Hero component#

1. Select the Hero component.
2. Set the following parameter values:

   Section	Parameter name	Value
   Content	Eyebrow text
   Content	Title Style	H2
   Content	Description

3. For the following parameters, clear any existing value and insert the specified dynamic token:
   Select a tabContentfulContentstack

   Section	Parameter name	External field
   Content	Title	Content Block Content > fields > title

   Section	Parameter name	External field
   Content	Title	Content Block Content > entry > title

4. For the parameter Image, clear the existing value and map to the following custom URL:
   https://res.cloudinary.com/uniform-demos/image/upload/v1692269405/coffee-marketing/hero-1_vks69p_uywcq7_r0atem.png

   CopyCopied!

Update Breadcrumbs component#

1. Select the component Breadcrumbs.
2. Set the following parameter values:

   Parameter name	Value
   Display Root Node	checked
   Display Placeholder Nodes	checked
   Separator	Chevron

Add Grid component#

1. Under the Breadcrumbs component, add the component Grid.
2. Set the following parameter values:

   Parameter name	Value
   Columns Count	3
   Gap X	Small
   Gap Y	Small

3. Click to open the structure panel.
4. Under the Grid component, find the slot named GRID INNER.
5. In this slot, add the component Loop.
6. Click to close the structure panel.

   About this step

   The Loop component is still selected.

7. In the right column, click Select.
8. In the dropdown, select the data resource Articles Content.
9. Select the following node:
   Select a tabContentfulContentstack

   Articles Content > items

   Articles Content > entries

10. Click Connect.

Add Card component#

1. Click to open the structure panel.
2. Under the Loop component, click .
3. Select the component Card.
4. Click to close the structure panel.

   About this step

   The Card component is still selected.

5. Set the following parameter values:

   Section	Parameter name	Value
   Description	Line Count Restriction	6
   CTA	Button Copy	Read More

6. For the following parameters, clear any existing value and insert the specified dynamic token:
   Select a tabContentfulContentstack

   Section	Parameter name	External field
   Content	Title	Articles Content items Loop item > fields > title
   Content	Image	Articles Content items Loop item > fields > thumbnail > fields > file > url If you get an error message about the value not being a valid image URL, click in the URL field before the purple text and enter https:. After you do this, the image should appear properly.
   Description	Description	Articles Content items Loop item > fields > description

   Section	Parameter name	External field
   Content	Title	Articles Content items Loop item > title
   Content	Image	Articles Content items Loop item > thumbnail > url
   Description	Description	Articles Content items Loop item > description

7. In the section CTA, find the parameter Button Link.
8. Click Select link.
9. Click the tab Project Map.
10. Select the node Home > Articles > Article.
11. Under the section Article parameters, click .
12. Click Insert dynamic token.
    Select a tabContentfulContentstack

    Articles Content items Loop item > fields > slug

    Articles Content items Loop item > slug

13. Click Connect.
14. Click Accept.

Publish & test the composition#

A new composition is not available to visitors until it is published.

1. Click Publish... to publish the composition.
2. In a new browser tab, open http://localhost:3000/articles