cancel
Showing results for 
Search instead for 
Did you mean: 

Change cell color on Widget (Edit Script)

gds
7 - Data Storage
7 - Data Storage

Is there a way that I can change a cell color based on a 2 different columns? Currently, I am able to update the color of the 'Days Since Last Version' , but also want to update the 'Days Since Last Version' cells if the Current Version is not a Major Version.

This is current script that is correctly returning colors based on the the 'Days Since Last Version' cells only:

widget.transformPivot({ type: ['value'] }, function(metadata, cellData) {
 if(metadata.measure.title === "Days Since Last Version"){
 
  if(cellData.value > '31'){     
  cellData.style.backgroundColor = '#ff9c8a';
  }
  else if (cellData.value <= '31'){
  cellData.style.backgroundColor = '#b1ffae';
  }  
 }
 });
 

However, I would also like to change the cell color in the 'Days Since Last Version' if the Current Version is not a major version. I am assuming my syntax in the highlighted below is incorrect?

Another option, perhaps preferable, would be to highlight the 'Current Version' column cells instead, if in a minor version (minor version is not a whole number) , if that is easier? Thanks for any suggestions!

 

gds_0-1707483368941.png

 

gds_1-1707483428934.png

 

 

2 REPLIES 2

gds
7 - Data Storage
7 - Data Storage

This code gets me what I need, but I don't believe it is the most efficient manner, as I had to manually exclude certain titles from appearing. Any suggestions would be helpful. Thank you!

 

 
To learn how you can access the Widget and Dashboard objects, see the online documentation at https://sisense.dev/guides/js/extensions
*/
 
widget.transformPivot({ type: ['value'] }, function(metadata, cellData) {
 if(metadata.measure.title === "Days Since Last Version" ){
 
  if(cellData.value > '31'){     
  cellData.style.backgroundColor = '#ff9c8a';
  }
  else if (cellData.value <= '31'){
  cellData.style.backgroundColor = '#b1ffae';
  }
  
  
 }
 
if   (metadata.measure.title === "Current Version" && metadata.measure.title("Current Version").cellData.value % 1 !=0){
 
cellData.style.backgroundColor = '#fffcae';
}
 });
 
var columns = [6,0]; //select the date columns that should be transformed
var colors = ['yellow','white']; //color when true, color when false
//condition_value = '1.2' //set to the desired condition value
 
widget.on('ready', function(se, ev){
$.each(columns, function(index, value){
num = $("tbody tr:first").children().length - value;
var e = element;
var w = widget;
var d = dashboard;
 
$("tbody tr" , e).not('.wrapper, .p-head-content').each(function(){
var cell = $(this).children().last();
for (var a = 0; a < num; a++){
cell = cell.prev();
}
 
var cell_value = cell.text()
if ( cell_value % 1 != 0 && cell_value !== "Current Version"  && cell_value !== "Days Since Last Version" && cell_value !== "it") {
$(cell).css("background-color", colors[0]);
}
else{
$(cell).css("background-color", colors[1]);
}
});
});
});

DRay
Community Team Member
Community Team Member

Hello @gds,

Can you have a look at this article and let us know if it helps?

https://community.sisense.com/t5/knowledge/pivot2-how-to-set-up-styles-with-the-scripts/ta-p/9437

David Raynor (DRay)
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]