Cédric Canguilhem

PI Vision Easter Eggs - Step 2 : Style native symbols with CSS

Blog Post created by Cédric Canguilhem on Oct 14, 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 post if not done yet :

 

Step 2 : How to style custom extensions to native symbols with CSS

Custom symbols require at least 3 files :

  • sym-[SYMBOL NAME]-template.html : presentation
  • sym-[SYMBOL NAME]-config.html : configuration
  • sym-[SYMBOL NAME].js : implementation

(Please refer to the PI Vision Extensibilty Guide for more details)

 

Custom symbols can be styled directly in the presentation layer with the "style" attribute inside HTML tags.

It is often more readable and maintainable if custom symbols come with their own dedicated stylesheets.

 

Contrarily, native symbols rely on global CSS files, so one simple but dangerous way to achieve styling your extensions is to modify directly those core PI Vision CSS files. One great benefit is that your custom styles will then be shared with all your extensions and custom symbols.

 

Step 2.1 : How to deal with bulleted lists inside the configuration pane

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

 

Let's add a credits list under the version number :

<label>Author(s) :</label>
<ul>
<li>Style : OSIsoft LLC</li>
<li>Visibility : OSIsoft LLC</li>
<li>About : Cédric Canguilhem</li>
</ul>

 

The list isn't displayed as usual :

No indentation, no bullet.

 

That's because inside the configuration pane, lists aren't bulleted by default.

(the option groups are themselves list items)

 

To fix that :

  1. Edit the "shared.css" file located under "PIPC\PIVision\Content\css", and add the following lines at the end :
    /**********************************************\
    CUSTOM CSS
    \**********************************************/

    .ul-bulleted {
    list-style-type: square;
    list-style-position: inside;
    }

    .ul-bulleted li {
    margin-left: 10px;
    }
    /********** END CUSTOM CSS **********/
  2. In the configuration file of the Value symbol, add the class "ul-bulleted" to the new list :
    <ul class="ul-bulleted">
    <li>Style : OSIsoft LLC</li>
    <li>Visibility : OSIsoft LLC</li>
    <li>About : Cédric Canguilhem</li>
    </ul>

     

Now the list should render correctly :

 

Step 2.2 : How to highlight your custom configuration option groups

Implementing custom features that have the same Look&Feel as the core ones is a very good idea. It strengthens the user understanding and confidence in the product.

 

But you sometimes want to brag about your specific developments, and make them highly distinguishable from the standard !

 

So let our option group be more fancy :

  1. Edit the "shared.css" file located under "PIPC\PIVision\Content\css", and add the following lines inside the "CUSTOM CSS" block created previously at the end of the file :
    .k-state-active-custom span {
    background-color: #d78900 !important;
    }

    .k-state-active-custom span:hover,
    .k-state-active-custom span:hover span
    {
    background-color: #e4b220 !important;
    }
  2. In the configuration file of the Value symbol, add the class "k-state-active-custom" to the top-level "<li>" tag

Your code should now look like :

 

And the option group should render like :

 

When hover with the mouse pointer :

 

In the next blog post, I'll show you how to manage the visibility of an entire option group with a simple button.

 

Stay tuned for the next steps !

 

 

Outcomes