Eugene Lee

Dynamic Template Views with PI Vision

Blog Post created by Eugene Lee on Jun 21, 2019

Introduction

Greetings everyone! 

 

In today's blog post, we will be touching on the topic of dynamic template views in PI Vision Custom Symbols. The idea is to support multiple HTML template files for your custom symbol which could correspond to the sites that are available in your industrial plant so that users are able to choose the site that they want.

 

I answered this briefly in this thread. 

https://pisquare.osisoft.com/thread/39998

 

Now, I will explain this in more detail here. I will extend the Simple Value symbol from the GitHub repository available here to allow it to use multiple HTML files.

 

Disclaimer:

Please take note that the licensing for the GitHub repository referenced above extends to any of the code that is present in this blog.

 

Presentation Layer

For the original HTML template file, replace the original contents with the following. This will be the master template which redirects to the other site templates. Note that the ng-include directive is used here. It helps us to fetch, compile and include an external HTML fragment which in this case is the other site template files.

 

sym-simplevalue-template.html

<div ng-include= config.View.path></div>

 

Start making more HTML files with the content and file names below. Notice that the additional template files will have the scope carried over so you can still display the data updates. This makes it possible to do things such as {{value}}.

 

sym-simplevalue-template1.html

<div ng-style="{background: config.BackgroundColor, color: MultistateColor || config.TextColor}">
<div ng-show="config.ShowLabel">{{label}}</div>
<div>{{value}}</div>
    <div ng-show="config.ShowTime">{{time}}</div>
    This template file is for Site 1.
</div>

 

sym-simplevalue-template2.html

<div ng-style="{background: config.BackgroundColor, color: MultistateColor || config.TextColor}">
This template file is for Site 2.
<div ng-show="config.ShowLabel">{{label}}</div>
<div>{{value}}</div>
    <div ng-show="config.ShowTime">{{time}}</div>
</div>

 

Implementation Layer

In our implementation, we have to create a new property that holds the path to the default template file to use upon symbol creation. We can create this new property in the getDefaultConfig function. We will call it 'View'.

 

sym-simplevalue.js

getDefaultConfig: function() {
     return {
       DataShape: 'Value',
       Height: 150,
       Width: 150,
       BackgroundColor: 'rgb(255,0,0)',
       TextColor: 'rgb(0,255,0)',
       ShowLabel: true,
       ShowTime: false,
       View:{path:"Scripts/app/editor/symbols/ext/sym-simplevalue-template1.html"}
    };
},

 

Next, in the init function of the symbol, we can set the possible paths that the user will be able to choose. Take note that these paths should be within the PI Vision installation directory so that you adhere to the same-origin policy. My advice is to place any custom files in the ext directory to facilitate upgrades. You won't have to search high and low for your custom files.

 

sym-simplevalue.js

scope.config.paths = [
    {name:"Site 1", path:"Scripts/app/editor/symbols/ext/sym-simplevalue-template1.html"},
    {name:"Site 2", path:"Scripts/app/editor/symbols/ext/sym-simplevalue-template2.html"}
];

 

Configuration Layer

Now we need a way for the user to be able to select the template that he wants during run-time. And where better but to put it inside the configuration pane? We will create an additional drop down list in our pane for this purpose.

 

sym-simplevalue-config.html

<div class="c-config-content">Change View:
<select ng-model="config.View" ng-options="x.name for x in config.paths track by x.name">
    </select>
</div>

 

This list will populate with the possible paths that we set in the implementation layer during symbol initialization.

 

Demo

Let's check out a demo of how this will look like in action!

 

 

Conclusion

We have seen that with the Custom Symbols Extensibility for PI Vision, it becomes a very flexible product where you can do almost anything with some ideas and coding skills. This is important because it is impossible for OSIsoft to imagine every possible visualization style that users want. We can make symbols out of the most common use cases but we can't cater to every single one. The Extensibility framework helps to plug that gap so that many use cases can be addressed with PI Vision. This truly makes PI Vision a first class visualization platform!

Outcomes