The Visual Builder Cloud Service Blog

Conditional Formatting Row Values in a Table in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

Color can help highlight important data in your application, calling out specific information you want the user to pay attention to. For example, if you have values that need special attention in a table of data, you might want to highlight them with a different color. Formatting an individual field is quite trivial, but when trying to do this for rows in a table you might need a bit of help. Here is the recipe:

Assuming the decision of which format to show is a bit more complex than what can be represented as a simple EL, you'll want to use a pagemodule function that determine the format you want to show. Something like this:

  PageModule.prototype.color = function(salary){
    if (salary > 2000) {
      return "red";
    return "blue";

Then in your table, you'll want to have the specific field represented as a separate column template, which will then let you define the format for this field. To get this - drag and drop a Text component onto the existing field (see this "table tips" blog for a video about this approach). You'll then surround the field with a span component that you will format like this:

        <template slot="Salary">
        <span :style.color="{{$page.functions.color($current.data)}}">
          <oj-bind-text value="[[$current.data]]">

The result will be something like this:

Color coded table



Join the discussion

Comments ( 4 )
  • Subburaj Saturday, July 27, 2019
    Great Example. If I want to change the color of all the fields in the table (entire row conditionally based on value of one of the field in table ), how do I do that.

    Thanks for your help
  • Shay Shmeltzer Tuesday, August 6, 2019
    Subburaj - for that you'll need to use a row renderer approach right now and color the TR tag.
    However, I think a better approach to highlighting a row would be to have a column at the start that contains an LED gauge that uses color or shape to indicate what is unique about the row - https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=ledGauge&demo=ledGaugeComponent
  • Brandon Indradjaja Wednesday, August 7, 2019

    I am trying to perform this same function on background colors rather than the color of the texts, how do I go about doing that?

    Reason being I have tried different approaches based on your guidance. Your response would be of great help much thanks :D
  • Shay Shmeltzer Wednesday, August 7, 2019
    These type of questions are better answered on our forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
    You should be able to switch from color to background-color in the tag.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.