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.

  1. In the Uniform dashboard, navigate to Canvas > Component Library.

  2. Click the red (+) button.

  3. Enter the following values:

    • Component Name: Default Body
    • Component Icon: menu-boxed
  4. 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
    • Type: Text
    • Required: ticked
    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.

  8. Click Save and close.

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.

  1. Click the red (+) button.

  2. Enter the following values:

    • Component Name: Default Page
    • Component Icon: file-document
    • Composition Component: ticked
    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.

    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 the configuration set by the business user.

  4. Click the red (+) button.

  5. Enter the following values:

    • Slot Name: body
    • Minimum: 1
    • Maximum: 1
    • Allowed Components: Default Body
  6. Click OK.

  7. Click Save and close.

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 type: Default Page
    • Name: Home Page
  4. Click Create.

  5. For the Slug, enter /

    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.

  6. Click the red (+) button.

  7. Click Default Body.

  8. Enter the following values:

    • Content ID: home
  9. The Save button also acts as a drop-down. Click the icon to activate the dropdown.

  10. Click Save > Save and publish.

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