Zephr User Guide

Use a Component Library Template

14 views 0

To use a component library template in an outcome, complete the following steps:

  1. Navigate to the outcome in which you want to use a component library template, in either of the following ways:
    • Select the outcome in your feature for which you want to display the component library template, as described in the Edit an Outcome topic
    • Add a new outcome as described in the Add an Outcome topic
  2. Select the Add From Component Library button

    The Select a Template dialog box displays, as follows:

    • If you have not defined any component library templates, as illustrated below:

      Select a Template - no templates

      For further information on defining component library templates, see the Add a Component topic.

    • If you have defined component library templates, as illustrated below:

      Select a Template - with templates

  3. Select the template you want to use

    The Select Template button displays when you hover over the template, as illustrated below:

    Select Template

    The Set Your Content dialog box displays. The fields in this dialog box are populated from the variables you set in the template. For further information on defining the variables, see the Add a Component topic.

    For example, for the template selected above, the Set Your Content dialog box displays as illustrated below:

    Set Your Content

  4. Enter the values you want to display for each variable
  5. If you specified a button, you can change the background colour as follows:
    1. Select the button colour swatch

      The colour selector displays, as illustrated below:

      Button Colour

    2. Select the colour to apply to the button background

      You can select a colour in any combination of the following:

      • Select an area in the colour box
      • Select the eyedropper icon to choose a colour used anywhere in your screen
      • Select the colour from the colour bar
      • Enter the red, blue and green colour values in the R, G and B text boxes
      • Select the arrows beside the RGB text boxes to use hue, saturation and lightness colour values. Enter the values in the H, S and L text boxes
      • Select the arrows beside the HSL text boxes to use a hex colour value. Enter the hex value in the text box
  6. Select the Save button to confirm the selection and return to the Add an Outcome screen. Selecting the Cancel button displays the Add an Outcome screen without saving the component