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:

Goals

  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. Locate the Page component in the component library.

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

  4. Enter the following values:

    FieldValue
    Component NameArticle Page
    Public IDarticlePage [This will be auto generated]
  5. Click Slots.

  6. Click the slot Page Content.

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

  8. Under Allowed Components select only the following components:

    Component name
    Breadcrumbs
    Call to Action
    Card Block
    Container
    Content
    Featured Callout
    Grid
    Hero
    Image
    Rich Text
    Video Player
    A/B Test
    Localization
    Loop
    Personalization
  9. Click OK.

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

  1. Click Composition Settings.
  2. Click + Edit Defaults.
  3. In the slot ARTICLE CONTENT, remove any existing components. Then, add the following components:
    Component type
    Hero
    Content
  4. Select the hero component to open the editing panel. Update the following values:
    FieldValue
    TitleArticle Title
    Title StyleH2
    DescriptionArticle abstract
    Imagehttps://res.cloudinary.com/uniformdev/image/upload/v1685477686/JavaDrip/Flavor_Ratios.jpg
  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:

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

    article-page-composition-complete
    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.

  4. Add "A History of Coffee" in the required Page title field.

  5. Click Save or Publish.