Kenji Hashimoto

PI WebParts (PI TreeView + PI Graphic) behavior by PI Coresight 2016 R2

Blog Post created by Kenji Hashimoto on Oct 26, 2016

Some customers want to achieve PI WebParts (PI TreeView + PI Graphic) behavior by PI Coresight 2016 R2.


For showing Tree, we can use PI Web API to achieve it. Help file contains it.

Please check following part.


A Simple Application

In this section, we'll develop a JavaScript application for exploring the AF hierarchy of your PI System. A basic knowledge of JavaScript, HTML, and CSS is assumed. The following is the complete code.


It can shows like PI Tree View.

For showing PI ProcessBook Display by PI Coresight, we can use HTML's Frame.

I created two files. (Please change F2's src= part as your PBDisplay)

1 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "">
<html xmlns="" xml:lang="ja" lang="ja">
    <frameset cols='20%,80%' id="main">
        <frame name="F1" src=".\AFTree.html" />
        <frame name="F2" src="https://CoresightServerName/Coresight/PB/#/PBDisplays/40102?HideToolBar">
                <p>The browser does not support frames</p>


2 AFTree.html  (I changed it from PI WebAPI's help file. It contains URL hyper link to "F2" frame. Please change RootElement and DisplayPath)

<!DOCTYPE html>
    <title>AF Hierarchy Viewer</title>
    <script src=""></script>
    <script type="text/javascript">
        //Please enter tree's root element's WebID address.
        var RootElement = 'https://PIWebAPIServerName/piwebapi/assetdatabases/D0c_UDU9Pb-k6nVsZu0iuPpgKZD5gy4Ww0WeCfOWEZoj_wS0hBU0hJTU9UT0U2NDQwXFBJIEJJRyBUSVJFUyBDTw/elements';
        //Display path and CurrentElement
        var DisplayPath = 'https://CoresightServerName/Coresight/PB/#/PBDisplays/40102?HideToolBar&CurrentElement=';
        var childrenMap = {
          Elements: ['Elements']
        function node(name, type, links, parentDiv, path) {
          this.type = type;
          this.links = links;
          this.flipper = $('<span class="flipper">+</span>').click(flip.bind(this, this));
          parentDiv.append(this.flipper).append('<span class=" + type + "><a href="'+DisplayPath + path  + '" target="F2">' + name + '</a></span><br />');
          this.div = $('<div></div>').hide().appendTo(parentDiv);
        function loadChildren(n) {
          n.loaded = true;
          childrenMap[n.type].forEach(function(childCollection) {
            $.get(n.links[childCollection], function(collection) {
              n[childCollection] = (item) {
                return new node(item.Name, childCollection, item.Links, n.div, item.Path);
        function flip(n) {
          if (!n.loaded) { loadChildren(n); }
          n.flipper.html(n.flipper.html() == '+' ? '-' : '+');
        $(function() {
          root = new node('Elements', 'Elements',
            { Elements: RootElement }, $("#root"));
    <style type="text/css">
        div {
          left: 10px;
          position: relative;
        .flipper {
          cursor: pointer;
  <div id="root"></div>


For showing PI Coresight in Frame, it needs web.config change.


<add name="X-Frame-Options" value="Allow"/>


You can run it from local but we can use IIS to host these files.

Create new IIS site and put these 2 files (index.html, AFTree.html) to the website's folder. (Click Explorer)

Put 2 files.


Now we can see element relative ProcessBook display + Tree.


If I click Philly > PHI.Press03, it shows PHI.Press03 display.

IIS's windows authentication is required. Sometimes, IIS gets an error for connecting PI Web API. Annonymous works but if you want to use Kerberos, you need to cover security issues includes SPN etc...

(PI Web API's Kerberos authentication is required for running PI Web API Crawler correctly. This is a tricky part. If PI Web API Crawler does not work, PI Coresight could not show search results.)


For showing PI Coresight native display + Tree, we have Asset parameter.

PI Coresight 2016 R2 works fine by asset parameter. So you can use Native PI Coresight display + Tree by PI Coresight 2016 R2. (PI Coresight 2016 had an issue for asset parameter)


I have created Japanese version too.(日本語はこちら)

PI WebParts (PI TreeView + PI Graphic) の挙動をPI Coresight 2016 R2で再現させる方法