Jerome Lefebvre

(Slightly) Editing the PI Vision Ribbon

Blog Post created by Jerome Lefebvre on Mar 9, 2020

Customers making heavy use of PI Vision will soon end up with more than one PI Vision server. Either for production/testing or related to different business units. At a quick glance, it may be difficult to tell on which of those particular instances you find yourself on. Thus, the need to somehow tweak the page to give indication to the users where they are.

Before we dive into this, some warnings:

1. This is not a supported edit! Tweaking the source code of PI Vision is an easy to find yourself without a working PI Vision site. Even it if works, there are no guarantees that the upgrade process will be able to deal with these edits.

2. This is not an endorsement to go wild on editing the front page. We take a lot of pride in PI Vision, removing the  PI vision logo weakens our brand, adding your own logos would confuse users as to what was created by OSIsoft.

To do something that is currently supported is to simply add this information, along with logos, etc., to each of the individual displays. This can be done by first creating a template graphics and creating all other displays by first editing this template and then using "save as".

And as always, if this is a need for you, please vote to make such edits a standard feature of PI Vision by registering your needs in UserVoice:

Configure the Color Theme for the PI Vision Chrome – User Feedback for OSIsoft Products and Services 


Here is the result we are going after:



Now onto this dangerous editing.

First, we need to know what file to edit. Chrome web debugger allows us to easily see what files are loaded, when you open the homepage or other displays. The file "pv-header-template.html" is the file we want.


We can also see where in the HTML file we want to edit to add this content.


Knowing this, to get the above appearance, I added the code below to line 11 of "pv-header-template.html".


    <div style="background-color:white;"><h4 style="color:blue;">Production</h4><h4 style="color:red;margin-left:2em; display:inline-block;">Server</h4></div>