Add a Component

To add a component, complete the following steps:

1. Select Delivery from the main menu
2. Select Component Library from the menu options

   The Component Library screen displays, as illustrated below:

   

   You can view the components that are used in your site as a grid or a list.

   By default, your components are displayed using the Grid View. This displays a list of visual examples that provide a guide to the layout of each component, as illustrated below:

   

   Select List View to display a list of your components, as illustrated below:

   

3. Select the Add A Component Template button, and then click the + Add button under Component Template

   The Add a Template screen displays, as illustrated below:

   

4. Enter a name for the template in the Title text box
5. Optionally, add a description of the template in the Description (Optional) text box
6. Upload an image of your component, which can help you to visually identify the component to use in your feature outcome

   To upload the image, you can do either of the following:

   • Drag and drop the file into the Drop file here to upload field
   • Select the Select a File To Upload button, navigate to your file and select it, then select Open
7. Enter the address at which the component is hosted in the URL text box
8. Select the Add A Variable button

   The Add a Variable dialog box displays, as illustrated below:

   

   To add a variable, complete the following steps:

   1. Enter a name for the variable in the Label text box
   2. Optionally, enter a description of the variable in the Description (Optional) text box
   3. Select the type of content represented by the variable from the Type radio buttons. The options are as follows:
      • Text

        Select this to replace the variable with text, which can be entered in a text box in your outcome

      • Textarea

        Select this to replace the variable with a larger amount of text, which can be entered in a text box in your outcome

      • HTML

        Select this to replace the variable with a UI component that is defined using HTML

        Note: Ensure that the supplied HTML is unescaped using triple braces. For example {{{html content}}}.

      • Color

        Select this to replace the variable with a colour, which can be selected in your outcome

      • Boolean

        Select this to replace the variable with a true/false decision, for example to turn sections of the template on or off

        For example, if you have defined the show-more variable as a Boolean, the following component allows you define how to display more information:

                            Always shown
                            {{#show-more}}
                            Show if true!
                            {{/show-more}}
                            

   4. Select the Save button to save your updates and return to the Add a Template screen. Selecting the Cancel button displays the Add a Template screen without saving any changes

   Note: You can also preset variables directly in the template component, as described in the User Variables in Component Templates section.

9. Select the Save button to add the template and return to the Component Library screen. Selecting the Cancel button displays the Component Library screen without adding a template

You can view the base-form of the component in a browser by navigating to the URL at which the component is hosted. The base form comprises the mustache variables used in the component, which are used to define what is included in the component. You defined these in step 8 above.

A mustache compiler ensures that the variables can be set in your feature. This means that a single component template can be used in multiple outcomes in your feature rules, as you define the values assigned to the variables when adding an outcome from your component library.

For further information on adding an outcome from your component library, see the Component Library Templates topic.

For further information on the syntax used, refer to the mustache specification.