Dynamic pages from external data

In a site of any significant size, especially sites that are data-driven, you won't want to create a composition for each possible page. Uniform enables you to create dynamic pages that act as templates for how to display data from an external source without requiring you to create individual compositions.

For this exercise we will configure a dynamic page in our project that acts as a catch-all for any article that exists in the CMS. During the lesson you will:

Add dynamic page#

1. In Uniform, navigate to the Project Map.
2. Duplicate the node Home > Articles > A History of Coffee.

   About this step

   A new node is created with the a path segment /the-golden-ratio-of-coffee-copy1.

3. Change the following values on the new node:

   Field	Value
   Name	Article
   Path Segment Type	Dynamic
   Path Segment	article

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

   Field	Value
   Composition Name	Article

Connect data resource#

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 Article by slug settings, click the button to insert variable.
8. Select article.
9. Click Save.
10. In the field Attached To, click * article.
11. In the field article, enter the following value:
    CopyCopied!Wrap
12. Click Save.

    About this step

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

Configure components#

1. On the page component, map the following parameters:

   Select a tabContentful

2. Replace the existing Hero component with a new component using the component type Hero.

   About this step

   You have to do this because the original Hero component is based on a pattern, which provides instructions for how the different parameters on the Hero are populated. You want to populate those parameters yourself, so you need to remove the Hero component based on a pattern and replace it with the plain Hero component.

3. Add the Hero component, set the following parameters:

   Name	Value
   Display Variant	Image Left
   Title Style	H2

4. On the Hero component, map the following parameters:

   Select a tabContentful

5. On the Content component, map the following parameters:

   Select a tabContentful

6. Click Publish.

7. On the published site, navigate to the article The right bean for pour-over coffee makers.