Creating Dynamic HTML5 Pages in Niagara

by Paul

Posted on 2018-10-07 09:08:00

If you're starting to use a lot of HTML5 pages to show station data, creating hundreds of html files isn't the most efficient way to go about it. Using a small snippet of javascript can save you many hours of copy/paste while making your site easier to configure in the long-run...

The Problem

When using the standard Niagara mechanism to display graphics you will create PX pages with [relativized ords.](/content/knowledge-base/niagara-relativized-ords.html "More on Relativized Ords.."/index.html) This is fine and all your ords know where they are in the station and have the proper context. Most of our [widgets](/content/product-services/niagara/niagara-graphics-library.html "HTML5 Niagara Graphics"/index.html) use an ORD reference. For example this [dashboard](/content/content/images/hvac-dashboard.gif "Click For Demo..."/index.html) 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](/content/product-services/niagara/niagara-dropdown-menu.html "Bootstrap Menu"/index.html) 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.