Format Row Values in a Table Conditionally

You can use a column template to specify row-specific formatting for particular values in a table column.

Suppose, for instance, that your table has a Salary column and you want to display the values that fall above a certain level in bold. In your table, you can represent the Salary field of the business object as a separate column template, so that you can define the format for this field.

1. In the JavaScript for the page, define a PageModule function that determines the format you want to show. This code defines a weight function to set the font weight:

   PageModule.prototype.weight = function(salary) {    
       if (salary > 2000) {
           return "bold";    
       }    
       return "normal";  
   };

2. To create the column template, drag and drop a Text component onto the existing field, then click the Code button for the page.

3. Surround the field with a span element within the template element. Make sure to put a colon in front of the style attribute.

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

   When the page is displayed, all salary values above 2000 appear in bold.