Zephr User Guide

Add a Component

23 views 0

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:

    Component Library

    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:

    Grid View

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

    List View

  3. Select the Add A Component Template button

    The Add a Template screen displays, as illustrated below:

    Add a Template

  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:

    Add a Variable

    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

      • Color

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

    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 topic.

  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.