Dynamically Generating Button List

In this example we will dynamically generate a list of buttons that link to a dynamic page and pass in a Watch List parameter.

We have a point hiererchy like this the left image and we want to generate a page where we can select any of the RTU folders and we dynamically get a button for each subfolder along with the value from one of the data points within the subfolder. Changing the RTU drop down list updates the folder list.

You can click any of the buttons and it takes you to our Dynamic VAV Dashboard page and sets the Watch List parameter so we then see the correct VAV. For instructions on setting up your target page to accept the parameter from the button link see here.

In your code view add the following ma-point-hiererchy directive above the main div. Edit the path as needed, for this our path is: HVAC Systems/VAV Information/RTU1 where RTU1 will come from the watch list parameter with designer.parameters.dn

dn is the variable name being used in the Watch List Parameter name.

<ma-point-hierarchy path="['HVAC Systems', 'VAV Information',designer.parameters.dn]" hierarchy="folder"></ma-point-hierarchy>

Next you can add this code for your buttons and point value. This assumes that your data point XID contains your Device Name in it and that your folder names match your device names. It also uses the dn variable name from the Watch List Parameters

   <div id="217ab02d-c2c6-434d-a0fc-8383af3ef08d" style="position: absolute; left: 414px; top: 99px;" layout="column">
        <div ng-repeat="folder in folder.subfolders" layout="" layout-align="start center">
            <md-button class="md-raised md-accent" ui-state="'ui.hvacSystems.vavDashboard'" ui-state-params="{dn: folder.name}">{{folder.name}}</md-button>
            <ma-point-value enable-popup="right" flash-on-change="true" point-xid="DP_{{folder.name}}_RMT"></ma-point-value>
        </div>

Note: You can drag this button widget around in the dashboard designer but be sure to not resize it otherwise it will become set with a static hight and width which will cause it to display incorrectly.