Skip to main content

Components

A component is the basic building block of Uniform's composition capabilities. You create and manage components using Uniform Canvas.

Create a component​

  1. In Uniform, open your project.

  2. Navigate to the Canvas tab.

  3. In the left menu, click Component Library.

  4. Click the red (+) button.

  5. Enter the following values:

    FieldDescription
    Component NameName that describes the component or its purpose.
    Public IDName that uniquely identifies the component. This value is available to developers.
    Component IconIcon that is displayed next to the component within Uniform. This helps users immediately identify components.
    Title Parameter

    When Uniform shows users a visual representation of a composition, it shows the slots in the composition and the components in each slot. This setting identifies a parameter whose value is displayed along with the name of the component.

    This is useful when a slot has a number of components of the same type. This screenshot shows a component named "Landing Page" with a slot named "Events". Within that slot are 3 "Event" components. The title property value for each event component is displayed next to the component name.

    components-with-title-parameter-values
    Composition componentIf this is ticked, the component can be used to create a composition.

  6. Click Save.

    About this step

    The Save and close button is a dropdown. In the dropdown options you will find the Save button.

Compositions​

A composition represents some sort of digital experience. If you think of a component as a model or blueprint to build something specific, a composition is that "something specific".

Create a composition​

  1. In Canvas, in the left menu, click Compositions.

  2. Click the red (+) button.

  3. Click the composition type.

    About this step

    The composition types that are listed at the components from the component library that are marked as "composition components".

  4. Enter a name for the composition.

    About this step

    The name is just a label for the composition. It does not how the composition is used in any way (e.g. if the composition represents a web page, the composition name does not become the URL for the web page).

  5. Click Create.

  6. Enter a value for the field Slug.

    About this step

    The slug is a value that can be used in your application to retrieve the composition. When a composition represents a page in a web site, it is common for the slug to match the URI for the page so the front-end application. This allows the front-end application to use the current URL to determine which composition it needs without having to hard-code the value.

  7. Click Save.

    About this step

    The composition will not be available to a front-end application until the composition is published. In addition, before any changes to the composition are available to the front-end application, the composition must be re-published.

Delete a composition​

  1. In Canvas, in the left menu, click Compositions.
  2. Find the composition you want to delete and click ... > Delete.

Parameters​

A parameter lets you set a value on a component. Each parameter has a type. The parameter type determines the kind of value you can set for the parameter.

Add a parameter​

  1. In the Component Library, select your component.

  2. Click the tab Parameters.

    no-parameters

  3. Click the red (+) button.

  4. Enter the following values:

    FieldDescription
    Parameter NameName that describes the parameter or its purpose.
    Public IDName that uniquely identifies the parameter. This value is available to developers.
    Help Text

    A user is responsible for setting a value on the parameter. This text appears below the user-interface available for setting the parameter value.

    help-text
    The user interface for setting the value on a text parameter with help text set to "Enter a short description of the event."
    TypeDetermines the type of user interface presented to the user for setting the parameter value. Based on the type you select, additional settings may be displayed. For details on the default parameter types, see the parameter type reference.

  5. Click OK to save your changes.

  6. Click Save to save the changes to the component.

Delete a parameter​

  1. In the Component Library, select your component.

  2. Click the tab Parameters.

    one-parameter

  3. Click ... > Delete.

  4. Click Save to save the changes to the component.

    About this step

    If the deleted parameter was used in any composition, when you
    select the component in a composition you will see a warning
    about "orphan parameter data". This tells you that Uniform is storing a value for a parameter that is not defined in the component. You must remove this value before you are able to save any changes to the composition.

    Click Remove orphan parameter data to remove this value from the composition.

    remove-orphan-parameter-data

Slots​

A slot lets you associate components with another component.

Add a slot​

  1. In the Component Library, select your component.

  2. Click the tab Slots.

    no-slots

  3. Click the red (+) button.

  4. Enter the following values:

    FieldDescription
    Slot NameName that describes the slot or its purpose.
    Public IDName that uniquely identifies the slot. This value is available to developers.
    MinimumThe minimum number of components that must be added to the slot before a composition with the slot can be saved. If no number is specified, the slot can be empty.
    MaximumThe maximum number of components that can be added to the slot in order for a composition with the slot can be saved. If no number is specified, an unlimited number of components can be added to the slot.
    Allowed Components
    • Specify allowed components: Only the selected components can be added to the slot. At least one component type must be selected.
    • Inherit allowed components from parent slot: The components that can be added to the slot depend on the components allowed in the slot the component with the slot is in.

  5. Click OK to save the new slot.

  6. Click Save to save the changes to the component.

Remove a slot​

  1. In the Component Library, select your component.

  2. Click the tab Slots.

    one-slot

  3. Click ... > Delete.

  4. Click Save to save the changes to the component.

    About this step

    If the deleted slot was used in any composition, when you select the component in a composition you will see a warning about "orphan slot data". This tells you that Uniform is storing a value for a slot that is not defined in the component. You must remove this value before you are able to save any changes to the composition.

    Click Remove orphan slot data to remove this value from the composition.

    remove-orphan-slot-data

Variants​

A variant lets you associate components with another component.

Add a variant​

  1. In the Component Library, select your component.

  2. Click the tab Variants.

    no-variants

  3. Click the red (+) button.

  4. Enter the following values:

    FieldDescription
    Variant NameName that describes the variant or its purpose.
    Public IDName that uniquely identifies variant slot. This value is available to developers.

  5. Click Save to save the new variant.

  6. Click Save to save the changes to the component.

Remove a variant​

  1. In the Component Library, select your component.

  2. Click the tab Variants.

    one-variant

  3. Click ... > Delete.

  4. Click Save to save the changes to the component.

    About this step

    If the deleted variant was used in any composition, when you open
    the component you will see an error message next to component
    that uses the variant. This tells you that Uniform is storing a value for a variant that is not defined in the component. You must remove this value before you are able to save any changes to the composition.

    You must select the component and change the variant to Default.

    variant-does-not-exist