Skip to main content

Define layout

Goals

Uniform enables you to define the layout for a digital experience (like a web page, email message or screen in a mobile app), using a no-code tool. This involves the following:

  • Understand basic Uniform terminology related to layout management.
  • Define components that represent the layout.
  • Create a composition that lets you specify the components that make up a web page.

Overview

Business users configure Uniform personalization using a no-code tool called Uniform Canvas. Canvas enables business users to work with components, which represent anything that is displayed by the front-end. When configuring personalization, business users specify which components to use and the conditions under which those components are used.

What is Uniform Canvas?

Uniform Canvas lets business users control layout without having to get into front-end design. You can think of Canvas as "layout as a service". The business user can control which components are used and what content is available to those components, but leaves the responsibility for how those components are built in the hands of the front-end developer.

Define components

With Uniform, personalization involves using the dimensions Uniform has collected about the visitor and determining the appropriate components to use when rendering the front-end.

Components must be defined in Canvas before personalization instructions can be assigned to them.

info

The components you create in Canvas are the components in your application. What you create in Canvas is just a representation of the application components that business users can interact with. As you will see later, the name of the Canvas component gets mapped to the implementation of the component that is built by a front-end developer.

tip

You only need to create components in Canvas for components you want business users to be able to control. In this tutorial, there is nothing in the navigation or footer components for the business user to control, so you do not need to create components for them in Canvas.

Default Body

The default body component represents most of the content that is displayed on the page. It includes everything in the main tag.

A business user will be able to personalize this component by specifying different content depending on whether the visitor has viewed the Architecture page.

component-default-body
  1. In your Uniform project, navigate to Canvas > Component Library.

    component-library-empty
  2. Click the red (+) button.

  3. Enter the following values:

    Component Name
    Default Body
    Public ID
    defaultBody
    Component Icon
    menu-boxed
    add-default-body-component
  4. Click Parameters.

    click-parameters
    info

    Parameters allow business users to set values that are passed to the component. They give the user the ability to control the component, but within the limits specified by the parameter settings.

  5. Click the red (+) button.

  6. Enter the following values:

    Parameter Name
    Content ID
    Public ID
    contentId
    TypeText
    RequiredYes
    add-parameter
    info

    When a business user adds this component to a composition, they will be required to set a value for this parameter.

  7. Click OK.

    content-id-parameter-added
  8. Click Save and close.

    default-body-component-added

Default Page

The default page component is a composition component. This component represents a page on the site that a business user can add a Default Body component to.

component-default-page
  1. Click the red (+) button.

  2. Enter the following values:

    Component Name
    Default Page
    Public ID
    defaultPage
    Component Icon
    file-document
    Composition ComponentYes
    add-default-page-component
    info

    This component is marked a composition component because you want a business user to be able to create a composition based on it.

  3. Click Slots.

    click-slots
    info

    Adding a slot will enable the business user to configure personalization. A slot is like a variable spot on a page. Uniform determines which components to inject into the slot based on a combination of the configuration set by the business user and what is known about the visitor.

  4. Click the red (+) button.

  5. Enter the following values:

    Slot Name
    body
    Public ID
    body
    Minimum
    1
    Maximum
    1
    Allowed ComponentsDefault Body, Personalization
    add-body-slot
  6. Click OK.

    body-slot-added
  7. Click Save and close.

    default-page-component-added

Create composition

Now you need to create a composition that represents the home page.

  1. Click Compositions.

  2. Click the red (+) button.

  3. Enter the following values:

    Select a composition typeDefault Page
    Name
    Home Page
    add-composition-02
  4. Click Create.

    add-composition-03
  5. For the Slug, enter /

    add-composition-04
    info

    The slug is the value the front-end logic will use to retrieve the details about the composition. Don't be confused by the value being /. The value could just as easily have been "home" or "home page". As long as the front-end logic uses the same value, the slug can be whatever you want.

    danger

    Ensure that there are no other published compositions with the same slug. There may have been one created with the slug "/" when you created your account.

  6. Click the green (+) button.

    add-composition-05
  7. Click Default Body.

    add-composition-06
  8. Enter the following values:

    Content ID
    home
    add-composition-07
  9. Click Save.

  10. Click < Compositions in the upper left-hand corner.

    add-composition-08