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 Content > Components.

  2. Duplicate the component Page by clicking the ••• and selecting "Duplicate."

  3. Enter the following values:

    Component NameArticle Page
    Public IDarticlePage
  4. Click Slots.

  5. Click the slot Page Content.

  6. Click on the slot name to open the editing window. 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.

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

  7. Select only the following components:

    Component name
    Call to Action
    Card Block
    Featured Callout
    Rich Text
    Video Player
    A/B Test
  8. Click OK.

  9. Click the arrow on the "Save and close" button and select Save.

  1. Click Composition Defaults.
  2. Click + Edit Defaults.
  3. In the slot ARTICLE CONTENT, add the following components:
    Component type
  4. Select the hero component to open the editing panel. Update the following values:
    TitleArticle Title
    DescriptionArticle abstract
    Title StyleH2
  5. Select the content component to open the editing panel. Enter "Article Body" in the Text field.
  6. Click Accept and close.
  7. Click Save and close on the component.

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

  1. In Uniform, navigate to the project map.

  2. Add a new child node under the Articles node:

    NameA History of Coffee
    Path SegmentStatic
    Node typeComposition
    CompositionArticle Page
  3. 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.