Multiple Section Types

Common Attributes

Attribute Description Default Possible Values
class These classes will be added to the outer div. none css classes
data-var-name The plc variable that will be data bound to the main function of the tmplit not optional ‘MyTask:Myvar.member’, ‘gMyGlobal.var’
data-var-name-field A variable that contains the value of the text selection none string PV

When the user opens the dropdown:

  1. The value of data-var-name-willopen is set to true.

When the user selects an item from a dropdown:

  1. The value from ‘data-value’ on the option is written to data-var-name. If no ‘data-value’ is provided, the index of the option is written.
  2. If data-var-name-field is provided, the displayed value of the option is written to data-var-name-field.

If the machine variable changes, then the select element will update its index accordingly.

Attribute Description Default Possible Values
label This label will be a located above the dropdown. none String, HTML
data-var-name-willopen A variable that will be set when the dropdown will open (can be used for refresh) none PV

Example

    {{#tmplit 'DropdownTable' data-var-name='<var>' data-var-name-field='<var>'}}
        <options>
            <div>Option 1</div>
            <div data-value=10>Option 2</div>
            <div>Option 3</div>
            <div>Option 4</div>
        </options>
    {{/tmplit}}

MultiSelect

Multi select will allow the user to see all options presented on screen (Radio button). The selected option will show as a different style so the HMI user is aware of its current selection.

Example

{{#tmplit 'MultiSelect' maxColumns=10 data-var-name="<var>" data-var-name-field="<var>"}}
    <options>
        <div>Option 1</div>
        <div>Option 2</div>
        <div>Option 3</div>
        <div>Option 4</div>
    </options>
{{/tmplit}}