Uniform 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 Content > Components tab menu.

3. Click the Add Component button.

4. Enter the following values:

   Field	Description
   Component name	Name that describes the component or its purpose.
   Public ID	Name that uniquely identifies the component. This value is available to developers.
   Component icon	Icon that's 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. 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.
   Composition component	If this is ticked, the component can be used to create a composition.

5. Click Save and close.

   About this step

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

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 your project, navigate to Content > Components and select your component.

2. Click the tab Parameters.

   

3. Click the Add parameter button.

4. Enter the following values:

   Field	Description
   Parameter name	Name that describes the parameter or its purpose.
   Public ID	Name 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. The user interface for setting the value on a text parameter with help text set to 'Enter a short description of the event.' The help text in context of a composition.
   Type	Determines 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 your project, navigate to Content > Components and select your component.

2. Click the tab Parameters.

   

3. Click ••• > Delete.

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

Slots#

A slot lets you associate components with another component.

Add a slot#

1. In your project, navigate to Content > Components and select your component.
2. Click the tab Slots.

1. Click the Add slot button.

2. Enter the following values:

   Field	Description
   Slot name	Name that describes the slot or its purpose.
   Public ID	Name that uniquely identifies the slot. This value is available to developers.
   Minimum	The 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.
   Maximum	The 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	All components and patterns: All components (and patterns derived from those components) can be added to the slot. Same as 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. Specify allowed components: Choose specific components and, optionally, which patterns to allow in the slot. You must select at least one component or pattern.

3. Click OK to save the new slot.

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

Remove a slot#

1. In your project, navigate to Content > Components and select your component.

2. Click the tab Slots.

   

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's 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.

Variants#

A variant lets you associate components with another component.

Add a variant#

1. In your project, navigate to Content > Components and select your component.

2. Click the tab Variants.

   

3. Click the Add variant button.

4. Enter the following values:

   Field	Description
   Variant name	Name that describes the variant or its purpose.
   Public ID	Name 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 your project, navigate to Content > Components and select your component.

2. Click the tab Variants.

   

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's 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.