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]]">
</oj-bind-text>
</span>
</template>
The result will be something like this: