Highlight table rows conditionally

You may not know but there is an easy trick to conditionally set the color of Maximo table rows based on a condition.

In this tutorial I will show you how to highlight high priority work orders in Work Order Tracking application.

Identify the field

First of all you need to identify the field on which the rule will be based on. In our example, the rule will be based on WORKORDER.WOPRIORITY field.

Use the ALT+F1 combination to find the exact field name.

Modify the application XML

Open the Application Designer and export the WOTRACK application XML. Open the XML file in your favorite editor (I always use Notepad++), and search for the first table.

<table datasrc="results_showlist" id="results_showlist" ...

This is the table for the workorder list. Now add the following code just before the </tablebody> tag.

  <displayrule id="results_showlist_rule" dataattribute="wopriority">
    <range id="results_showlist_rule1" lower="1" upper="1" classname="bgred"/>
    <range id="results_showlist_rule2" lower="2" upper="2" classname="bgorange"/>

Now import the modified XML file back into Application Designer.


Open the Work Order Tracking application and you should see something like this.


You can tailor the formatting of each row using any style available in the maximo.css file. Here are few of them.

.txtbold        { font-weight:bold; }
.txtitalic      { font-style:italic; }
.txtstrike      { text-decoration: line-through; }
.txtuppercase   { text-transform: uppercase; }
.txtlowercase   { text-transform: lowercase; }
.txtunderline   { text-decoration: underline; }
.anchor         { text-decoration: underline; color: #4178be; }
.anchor:hover   { text-decoration: underline; color: #5aaafa; }

.txtblack       { color:#000000; }
.txtred         { color:#FF0005; }
.txtgreen       { color:#00FF00; }
.txtdarkgreen   { color:#00BB00; }
.txtblue        { color:#0000FF; }
.txtdarkblue    { color:#000080; }
.txtmaroon      { color:#800000; }
.txtpurple      { color:#880088; }
.txtorange      { color:#FFA500; }
.txtyellow      { color:#FFEE00; }
.txtgray        { color:#C0C0C0; }
.txtwhite       { color:#FFFFFF; }

.bgblack        { background-color:#000000; }
.bgred          { background-color:#FF0005; }
.bggreen        { background-color:#00FF00; }
.bgdarkgreen    { background-color:#00BB00; }
.bgblue         { background-color:#0000FF; }
.bgdarkblue     { background-color:#000080; }
.bgmaroon       { background-color:#800000; }
.bgpurple       { background-color:#880088; }
.bgorange       { background-color:#FFA500; }
.bgyellow       { background-color:#FFEE00; }
.bggray         { background-color:#C0C0C0; }
.bgwhite        { background-color:#FFFFFF; }

You can also combine more styles separating them with a space like in the following example.

<displayrule id="results_showlist_rule" dataattribute="wopriority">
  <range id="results_showlist_rule1" lower="1" upper="1" classname="txtbold txtred"/>
  <range id="results_showlist_rule2" lower="2" upper="2" classname="txtbold txtorange"/>


Highlight table rows conditionally

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top