Cédric Canguilhem

PI Vision Easter Eggs - Step 3 : Manage option group visibility with button

Blog Post created by Cédric Canguilhem on Oct 15, 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. I suggest reading the previous blog posts if not done yet :


In the first steps of this mini-series of blog post, we created a custom option group inside the configuration pane of the native "Value" symbol :


Step 3 : How to manage the visibility of option groups with a simple button


3.1 Add a new attribute to the symbol's configuration, in order to store the visibility status

The name I choose for the new attribute is "ShowEaterEggOptions", and it will hold boolean values (true / false).


Edit the file "PIVisualization.sym-value.js", and locate the definition of the symbol's configuration.

This statement begins with the words "var def = {", and is located just before the symbol's registration.


Few lines below, you can find the implementation of the "getDefaultConfig" function, which ends by returning an object named "config". This object contains the default values of the symbol's configuration :


Paste the following lines just before the "return config;" statement :

config.ShowEasterEggOptions = false;


For the moment, this has no effect on the symbol.


3.2 Map the option group visibility to the new configuration attribute

Visibility can simply be managed through the "ng-show" AngularJS directive.


Edit the "sym-value-config.html" configuration file, and add the "ng-show" directive to the "<li>" tag corresponding to the "About" option group, as below :

<!-- ABOUT -->
<li class="k-state-active k-state-active-custom" ng-show="config.ShowEasterEggOptions">


The "ng-show" directive evaluates the "ShowEasterEggOptions" attribute as a boolean, and shows or hide the HTML element "<li>" depending on its value.


If you restart IIS, the "About" option group is now invisible, because of the false default value in the symbol's definition :


No worry, we'll make it appear again 


3.3 Add a new button at the end of the configuration pane

Add the following lines add the end of the "sym-value-config.html" file :

="margin: 10px 15px; padding: 6px 0"

<input type="button" class="c-primary-button" value="Change Status" />


Check that you can see the button in the config pane :


3.4 Add a callback to the button

Callbacks for the button's click events can be managed through the "ng-click" AngularJS directive.


Add the "ng-click" directive to the button as below :

="margin: 10px 15px; padding: 6px 0"

<input type="button" class="c-primary-button" value="Change Status"
ng-click="config.ShowEasterEggOptions = !config.ShowEasterEggOptions;" />



The aim of the statement "config.ShowEasterEggOptions = !config.ShowEasterEggOptions;" is to invert the attribute's value each time the button is clicked.


This is the result :


In the next blog post, we will reuse all this work and implement a log feature with the following requirements :

  • The log feature pushes traces to the javascript console of the browser
  • Log can be activated / deactivated
  • Several log levels are available : None, Basic, Full


If you have any comment or suggestion, don't hesitate !


And stay tuned for the next steps !