Cédric Canguilhem

PI Vision Easter Eggs - Step 1 : Add a custom option group

Blog Post created by Cédric Canguilhem on Oct 13, 2020

Hi all, PI Vision developers !

 

This blog post is part of a mini-series about adding a log feature to the native Value symbol, and hiding it into an easter egg. Very little knowledge about the PI Vision extensibilty, HTML, CSS, Javascript, and AngularJS directives should be sufficient

 

Step 1 : How to add a custom option group inside the configuration pane

If you plan to create complex custom symbols, or to add many options to existing native symbols, you will probably have to deal with the configuration pane's option groups, in order to organize the symbol's features.

There are surprisingly various configuration pane layouts implemented inside the native symbols and shapes : different HTML tag structures, different CSS classes, different margins, different paddings, etc...

 

I strongly recommand to keep it as simple as possible, and to copy-paste existing code blocks when modifying any of the "sym-[SYMBOL NAME]-config.html" files.

 

First things first, let's add a very simple "About" option group to the Value symbol, which displays the current version number of the symbol :

 

 

  1. Open the file "sym-value-config.html".
  2. Copy the second "<li> ... </li>" block that corresponds to the "Visibility" option group, then paste it under the third option group, just before the closing "</ul>" tag.
  3. In this new block, keep the "<span> ... </span>" that corresponds to the title of the option group, and update it :
    <span class="panel-bar-label-no-wrap">About</span>

  4. Remove everything inside the "<div> ... </div>" block.
  5. Add a label inside the div to display the version number :
    <label>Version : <b><font color="#657281">2020.10.02.</font>01</b></label> 
  6. Add the class "k-state-active" to the top-level "<li>" tag, so that the option group is expanded by default :
    <li class="k-state-active">

 

Your code sould now look like :

 

And the configuration pane should render correctly (don't forget your iisreset ):

 

In the next blog post, I'll add a bulleted list to this new option group (not as straightforward as expected !), and style the option group header with CSS in order to distinguish it from the native ones :

 

Don't hesitate to post any comment or suggestion, I'll really appreciate.

 

And stay tuned for the next steps !

 

Outcomes