9/2/2019 Conditional Formatting Row Values in a Table in Visual Builder | Oracle Visual Builder Cloud Service Blog

Oracle Visual Builder Cloud Service Blog

 MENU

Oracle Visual Builder Cloud Service Blog

The Visual Builder Cloud Service Blog

Try Oracle Cloud Platform

For Free

ORACLE VISUAL BUILDER CLOUD SERVICE

March 28, 2019

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:

https://blogs.oracle.com/vbcs/conditional-formatting-row-values-in-a-table-in-visual-builder 1/5
9/2/2019 Conditional Formatting Row Values in a Table in Visual Builder | Oracle Visual Builder Cloud Service Blog

1 PageModule.prototype.color = function(salary){
2 if (salary > 2000) {
3 return "red";
4 }
5 return "blue";
6 }
7

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:

1
https://blogs.oracle.com/vbcs/conditional-formatting-row-values-in-a-table-in-visual-builder 2/5
9/2/2019 Conditional Formatting Row Values in a Table in Visual Builder | Oracle Visual Builder Cloud Service Blog

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

The result will be something like this:

Join the discussion

https://blogs.oracle.com/vbcs/conditional-formatting-row-values-in-a-table-in-visual-builder 3/5
9/2/2019 Conditional Formatting Row Values in a Table in Visual Builder | Oracle Visual Builder Cloud Service Blog

Comments ( 4 )

Recent Content

ORACLE VISUAL BUILDER CLOUD ORACLE VISUAL BUILDER CLOUD

SERVICE SERVICE
Complex Queries in Visual Builder Adventures in Mutation - Adding
Rows to a Table or ListView in Oracle
Often, you have to filter a data set
Visual Builder
based on multiple search criteria
like in the above image. In this
case, you want to only create...

Site Map Legal Notices Terms of Use Privacy Cookie Preferences Ad Choices

Oracle Content Marketing Login

https://blogs.oracle.com/vbcs/conditional-formatting-row-values-in-a-table-in-visual-builder 4/5
9/2/2019 Conditional Formatting Row Values in a Table in Visual Builder | Oracle Visual Builder Cloud Service Blog

https://blogs.oracle.com/vbcs/conditional-formatting-row-values-in-a-table-in-visual-builder 5/5