Since the release of PI Vision extensibility, I have seen a lot of questions on PI Developers Club about how to make HTTP calls against PI Web API within the custom symbol methods.


On my last blog post, I have shown step by step about how to generate a PI Web API Client library for AngularJS using Swagger codegen. This library is available for download on the dist folder from this GitHub repository. What I do think it would be very interesting and useful for our community is to use this library when developing custom PI Vision symbols. Who wouldn't want to use this feature?




Before we start describing the procedures, it is good to remind that you that we will change PI Vision source JavaScript source code. As a result, there are a lot of risks involved, such as:

  • If the changes you've done were not well done, your PI Vision might not load anymore. In this case, you might need to repair the installation to replace all JavaScript files.
  • After a PI Vision upgrade,  all your changes will be undone. You will have to do the procedure again.
  • I strongly recommend testing on a development environment first.
  • Although I don't expect major issues, we haven't tested the problems when using this library within PI Vision.


All in all, there are risks involved. Just consider them before following the procedure.



Making the piwebapi service available on PI Vision 2016 R2


Yes, I am writing this procedure only for PI Vision 2016 R2 (or PI Coresight 2016 R2). It should also work on PI Vision 2016 but I haven't tested. If you do test, please write a comment below!


Here are the steps:


1 - Open the browser and go to this GitHub repository. Download the source code package to a zip file. Within this file, copy the piwebapi-kerberos.min.js (or piwebapi-kerberos.js) file to %PIHOME64%\Coresight\Scripts\app\editor folder.

2 - Edit the Index.html file located on the %PIHOME64%\Coresight\Views\Home folder by adding a reference to piwebapi-kerberos.min.js just below "@Scripts.Render("~/bundles/libraries/jstz")". Please refer to the code below:



  <script src="/Coresight/Scripts/app/editor/piwebapi-kerberos.min.js" /></script>



3 - Edit the file located on the %PIHOME64%\Coresight\Scripts\app\editor by adding piwebapiClientLib to the depedencies module list from PI Vision. Please refer to the code below:


    angular.module(APPNAME, ['ngAnimate', 'Chronicle', 'osi.PiDialog', 'osi.PiToast', 'coresight.routing', 'kendo.directives', 'gridster', 'piwebapiClientLib'])


Do not forget to save both files.


That is all! Easy, right?



Creating a custom symbol using the piwebapi service


Now that our PI Vision is now able to inject our piwebapi service, which is a PI Web API client library using AngularJS, let's create a custom symbol that will make an HTTP request againt the main PI Web API endpoint and display the JSON on the screen.


Create a new file name sym-piwebapi-test.js on the %PIHOME64%\Coresight\Scripts\app\editor\symbols\ext folder with the following content:


(function (CS) {

  function symbolVis() { }

    var definition = {
        typeName: 'piwebapitest',
  datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Multiple,
  inject: ['piwebapi'],
        getDefaultConfig: function () {
            return {
                DataShape: 'Table',
                Height: 400,
                Width: 400,
                MarkerColor: 'rgb(255,0,0)'          
  visObjectType: symbolVis

   symbolVis.prototype.init = function init(scope, elem, piwebapi) {  

  piwebapi.home.homeGet({}).then(function(response) { =;



Create a new file name sym-piwebapitest-template.html on the %PIHOME64%\Coresight\Scripts\app\editor\symbols\ext folder with the following content:


    <br /><br />
    <p style="color: white;">{{data}}</p>



Time to test our custom library. Dragging any element and dropping it on the screen, we can see that JSON response from the main PI Web API endpoint.




The custom symbol developed in this blog post is very simple. Nevertheless, its main purpose is to demonstrate that after making the changes in order to add the PI Web API client library for AngularJS to PI Vision, it is possible to inject the piwebapi service. As a result, it gets easier to make HTTP requests against PI Web API using this client library.


Finally, please write comments about this project and share your thoughts!