Initializing help system before first use

Adding Formatted Lists

As previously mentioned, expressions can be used to provide dynamic text content.
You can use the List and List Item elements to apply additional formatting when returning appropriate data, such as an array or set of values.
To display a bulleted list of all scenarios on the shelf:
  1. In the Palette > HTML group, click and drag a List element onto the artboard and drop it on to the SCENARIO COMPARISON Column.
  2. In the Palette > HTML group, click and drag a List Item element onto the artboard and drop it on to the List element.
    • In the Attributes pane, set the Logic > Repeat attribute to =s, scenarioIndex in scenarios.
    For more on when to use vdl-repeat and vdl-repeat-contents, see the later section Using Loops with Arrays and Sets.
  3. In the Palette > Components group, click and drag a Text element onto the artboard and drop it on to the List Item element. The Text wizard is displayed:

    In the upper field, enter =s.props.name.

  4. Click FINISH to add the text.
The List HTML element defaults to display a bulleted list.
Note Advanced users can change this to a numbered list by modifying the list tag in the code editor. In the View Designer, select the list element. Use the link in the top right of the artboard to switch to the code editor—Note that the list is highlighted in the code. Change the enclosing tags <ul> to <ol>, and </ol> to </ul>.
Parent Topic Adding a Custom User Interface