How To Add Images To Pivot Widgets Using The New Pivot 2.0 API
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.
- Have the URLs to your images ready, whether they are hosted in your Sisense deployment or somewhere else.
- Decide on the dimensions. 12x12px was a good size for these stars.
- 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 += " ";
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.
Updated 02-13-2024
intapiuser
Admin
Joined December 15, 2022