How To Add Images To Pivot Widgets Using The New Pivot 2.0 API

[intapiuser]

The new Pivot 2 (in Linux deployments) has a powerful API to select and edit cells using a widget script. You can use CSS & HTML to enrich your pivot widgets. In this example we'll use a star based product rating.

1. Have the URLs to your images ready, whether they are hosted in your Sisense deployment or somewhere else.
2. Decide on the dimensions. 12x12px was a good size for these stars.
3. Use the following script to target the row, column or value that will have the images. In this case, it's on values, on the Product Rating column:

Code Snippet:

//Create target object to select cells of type Value with the title "Product Rating"
const myTarget = {
 type: ['value'],
 values: [
  {
   title: 'Product Rating'
  }
 ]
};

//Pass target to the transformPivot method and add the images in the cell
widget.transformPivot(myTarget, function(metadata, cell) {
 cell.contentType = 'html';
        if (!isNaN(cell.content)  && cell.content.indexOf('star') < 1) {
     var pctVal = parseInt(cell.content);
            var offStars = 5 - pctVal;
     cell.content += "&nbsp;&nbsp;&nbsp;&nbsp;";
     for (var idx=0; idx  <offStars; idx++)  {
  cell.content += "<img src='/plugins/BloX/blox-images/starOff.png' width='12' height='12'/>";
     }
     for (var idx=0; idx<pctVal; idx++)  {
  cell.content += "<img src='/plugins/BloX/blox-images/star.png' width='12' height='12'/>";
     }
       }
});

Make sure to check the API. You can select cells in the rows, columns, or values sections of the pivot; and select them by title, position or even dimensional values.