Kenji Hashimoto

How to customize the appearance of PI Coresight 2016

Blog Post created by Kenji Hashimoto on Jul 21, 2016

This post has been edited to be in compliance with OSIsoft Legal Policies. For questions on this, please send an email to


If you want to change the Help,


If you comment out following, it delete PI Live Library in Help.

{ id: 'HelpMenu', title: CS.Messages.HelpMenu, url: '' + lang + '/coresight-v7/GUID-7EF650C5-1235-4F8A-AC61-2EB1D2A3A5BF ' },


Or I recommend to delete this question itself if you don't need it.


Do you want that users are not possible to create a new display?

Delete div class="c-new-display" in %PIHOME64%\Coresight\Scripts\app\editor\layout\coresight.cs-header-directive.js

You can delete all of the followings.

<div class="c-new-display t-display-content-font">
            <div class="c-icon-display" ng-click="navCtrl.newDisplay()" title="{{::newDisplayTooltip}}">
                <div class="c-new-display-rollover">
                        <svg id="new-display-icon" class="t-icon-fill" version="1.1" x="0px" y="0px"
                             width="25px" height="25px" viewBox="0 -4 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
                        <path d="M9.677,0.823c-5.12,0-9.271,4.188-9.271,9.354c0,5.169,4.151,9.356,9.271,9.356
                                    c5.119,0,9.271-4.188,9.271-9.356C18.948,5.012,14.796,0.823,9.677,0.823" />
                        <polygon fill="#091d3a" points="15.553,8.831 10.982,8.831 10.982,4.114 8.37,4.114 8.37,8.831 3.8,8.831 3.8,11.527 8.37,11.527
                                    8.37,16.243 10.982,16.243 10.982,11.527 15.553,11.527" />
                    <div class="t-font-color-white" style="text-decoration: none">{{::newDisplayLinkText}}</div>

Then all users could not see/press "New Display" link anymore.

However, you also could not press New Display button anymore.

In this case, luckily we can create new display by this URL.



Do you want to force "?mode=kiosk" to all users/all displays?

You can do it by comment out if sentence as following.


// if (parms.mode === 'kiosk')

If you do this, all users/ all displays can be seen as Kiosk mode.

We could not choose which users can see display without kiosk. So if you want to create/edit display, you need to change comments out again. (Found with Jerome Lefebvre)


PI Coresight 2016 Value object shows tool tip. I don't want to show it.


//valueLabel.path = data.Path;

If you comment out this, it doesn't show tool tip anymore.

By default, Value object's Multi-State changes background color.

I want to change font color. (Not background color)

In this case, change sym-value-template.html's "Fill ||" place.


<div  title="{{runtimeData.valueLabel.path.indexOf(':') === -1 ? runtimeData.valueLabel.path : runtimeData.valueLabel.path.split(':')[1]}}" style="white-space:nowrap;text-align:left;overflow:visible;" ng-style="{background: (config.Fill), 'font-size': fontSize}" ng-class="{'blink': Blink}">
    <div class="text-symbol-sizing-line" style="display:table" ng-show="config.ShowLabel">
        <span style="margin-right:2px" ng-style="{color:Fill ||config.Stroke}" ng-bind="runtimeData.valueLabel.displayName"></span>
    <div class="text-symbol-sizing-line" style="display:table">
        <span ng-style="{color:Fill ||config.ValueStroke}" ng-bind="value"></span>
        <span style="font-size:smaller;margin-left:1px;" ng-style="{color:Fill ||config.Stroke}" ng-bind="units" ng-show="config.ShowUOM"></span>
    <div class="text-symbol-sizing-line" style="display:table" ng-show="config.ShowTime">
        <span ng-style="{color:Fill ||config.Stroke}" ng-bind="time"></span>

So I could change font color instead of background color by Multi States.

For changing display's background color, I have checked the display object name by Chrome + F12.

t-display-container is the name of the class.


contains the t-display-container.

.t-display-container {
  background-color: white; }

I could see white background color.

PI Coresight 2016 can use custom symbols which is great feature.

GitHub - osisoft/PI-Coresight-Custom-Symbols: Learn how to add a custom symbol, created with JavaScript and HTML, to PI …

by default, it shows icon.

For this, you can take a screenshot of the objects and save it as png/jpg. (Need to change background color though. You can set "#48586b" color as back group color and take screenshot)

Put the image to %PIHOME64%\Coresight\Images folder.

Open the js fiile and put the IconURL.

var defintion = {
typeName: 'liquidgauge',
iconUrl: 'Images/liquid.png',

It shows the icon.

If you click the item, then you can realize that the image contains the background color.

Of cause it is good to create image without background color. Though in this way, it is easy to create the image by ms-paint.

Third party applications are also good options. For example:


I have not checked all items. But it seems like HTML5 works fine for changing a lot of things.

Please remember that those changes are not supported officially.


Worked with Jerome Lefebvre