Define a new composition

Uniform's Canvas and project map provide visual assembly of content and components, making it easy to re-use of your front-end components, design system, and style guide. The Canvas UI can guide a business and content team to create rich digital experiences (such as web pages) based upon assets you have created without relying on developers for routine tasks.

For this exercise you will configure your project to add a "JavaDrip articles" section to your site. During the lesson you will:

Goals

  1. Add a node for articles in the project map.
  2. Define a new composition that represents an article.
  3. Add new components to the composition.

The project map makes it easier for people to find compositions within the Uniform dashboard. You will add nodes that represent the composition you are creating.

  1. In Uniform, navigate to the Project Map.

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

    FieldValue
    NameArticles
    Path segmentStatic [no changes necessary]
    Node typePlaceholder
    articles-node
  3. Add a new child node under the Articles node:

    FieldValue
    NameThe Golden Ratio of Coffee
    Path segmentStatic [no changes necessary]
    Node typeComposition
    CompositionPage
  4. Click Save & open Canvas.

    save-and-open-canvas
    Your new composition on opening Canvas
  5. Enter "The Golden Ration of Coffee" in Canvas. This is a required field.

    enter-page-title
    The page title parameter field

Now that you have your composition created, you will update the component in the slot defined on the composition. This component represents a hero, a component that typically appears above-the-fold on a website.

  1. In the slot PAGE CONTENT, select the Hero component.

  2. Set the following parameter values:

    NameValue
    TitleThe Golden Ratio of Coffee
    Display VariantImage Right
  3. For the parameter Description, set the following value:

  4. For the parameter Image, set the following value:

  5. Select the breadcrumb component and select the following items in the parameter panel. Set the following parameters to:

    • Display Root Node [true]
    • Display Placeholder Notes [true]
    • Separator [Chevron]

Now you will add another component to the composition's slot. This component represents a block of text.

  1. Under the Breadcrumb component, add a new Content component.
  2. For the parameter Text, set the following value:

Finally, you will publish the composition so visitors can access it.

note

Notice that no code changes were required to create a new composition and to control its layout.

  1. Publish the composition.
  2. In a new browser tab, open http://localhost:3000/articles/the-golden-ratio-of-coffee
    defined-composition
    The new, completed composition.