Create a composition component

For this exercise you will extend how Uniform can reuse a page component from your front end. During the lesson you will:


  1. Register a new composition component in the Uniform component library.
  2. Update your the component source is to reuse an existing component with Uniform.
  3. Define a new slot name for the component in the component library.
  4. Configure the slot in Uniform (allowed components).
  5. Add a component to the new slot.
  1. In Uniform, navigate to Experience > Components.
  2. Select the component Page.
  3. Click > Duplicate.
  4. Enter the following values:
    Component NameArticle Page
    Public IDarticlePage
  5. Click Slots.
  6. Click the slot Page Content.
  7. Change the name of the slot to Article Content.

    About this step

    This change makes it easier for the editor to build the composition by showing a more descriptive name in Canvas.

    When you change the slot name, the public ID value won't change. This is intentional. The front-end application is already configured to handle a slot named pageContent so no code changes are required.

  8. Under Allowed Components select only the following components:
    Component name
    Call to Action
    Card Block
    Featured Callout
    Rich Text
    Video Player
    A/B Test
  9. Click OK.
  10. On the button Save and close, click and then Save.
  1. Click Composition Settings.
  2. Click + Edit Defaults.
  3. In the slot ARTICLE CONTENT, remove any existing components.
  4. Add the following components:
    Component type
  5. Select the Hero component.
  6. Enter the following values:
    Display VariantBackground Image
    TitleArticle Title
    Title StyleH2
    DescriptionArticle abstract
  7. For the parameter Image, click Edit.
  8. Click Add New.
  9. Click Uniform Asset Library > Custom.
  10. For the field URL, enter the following value:
  11. Click Done.
  12. Select the Content component.
  13. Enter the following values:
    TextArticle Body
  14. Click Accept and close.
  15. Click Save and close on the component.

Now you can add a new composition using the composition component you created.

  1. Navigate to Experience > Project Map.

  2. In the row for the node Articles, click > Add child node.

  3. Enter the following values:

    NameA History of Coffee
    Path SegmentStatic
    Node typeComposition
    CompositionArticle Page
  4. Click Save & open Canvas.

    The newly created composition open for editing in Canvas.

    About this step

    Notice that the slot ARTICLE CONTENT is pre-populated with the components you added to the composition defaults.

    You will also notice that when you go to add a new component to the slot, the options are limited to the component types you assigned earlier.

  5. Enter the following values:

    Page titleA History of Coffee
  6. Click Publish.