Operationalize external data

While Uniform Mesh lets you configure your project to access multiple external data sources, making these connections each time you create a composition can be a burden for authors.

Enable your authoring teams to stay focused on creating compelling experiences, by defining a pattern that's then referenced by other compositions to keep those data resource connections consistent and ready for your content authors.

During this lesson you will:

Goals

  1. Configure a pattern and add data resources.
  2. Learn how to use overrides for letting editors make changes.
  3. Update a composition with the pattern.
  1. In Uniform, navigate to Experience > Components.

  2. Open the component Hero.

  3. Click Patterns.

    hero-with-no-patterns
    The screen where you can create a pattern.
  4. Click Add pattern.

  5. Enter the following value for the name:

    Hero - Contentful Article
  6. Set the following parameter values:

    Parameter nameValue
    Display VariantBackground Image
    Presentation settings > Text color variantDark
  7. Click Save.

  1. In the side rail click the data resources icon, or in the upper right-hand corner next to the publish button, click ••• > Manage data resources.

  2. Click Add a data resource.

  3. For the field Data Type, select Single Article.

  4. From the list of articles, select the article THE GOLDEN RATIO of COFFEE.

    About this step

    When you added a data resource to the composition, you were selecting the article to connect a specific article to the composition. In this example, you are adding a data resource to the pattern. This allows you to see real content when you map the fields from the article to the parameters on the component, but when an editor goes to use the pattern, they're able to select any article they want.

  5. For the field Name, enter the following value:

    Single Article Content
  6. Expand Advanced Options.

  7. Set the following values:

    FieldValueDescription
    OverridableTrueThis allows the editor to select whichever article they want when the pattern is added to a slot.
    Use as defaultFalseThis prevents the article selected in the data resource configuration (such as THE GOLDEN RATIO of COFFEE) from being automatically selected by default when the pattern is added to a slot.
  8. Click Save.

    single-article-content-data-resource
    The data resource has been connected to the pattern.
  9. Click > to close the data resources drawer.

  1. In the right column, find the parameter Title and click the icon to the right of the parameter field. Select Insert dynamic token.

  2. Select the data to map to from your CMS.

    Golden Ratio article > fields > title.

    map-title-parameter-contentful
    Selecting the title in the data resource.
  3. Click Connect.

  4. Repeat these steps to connect the following parameters:

    Parameter nameData resource value path
    DescriptionGolden Ratio article > fields > description
    ImageGolden Ratio article > fields > thumbnail > fields > file > url
  5. Click Save.

    pattern-saved
    The pattern with data connections.
  1. Click Overrides.

    default-override-settings
    Overrides are located in the right panel.
  2. In the section Variant Override allow overrides.

  3. In the section Parameter Overrides, turn on the following parameters:

    Parameter nameEnabled?
    Eyebrow textTrue
    TitleFalse
    Title StyleTrue
    DescriptionFalse
    ImageFalse
    Primary Button CopyTrue
    Primary Button LinkTrue
    Primary Button StyleTrue
    Primary Button Animation TypeFalse
    Secondary Button CopyTrue
    Secondary Button LinkTrue
    Secondary Button StyleTrue
    Secondary Button Animation TypeFalse
    Object FitFalse
    Overlay ColorFalse
    Overlay OpacityFalse
    Full HeightFalse
    Text Color VariantFalse
    Container VariantFalse
    Background TypeFalse
    Padding TopFalse
    Padding BottomFalse
    Margin BottomFalse
    Margin TopFalse
    Animation TypeFalse
    DurationFalse
    DelayFalse
    Animation OrderFalse
    Animation PreviewFalse

    About this step

    These parameters aren't mapped to the data resource. You must enable overrides in order for the editor to be able to set these values.

  4. Click Publish....

  5. Click Publish.

  6. In the upper left-hand corner, click < to return to the Hero component settings.

  1. In Uniform, open the project map.

  2. Navigate to Home > Articles > The Golden Ratio of Coffee.

  3. In the left column, select the Hero component.

    hero-component-selected
    The hero component has been selected in Canvas.
  4. In the left column, click ••• on the hero component.

    click-dots
    The component edit menu has been opened.
  5. In the left column, click Remove.

    delete-hero-component
    The confirmation message for removing a component.
  6. Click Delete.

    add-component-to-slot
    The component is no longer present in the left sidebar.
  7. Above the component Breadcrumb, add a new component.

    select-pattern
    Selecting the new component with a pattern.
  8. Click the hero pattern you just added.

    pattern-added
    The component with pattern data is part of the composition.
  9. In the right column, in the section Pattern Data, click Select.

  10. Click THE GOLDEN RATIO of COFFEE.

    pattern-data-selected
    The specified article is selected.
  11. Click Save.

    pattern-data-saved
    The parameters that were mapped to the data resource in the pattern are now populated using the article that was selected.
  12. Publish the composition.