1 Reply Latest reply on Jun 29, 2018 7:39 AM by Roger Palmen

    How to run same custom symbols on a display in PI Vision?




      i have to run multiple instances of a symbol on a display. When i trigger a function on Symbol A (e.g. click a button), Symbol B is reacting (because i use document.getElementById and the id is found multiple in the DOM).

      I use AngularJS and e.g. ng-repeat uses wrong elements, althogh i use track by an id.


      How can i seperate the symbols?

      How can i get a unique ID for a symbol to use it in JS? (displayProvider.getSelectedSymbols() is not an option, because on a saved display the symbols are initial unselected)


      Thank you in advance!

        • Re: How to run same custom symbols on a display in PI Vision?
          Roger Palmen

          Ah, caveat #1: On initialization, you should update the elementID to be unique. E.g. i use this code:


                  // Locate the html div that will contain the symbol, using its id, which is "container" by default

                  var symbolContainerDiv = elem.find('#<<HTML element ID>>')[0];

                  // Use random functions to generate a new unique id for this symbol, to make it unique among all other custom symbols

                  var newUniqueIDString = "<<HTML element ID>>_" + Math.random().toString(36).substr(2, 16);

                  // Write that new unique ID back to overwrite the old id

                  symbolContainerDiv.id = newUniqueIDString;



          Where you need to replace <<HTML element ID>> with the ID you set in your outermost DIV in the symbol -template.html.

          1 of 1 people found this helpful