Written by

Question Peter Kopp · Apr 4, 2017

Different tablepane cell background colors depending on the value of a cell.

Has anybody created a way to change the background color of a cell depending on the value contained in the cell. This is simple when only one background color is required. However, if there is a requirement for several different colors depending on the value of the cell, the out of the box <condition/> approach does not suffice. Thank you for any feedback.

Comments

Fabian Haupt · Apr 4, 2017

If the condition is not sufficient, you can always roll your own rendering code for cells, using: ondrawcell

0
Peter Kopp  Apr 4, 2017 to Fabian Haupt

I attempted this. Perhaps you could point out the error of my ways?

Method SetAlertColor(pTable As %ZEN.Component.tablePane, pName As %String, pSeed As %String) As %Status
{
 if (%query(pName)>30) //Orange.
  {
   //Normal:
   //s pSeed=%query(pName)
   //&html<<div> #(pSeed)#</div>>
       
   //Attempt01:
   //&html<<div style="color:#FF6600">#(pSeed)#</div>> 

   //Attempt02:
   //s pSeed="<div style="_Chr(34)_"color:#FF6600>"_Chr(34)_%query(pName)_"</div>"
   //&html<#(pSeed)#> 
  }
 if (%query(pName)>60) //Red
  {
  }
    
    q $$$OK
}

0
Fabian Haupt  Apr 4, 2017 to Peter Kopp

Hi Peter,

a couple of things:

  • You're trying to write out the numbers twice. Everything that is >60 is also >30.
  • The css style for background is background-color. See CSS reference

This works for me:

Method SetAlertColor(pTable As %ZEN.Component.tablePane, pName As %String, pSeed As %String) As %Status
{
	s val=%query(pName),col=""
 	if (val>60)
  	{
	  	s col="#FF0000"
  	} elseif val>30{
  		s col="#FF6600"
  	} else {
  		s col="#AAAAAA"
  	}	
    &html<<div style="background-color:#(col)#">#(val)#</div>> 
    q $$$OK
}
0
Peter Kopp  Apr 5, 2017 to Fabian Haupt

Thank you for sharing your expertise. Have a great day.

0