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 you will configure a dynamic page in your 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 > The Golden Ratio 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 by clicking on ••• and selecting Edit:
    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 by clicking on the name of the node.
  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 Add a data resource.

  4. Click add above the drop down of data types to create a new one.

    add-new-data-type
    Add a new data type from Canvas.
  5. Enter the following values:

    FieldValue
    Data SourceContentful > Contentful
    ArchetypeEntries by Field
    Filter by content typeArticle
    Field to searchSlug
    NameArticle by Slug
    Public IDarticleBySlug
  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 Attached To the field showing the slug path, click * article.

    select-dynamic-slug
    Select the dynamic portion of the path to set a value for testing.
  11. In the field article, enter the following value:

    the-right-bean-for-pour-over-coffee-makers
  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 parameter:

    NameMapping
    Page TitleArticle by slug Content > items > 1 > fields > title
  2. Click Connect.

  3. 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.

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

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

    NameMapping
    TitleArticle by slug Content > items > 1 > fields > title
    DescriptionArticle by slug Content > items > 1 > fields > description
    ImageArticle by slug Content > items > 1 > fields > file > url
  6. On the Content component, map the following parameters:

    NameMapping
    ContentArticle by slug Content > items > 1 > fields > content
  7. Click Publish.

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