Skip navigation
All Places > PI Developers Club > Blog > 2019 > August
2019

Introduction

Hi everyone!

 

I had a request from my friend at Petronas about creating a Filter Table in PI Vision which can simulate the filtering ability of Microsoft Excel. As you probably already know, the stock Table symbol doesn't support filtering the rows of the table. This is where PI Vision Custom Symbol Extensibility will fill the gap!

 

In this blog, I will create a Filter Table which contains PI Point values that we can filter by the name of the PI Point and even do searching by PI Point name. Let's take a look at the implementation.

 

Implementation

We start with the definition of the symbol. Note that we are using the 'Table' DataShape to allow for multiple data sources.

 

sym-filtertable.js

var definition = {
   typeName: 'filtertable',
   datasourceBehavior: CS.Extensibility.Enums.DatasourceBehaviors.Multiple,
   visObjectType: symbolVis,
   getDefaultConfig: function () {
      return {
         DataShape: 'Table',
         Height: 500,
         Width: 600
      };
   },
};

 

Next, the dataUpdate function will be used for the creation of the table and also its update. The DataTable jQuery plug-in will be used to help with the table construction.

 

sym-filtertable.js

q = 1;
var table;
function dataUpdate(data) {
   if (q) {
      $('#example').dataTable({
         data: data.Rows,
         columns: [
            { "data": "Label" },
            { "data": "Time" },
            { "data": "Value" }
         ],
         rowId: 'Label'
      });
      q = null;
      table = $('#example').DataTable();
      var select = $('<select />')
         .appendTo(
            table.column(0).footer()
         )
         .on('change', function () {
            table
               .column(0)
               .search($(this).val())
               .draw();
         });
      table
         .column(0)
         .cache('search')
         .sort()
         .unique()
         .each(function (d) {
            select.append($('<option value="' + d + '">' + d + '</option>'));
         });
         select.append($('<option value="">' + 'ALL' + '</option>'));
   }

   table = $('#example').DataTable();
   i = 0;
   table.rows().every(function () {
      var d = this.data();
      d.Value = data.Rows[i].Value
      d.Time = data.Rows[i].Time
      i++
      this.invalidate();
   });
   table.draw();
}

 

 

Presentation

Finally, in your html file, you can define the column header names that you want.

 

sym-filtertable-template.html

<table id="example" class="display" style="width:90%">
   <thead>
      <tr>
         <th>Label</th>
         <th>Time</th>
         <th>Value</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Label</th>
         <th>Time</th>
         <th>Value</th>
      </tr>
   </tfoot>
</table>

 

Here is an example of how it will look like.

 

Filter Blog

By date: By tag: