XPages Tip: Dynamically Set Row Colors in a View or Repeat Control Based on Data

In a recent post, Kathy Brown showed how to alternate row colors, in XPages. In this post, I’ll show how to take that a step further and dynamically set the row color based on data in the row.

You can compute the style class of each row in a view panel or repeat control (or data table or data view, etc), so you have the ability to check the data in each view entry and set a style class accordingly. Let’s start with the view panel.

In my example, I have a list of tasks. When a task is about to expire, I want the row to appear with a yellow background. When the task has expired, I want the row to appear with a red background.

Here’s a View Panel using this technique:

Dynamic Row Styling Part 1 - View

Here’s a Repeat Control:
Dynamic Row Styling Part 1

This requires 3 steps:

  1. Create CSS style classes for the row colors (and include the style sheet on the page)
  2. Set the var property of the view panel
  3. Compute the style class to use for the row, based on the data

1. Create CSS Style Classes for the Row Colors

I have defined these styles in a style sheet that is included on my page:

.yellowRow {
background-color: #FFFF00;
}

.redRow {
background-color: #FF0000;
}

2. Set the var property of the view panel

In order to compute the class based on data in each view entry, we need to have the ability to read data from the view entry. The var property of the view panel gives us that handle.

Dynamic Row Styling Part 1 - View Var Property

3. Compute the style class to use for the row, based on the data

Now that I have styles defined and a handle to the view entry, I can compute the style class for each row. To do so, select the view panel properties, select the Style subtab, and select the rowClasses property. Next to the Class property, click on the diamond to open up an SSJS window and add the code to compute the style class.

Dynamic Row Styling Part 1 - View Property

This code will read the value of the ‘status’ column and return a class name to use for the row accordingly.

var status = varTask.getColumnValue('Status');
var cssClass = '';

if (status == 'Expiring') {
  cssClass = 'yellowRow';
} else if (status == 'Late') {
  cssClass = 'redRow';
}

return cssClass;

Working with a Repeat Control

All of the same concepts apply. The difference is that you don’t have a built-in styleClass property to use. Assuming your repeat control contains a table, you can compute the style class on the xp:tr tag within the xp:repeat tag.

It can be difficult to try to select the xp:tr tag directly, but you can click on the first cell in the row and then locate the xp:tr tag either via the Outline view or in the page source. Once you have the xp:tr tag selected, you can compute its styleClass property and use the same code as shown above, provided you have defined the same var name for the repeat control.

Dynamic Row Styling Part 1 - Repeat

Advertisements

7 responses to “XPages Tip: Dynamically Set Row Colors in a View or Repeat Control Based on Data”

  1. yusrancorp says :

    For my view rows I have a case where using predefined classes is not practical, and I need to specify styling directly produced by the script. Is this somehow possible?

    • Brad Balassaitis says :

      Absolutely — instead of computing the styleClass property, compute the style property, which you can find under All Properties > styling > style when the xp:tr tag is selected.

      In the page source, it will show up as an xp:this.style tag within the xp:tr tag.

      • yusrancorp says :

        Many thanks for your kind reply, Brad.
        Actually, I couldn’t find an xp:tr tag in the view panel control, so I improvised, and added the script to the style property of the column, like this:

        But I had to repeat the process to all columns, and that required caching the result of the script. It works great now 🙂

      • Brad Balassaitis says :

        Makes sense — I was just looking at an example of a repeat control with a table. Thanks for sharing your solution for the view panel!

  2. yusrancorp says :

    Oops, the comment field has hid my xml code… here it is without brackets:
    xp:viewColumn -> xp:this.style ->
    ![CDATA[#{javascript: return(getCellStyle(); }]]

  3. Nyein Mon Soe says :

    Hello Mr.Balassaitis,
    I would like to add these style class whenever I filter the view panel in a specific. But when I filter on an event, view panel’s var (“varTask”) not found error is occured. How can I solve them? Please, kindly help me.

    • Brad Balassaitis says :

      It sounds like you may be trying to access the view panel variable from outside of the view panel, but it generally will not work because it’s outside of the scope.

      If you want to style rows conditionally based on the value from some filter, then you could either put the filter value in a scope variable and check that scope variable in the code that computes the style on each row or you could have the code that computes the style on each row read the value from the filter directly via getComponent(‘MyFilterField’).getValue(). (The first option would be more efficient.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: