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:

Goals

  1. Build a dynamic article page that can display data from any article without an author having to manually a separate page for each and every article.
  2. Configure a data type that will provide data to the dynamic article page.
  3. Test the dynamic article 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:
    FieldValue
    NameArticle
    Path Segment TypeDynamic
    Path Segmentarticle
  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:
    FieldValue
    Composition NameArticle
  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:
  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:
  12. Click Save.

    About this step

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

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

  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:

    NameValue
    Display VariantImage Left
    Title StyleH2
  4. On the Hero component, map the following parameters:

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

  6. Click Publish.

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