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.
- Build a dynamic article list page that can display data from all articles, along with a link to the corresponding article detail page.
- Use the Loop component to handle multiple records.
- Test the dynamic article list page.
Create an articles page#
- In Uniform, navigate to the Project Map.
- Edit the node Home > Articles.
- Set the following values:
Name Value Node type Composition Composition option Create new Composition type Page
- Click Save.
- In the project map, navigate to the node Home > Articles.
- Open the composition.
Connect data resources#
Open the data resources for the composition.
Click the button Add data resource.
Click the add link in the upper left of the drawer.Link to add a new data resource.
Select your data source. For example, Contentful. Enter the following values:
Field Value Data Source Contentful > Contentful Archetype Single Entry Allowed Content Types Content Block Name Content Block Public ID
Under the field Content Block settings > Select entry, select Articles for all your brewing needs.
Add another data resource using the following settings:
Field Value Data Source Contentful > Contentful Archetype Query Allowed Content Types Article Name Articles Public ID articles
Under the field Articles settings, enter the following values:
Field Value Entry count limit 25 Sort CreatedAt Sort Order Descending
About this step
This entry is only used so the components displayed within Canvas have a value during the authoring process.
Configure the page#
On the Hero component, set the following parameters by clicking the connection icon or removing existing data:
Name Mapping Eyebrow text Title Content Block Content > fields > title Title Style H2 Description
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:
On the Breadcrumbs component, set the following parameters:
Name Value Display Root Node ticked Display Placeholder Nodes ticked Separator Chevron
Under the Breadcrumbs component, add the Grid component.
On the Grid component, set the following parameters:
Name Mapping Columns Count 3 Gap X Small
Inside the Grid component there is a slot named Grid Inner. Add the Loop component to this slot.
In Settings > Loop items > Select a source click the Select button.
Select the data resource Articles Content.
Select the following node:
Articles Content > items (array with 25 items)
Inside the Loop component, add the Card component.
On the Card component, map the following parameters:
Name Mapping Content > Title Articles Content items Loop item > fields > title Content > Image Articles Content items Loop item > fields > thumbnail > fields > file > url Description > Description Articles Content items Loop item > fields > description Description > Line Count Restriction 6 CTA > Button link > Select link > URL > [click connection icon] > Insert dynamic token Articles Content items Loop item > fields > slug CTA > Button Copy Read More
On the published site, navigate to the articles page.
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.