6 Replies Latest reply on Oct 15, 2017 10:03 AM by eradwan

    PI Vision Custom Symbols & Angularjs


      Hi There,

      Is it ok while creating a CS to create an Angular Module and Controller as in this example:




      var app = angular.module("demo-app", ['ngPIWebApi']);  
      app.run(function (piwebapi) {
      piwebapi.ConfigureInstance("https://marc-web-sql.marc.net/piwebapi", true); });

      app.controller("mainCtrl", function ($scope, piwebapi) {



      I'm asking because in all CS by the community used to start from the scope directly and I thought it must be like this. Even the mentioned example from Github is presented in a different way in this article:



      I'm trying to add a Kendo UI Grid to my CS and I find the first method above - creating Module & Controller - more convenient as I can imitate the examples from Telerik, while without them its really annoying to where to plug the code among the different files.

        • Re: PI Vision Custom Symbols & Angularjs

          Hi There,


          Anybody please to shed some light or mention someone who can.

            • Re: PI Vision Custom Symbols & Angularjs
              Kenji Hashimoto

              Hi, sorry for late response.

              The example created by Marcos ( Using PI Web API Client library in PI Vision 2016 R2 and 2017  ), requires injection and this is not a supported modification of PI Vision. That is, we strongly recommend not to make such edits on a Production machine and technical support will not be able to help you with issues regarding such modifications.

              AngularJS and Kendo UI do have a strong integration, but as this integration requires this injection, it is not possible to do it the way you pointed out. Instead, what might be possible is to use this version of Kendo UI: Configuration, methods and events of Kendo UI Grid   You can look at the working code by visiting their Dojo link.

              This version makes only use of jQuery and will work within PI Vision extensibility model. (This particular example makes use of certain CSS files, loading in those files might override other CSS definitions of PI Vision, so please be careful with those).

              1 of 1 people found this helpful
                • Re: PI Vision Custom Symbols & Angularjs

                  Thanks a lot Kenji, this was really a helpful start. As you see in the screenshot, the example grid from the

                  Dojo is there in the CS, however, I can't drag & drop it around with the following error that I found - on Google - to be more related to JQuery UI!





                    • Re: PI Vision Custom Symbols & Angularjs

                      Hi There. UPDATE

                      Just as Kenji mentioned, referencing the Kendo files twice is the cause of the problem, I removed the link to the JS files - jquery & kendo - and it works like a charm. This means we can benefit from the Angular - Kendo integration a lot with just extra few lines of code. My plan now is to use Marcos PI WebAPI technique to grape the AF Table data and feed it to the Grid, and valuable data from LIMS, SAP, ect can be added to the display.


                      Man, I love PI Square, what a professional and nice people.

                      1 of 1 people found this helpful
                        • Re: PI Vision Custom Symbols & Angularjs

                          Hi There, Kenji Hashimoto

                          The grid works fine with hard coded data, but unfortunately, I have a problem linking it to the PI WebAPI data. the data is available from the CS js file in the following form:



                          piwebapi.ConfigureInstance("https://srlaap81/PIWebApi/tables/B0PB-FonYhSUesWyYlHl1FrwutlJTCm7a0SpkBxDBSFSuAU1JMQUFQODFcQUYgUElMT1RcVEFCTEVTW1RBQkxFVEVTVF0/data", true); 



                             piwebapi.home.get().then(function (response) { 

                             scope.data = response.data;


                          When I dump it in the HTML file like the following it works fine:




                          <br /><br /> 

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




                          I know that the double curly braces is the angular magic to make data binding works. The problem is how to

                          configure in a way that Kendo grid accepts.




                                  <div id="grid"></div>



                                      selectable: "multiple cell",

                                      allowCopy: true,

                                      columns: [

                                      { field: "EmpID" },

                                      { field: "Name" }


                                      dataSource: {data}