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.

Add dynamic page#

  1. In Uniform, navigate to Experience > 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. On the new node, click > Edit.
  4. Enter the following values:
    FieldValue
    NameArticle
    Path segmentarticle
    Path segment typeDynamic
    Default dynamic segment preview valuethe-right-bean-for-pour-over-coffee-makers
    Attached compositionExisting
    CompositionThe Golden Ratio of Coffee (copy)page
  5. Click Save.
  6. In the project map, navigate to the node Home > Articles > Article.
  7. Open the composition by clicking on the name of the node.
  8. Change the following values on the composition:
    FieldValue
    Composition NameArticle
  1. In the side rail, click .
  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.
  5. Enter the following values:
    FieldValue
    Data SourceContentful > Contentful
    ArchetypeEntries by Field
    Filter by content typeArticle
    Field to searchSlug
    NameArticle by Slug
    Public IDarticleBySlug
    FieldValue
    Data SourceContentstack > Contentstack
    ArchetypeEntries by Field
    Allowed Content TypeArticle
    Field to searchSlug
    NameArticle by Slug
    Public IDarticleBySlug
  6. Click Save.
  7. Under the field Article by slug settings, click the chip icon to insert a variable.
  8. Select article.
  9. Click Save.
  10. In the upper right-hand corner of the data resources drawer, click to close the drawer.
  11. At the top left of the canvas editor, click on the purple variable field showing the slug path (* the-right-...)
  12. In the field article, verify the presence of the following value:
    the-right-bean-for-pour-over-coffee-makers
  13. Click OK.

    About this step

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

Page component#

  1. Select the Page component.
  2. For the following parameters, clear any existing value and insert the specified dynamic token:
    Parameter nameExternal field
    Page TitleArticle by slug Content > items > 1 > fields > title
    Parameter nameExternal field
    Page TitleArticle by slug Content > entries > 1 > title
  3. Click Connect.
  1. Replace the existing Hero component with a new component using the component type Hero.

    About this step

    You have to do this because the current 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.

  2. Add the Hero component, set the following parameters:
    Parameter nameValue
    Display VariantImage Left
    Title StyleH2
  3. On the Hero component, map the following parameters:
    Parameter nameExternal field
    TitleArticle by slug Content > items > 1 > fields > title
    DescriptionArticle by slug Content > items > 1 > fields > description
    ImageArticle by slug Content > items > 1 > fields > thumbnail > fields > file > url

    If you get an error message about the value not being a valid image URL, click in the URL field before the purple text and enter https:. After you do this, the image should appear properly.

    Parameter nameExternal field
    TitleArticle by slug Content > entries > 1 > title
    DescriptionArticle by slug Content > entries > 1 > description
    ImageArticle by slug Content > entries > 1 > thumbnail > url

Content component#

  1. Select the Content component.
  2. For the following parameters, clear any existing value and insert the specified dynamic token:
    Parameter nameExternal field
    TextArticle by slug Content > items > 1 > fields > content > 1 > content > 1 > value
    Parameter nameExternal field
    ContentArticle by slug Content > entries > 1 > content
  3. Click Connect.

A new composition is not available to visitors until it is published.

  1. Click Publish... to publish the composition.
  2. In a new browser tab, open http://localhost:3000/articles/the-right-bean-for-pour-over-coffee-makers
Last modified
Next
Core concepts