Dynamic Template Setup

[Brad_GMI]

Good Afternoon Everyone,

I'm working around the Templating example in the Dashboards Examples to create a page to monitor our equipment.

<div layout="row">
    <md-input-container flex="" class="no-errors-spacer">
        <label>Choose a device</label>
        <md-select ng-model="deviceName" ng-init="deviceName='Meter 1'">
    	    <md-option ng-value="'Meter 1'">Meter 1</md-option>
    	    <md-option ng-value="'Meter 2'">Meter 2</md-option>
    	    <md-option ng-value="'Meter 3'">Meter 3</md-option>
    	</md-select>
    </md-input-container>
</div>

<!-- Server side query for points with given device name, and server side sort -->
<ma-point-query query="{deviceName:deviceName}" sort="'name'" points="points"></ma-point-query>
<ma-get-point-value points="points"></ma-get-point-value>

Instead of the hard coded drop down, I would like to create two drop downs:

One that contains the Data Sources available to the user and one that contains the Device Names for that Data Source.

Once both have been selected the template below would then be populated with that device data.

I suspect this can be handled with a RQL query, but I haven't been able to piece together a query that does the job yet.

Any ideas?

[Jared Wiltshire]

Hey Brad, there is no easy way of doing this right now. The only thing you could do is to retrieve all the data points then filter them client side in a Javascript controller.

Obviously this is not ideal, we will add REST endpoints and directives for getting device names in the next release. In the meantime you could try storing an array of device names in the JSON store and retrieving it from there if you don't want to hard code them.

[Jared Wiltshire]

I just had a thought, you could also try using the point hierarchy in the meantime. Note that if a user doesn't have permission for a point it will not be retrieved.

[Brad_GMI]

I'll give both options a try and see what happens. Once I get something working I'll post up a result. Thank you for the ideas!

[Brad_GMI]

Utilzing the Point Hierarchy Line Chart demo, I'm getting pretty close. Currently my two drop down boxes update, but they reflect the same values. Any simple tricks to get md-select to show one level of folder, then another md-select to focus on the subfolders on the parent folder?

[ThomasEinasto]

Hi Brad,

I've been doing something similar this week by using point hierarchy, a little bit of scripting client-side and using the JSON data.

I have points assigned to folders and I if need the XID of one point which is located in /root/Folder1/sub-folder2/ then I will just get the point by doing a <ma-point-hierarchy query with a path and then just put the variable 'hierarchy' in a form.

Note: hierarchy.subfolders is an array where [ number ] indicates the number of the folder of a subfolder it is. I guess it is sorted by alphabetical sort and then lowest-to highest number sort.

<ma-point-hierarchy path="['Folder1']" hierarchy="hierarchy" points="points"></ma-point-hierarchy>

for(i=0;i<maNoofPoints;i++)
{
{{hierarchy.subfolders[0].points*.xid}}
}

After that I can put this variable to <ma-point-value> query where point-xid={{hierarchy.subfolders[0].points*.xid}} .
I then use one graph to display the data of the points and use on click events change the data on the graph by using ng-click to change dynamic variables on my page.

I am not sure if this is optimal but it does the job because the page is done by a js on load which makes divs according to how many points I have.

You can probrably put this kind of a solution into your dropdown list.

Good luck,
Thomas

[Jared Wiltshire]

Thanks for helping out Thomas.

Here's a snippet which should help you both out, it uses two select components to choose two levels from the point hierarchy then gets the array of points which you can use for a serial chart for example.

<ma-point-hierarchy path="[]" hierarchy="rootFolder"></ma-point-hierarchy>
<md-select ng-model="subfolder">
    <md-option ng-value="sf1" ng-repeat="sf1 in rootFolder.subfolders">{{sf1.name}}</md-option>
</md-select>
<md-select ng-model="points">
    <md-option ng-value="sf2.points" ng-repeat="sf2 in subfolder.subfolders">{{sf2.name}}</md-option>
</md-select>

<pre>{{points|json}}</pre>

[Brad_GMI]

Thanks Guys!

I was able to get things going with your solution Jared.

Below is the basic template of what I am using to get real time values:

<ma-point-hierarchy path="[]" hierarchy="rootFolder"></ma-point-hierarchy>
<md-select ng-model="subfolder">
    <md-option ng-value="sf1" ng-repeat="sf1 in rootFolder.subfolders">{{sf1.name}}</md-option>
</md-select>
<md-select ng-model="points">
    <md-option ng-value="sf2.points" ng-repeat="sf2 in subfolder.subfolders">{{sf2.name}}</md-option>
</md-select>

<ma-calc input="points | filter:{name:'Setpoint'} | first" output="setpoint"></ma-calc>
<ma-get-point-value point-xid={{setpoint.xid}} point="sp"></ma-get-point-value>

<pre ng-if=sp><p>The point name is "{{sp.name}}" and its value is {{sp.renderedValue}}.</p></pre>

This configuration allows me to service many customers using the same style system with one dashboard, which saves a lot of development time.