Page Layout

Page Selection

Page Select allows for the HMI user to select an alternate page. This will load the page to the container specified by replacing the contents of the DOM element.

Attribute	Description
label	This label will be a child of the span element located after the element.
template	This is the name of the view defined in tmplits.json that should be displayed after a click
dom	This refers to the DOM element ID that the selected page will be displayed in
active	This is a boolean argument that allows you to specify which page is active on boot. This only affects the button visual

Example

    <!--The Page selects need to be in a class='nav-tabs' for the active to work properly. 
        class='nav-tabs' sets the scope of the PageSelects that are exlusive. -->

    <div class='nav-tabs'>
        <!--The default page's PageSelect should have active=true -->
        {{tmplit 'PageSelect' 'Page 1' dom="container1" template="page1" active=true}}
        {{tmplit 'PageSelect' 'Page 2' dom="container1" template="page2"}}
    </div>

    <script id="page1" type="text/x-handlebars-template">
        <!-- write your page 1 -->
        page1
    </script>

    <script id="page2" type="text/x-handlebars-template">
        <!-- write your page 2 -->
        page2
    </script>

    <div id="container1">
        <!--The default page should be placed in the container to show on the initial load-->
        {{> page1}}
    </div>

Columns

Columns allows for the developer to create automatically placed elements within the columns specified in the declaration.

Attribute	Description
label	This label will be a header of the all columns being created.
style	This is the style of the div that will be created around the columns
maxColumns	Max number of columns per row
centerItems	This will center the items in the columns
columnFlow	This will change the direction that items are added, vertical or horizontal

Example

    {{#tmplit 'Columns' 'label' maxColumns=2}}
        <div style="text-align:center">Column 1 Header</div>
        <div style="text-align:center">Column 2 Header</div>
        {{tmplit 'NumericOutput' '<label>' data-var-name='<var>'}}
        {{tmplit 'NumericOutput' '<label>' data-var-name='<var>'}}
        {{tmplit 'NumericOutput' '<label>' data-var-name='<var>'}}
        {{tmplit 'NumericOutput' '<label>' data-var-name='<var>'}}
    {{/tmplit}}