The Problem

When using the standard Niagara mechanism to display graphics you will create PX pages with relativized ords. This is fine and all your ords know where they are in the station and have the proper context. Most of our widgets use an ORD reference. For example this dashboard has over 10 ord references and is used to show a single meter page. But what if I have 100 meters? Should I set each ORD individually? You could, but what if the ORDS change or you go onto another site?

By adding some parameters to the URL I can create 1 page that will accommodate all meters.

Station Logic Hierarchy

Lets say I have arranged my station in the following hierarchy.

Logic                       // Top-level
    AirHandlers             // Folder
        Ahu1                // Device Level
            DampPosition    // Point
            Fan             // ...
            Heating Coil    // ...
        Ahu2                // Another Device
            DampPosition    // Point
            Fan             // ...
            Heating Coil    // ...

Assumming my point names remain the same, the items are I want to make dynamic or changeable are Logic, AirHandlers, Ahu1...2...3...etc

Add Javascript Snippet to the HTML File

Now add the following snippet to your HTML file.

    <script>
        function transformToAssocArray(prmstr) {
            var params = [];
            var prmarr = prmstr.split(";"); // split by semi-colon
            for (var i = 0; i < prmarr.length; i++) {
                var tmparr = prmarr[i].split("=");
                params.push(tmparr[1]);
            }
            return params;
        }

        var prmstr = window.location.href; // grab the link you have sent the user to e.g.
        // http://domain.com/ord/file:^web/index.html%7Cview:web:FileDownloadView%3Fparam1=Logic;param2=AirHandlers;param3=AHU1
        var newUrl = unescape(prmstr);  // unescape html characters
        var transformedUrl = newUrl != null && newUrl != "" ? transformToAssocArray(newUrl) : [];
        var dyanmicUrl = transformedUrl.join('/');  // join by forward slash

        // Use dynamicUrl anywhere below e.g.:
        sensorApp.initialiseSensorStatusBarWidget({
            backgroundColor: 'transparent',
            divId: '#widget',
            statusBarBackgroundColor: '#EEEEEE',
            showTextValue: true,
            statusBarFillColor: '#f62d51',
            statusBarHeight: '20px',
            statusBarRadius: '3px',
            valueFontSize: '16px',
            valueFontColor: '#fff',
            valueFontWeight: 'normal',
            valueFontFamily: 'Poppins',
            valueLocation: 'right',
            min: 0,
            max: 100,
            ord: 'station:|slot:/' + dyanmicUrl + '/Fan',  // equals station:|slot:/Logic/AirHandlers/AHU1/Fan
        });
    </script>

If you have a complex menu to navigate around the station, set each hyperlink just once and use this mechanism to navigate around much easier. Your links are easier to configure and less complex.

NAV File

When a user logs into the system, they should automatically navigate to the correct location. For example an Overview/Dashboard page. Here is an example of a nav file which navigates a user to a html file with parameters. Notice how some of the parameters are encoded to get the user to the correct ORD location.

<?xml version="1.0" encoding="UTF-8" ?>

<nav version='1.0'>
        <node name='Home' ord='file:^web/index.html%7Cview:web:FileDownloadView%3Fparam1=Logic;param2=AirHandlers;param3=AHU1'
                icon='module://icons/x16/home.png' />  
</nav>

A normal url would look like this file:^web/index.html%7Cview:web:FileDownloadView?param1=Drivers&param2=NiagaraNetwork
The question mark was replaced with its equivalent html character code %3F and instead of using the ampersand (&), I used semi-colons to separate each paramter. This is because Niagara ords do not handle ampersands well when used in this manner.

Summary

Ok, so its not the most elegant solution, but I have just saved myself hundreds of copy/paste commands while making configuration in the long-run less painful.

---

Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?