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.

Goals

  1. Build a dynamic article list page that can display data from all articles, along with a link to the corresponding article detail page.
  2. Use the Loop component to handle multiple records.
  3. Test the dynamic article list page.
  1. In Uniform, navigate to the Project Map.
  2. Edit the node Home > Articles.
  3. Set the following values:
    NameValue
    Node typeComposition
    Composition optionCreate new
    Composition typePage
  4. Click Save.
  5. In the project map, navigate to the node Home > Articles.
  6. Open the composition.
  1. Open the data resources for the composition.

  2. Click the button Add data resource.

  3. Click the add link in the upper left of the drawer.

    add-new-data-type
    Link to add a new data resource.
  4. Select your data source. For example, Contentful. Enter the following values:

    FieldValue
    Data SourceContentful > Contentful
    ArchetypeSingle Entry
    Allowed Content TypesContent Block
    NameContent Block
    Public IDcontentBlock
  5. Click Save.

  6. Under the field Content Block settings > Select entry, select Articles for all your brewing needs.

  7. Click Save.

  8. Add another data resource using the following settings:

    FieldValue
    Data SourceContentful > Contentful
    ArchetypeQuery
    Allowed Content TypesArticle
    NameArticles
    Public IDarticles
  9. Click Save.

  10. Under the field Articles settings, enter the following values:

    FieldValue
    Entry count limit25
    SortCreatedAt
    Sort OrderDescending

    About this step

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

  11. Click Save.

  1. On the Hero component, set the following parameters by clicking the connection icon or removing existing data:

    NameMapping
    Eyebrow text
    TitleContent Block Content > fields > title
    Title StyleH2
    Description
  2. Select the connection icon next to the Asset field, and select Connect to a custom URL.
    Enter this in the URL field in the modal: https://res.cloudinary.com/uniform-demos/image/upload/v1692269405/coffee-marketing/hero-1_vks69p_uywcq7_r0atem.png

  3. On the Breadcrumbs component, set the following parameters:

    NameValue
    Display Root Nodeticked
    Display Placeholder Nodesticked
    SeparatorChevron
  4. Under the Breadcrumbs component, add the Grid component.

  5. On the Grid component, set the following parameters:

    NameMapping
    Columns Count3
    Gap XSmall
  6. Inside the Grid component there is a slot named Grid Inner. Add the Loop component to this slot.

  7. In Settings > Loop items > Select a source click the Select button.

  8. Select the data resource Articles Content.

  9. Select the following node:

    Articles Content > items (array with 25 items)

  10. Click Connect.

  11. Inside the Loop component, add the Card component.

  12. On the Card component, map the following parameters:

    NameMapping
    Content > TitleArticles Content items Loop item > fields > title
    Content > ImageArticles Content items Loop item > fields > thumbnail > fields > file > url
    Description > DescriptionArticles Content items Loop item > fields > description
    Description > Line Count Restriction6
    CTA > Button link > Select link > URL > [click connection icon] > Insert dynamic tokenArticles Content items Loop item > fields > slug
    CTA > Button CopyRead More
  13. Click Publish.

  14. On the published site, navigate to the articles page.

summary

You'll see that by configuring the data resource connections for that single card component, you have a full array of article pages that are dynamically rendered.