UI page, set color on a table row based on value in the row

[dan_b]

Hello SN community!

I have a UI page that uses some jelly to pull back some records for certain teams and then pops them into a table. See below for a stripped down version of what I am doing essentially.

For example the query starts:

<g:evaluate var="jvar_sd2" object="true">

    var gr = new GlideRecord("change_request");

    gr.addQuery("active", true);

    gr.addQuery('assignment_group','sysidgoeshere');

    gr.query();

    gr;

</g:evaluate>

Then I draw a table:

<table>

  <tr>

  <th>CHG</th>

  </tr>

  <tr>

    <td><j:if test="${jvar_sd2.next()}">

    ${jvar_sd2.getRowCount()}

</j:if></td>

  </tr>

</table>

Now the value gets passed into the table but I would like to change the colour of this table cell based on the value in it! For example should this value go higher than 100 then turn it amber, higher than 150 then turn it red etc.

Can you point me in the right direction to do this, am I barking up the wrong tree?

Thanks!

[tltoulson · Accepted solution]

Hi Daniel,

You will need to combine the idea of g:evaluate and JEXL expressions with the HTML class attribute in a manner similar to this:

<style>

       .amber {

                   background-color: <hex color here>


       }



       .red {

                   background-color: red;

       }



       .green {

                   background-color: green;

       }

</style>

<g:evaluate>

       var color;



       if (<value> > 150) {

                   color = 'red';

       }

       else if (<value> > 100) {

                   color = 'amber';

       }

       else {

                   color = 'green';

       }

</g:evaluate>

Then in your table, you can apply a dynamic style using JEXL like this:

<td class="${color}"></td>

[dan_b]

This works like a dream- thank you Travis!

[Deepthi25]

Hi Dan,

Could you please send me the full code . I have similar requirement as same.