CSS Color Coding for FCC Columns

19.22 CSS Color Coding for FCC Columns

This section explains how to configure color coding in FCC ECM columns.

To configure color coding in FCC ECM columns, follow these steps:

Navigate to the FCC_UI_MODULE_CONF table in the atomic schema.
Search for the grid where the desired CSS must be implemented. For example:
```
select * from fcc_ui_module_conf where v_ui_module_id='CM_CS_CASELIST_GRID'
```

In the V_MODULE_PROP column, add the following configuration under the column properties of the desired column where CSS must be implemented:

Type is externalStyle
Level is cell
externalCssFunction specifies the JavaScript function name where the externalCSS class will be decided based on user-defined validation.
```
"formats": [{"type": "externalStyle", "level": "cell", "externalCssFunction": "<<javascriptfunctionname>>"}]
```

For example:

{               "locale_code":
        "RENDERER.CS_PRIORITY",               "headerAlign":
        "left",               "visible":
        true,               "draggable":
        true,               "resizable":
        true,               "dataType":
        "string",               "width":
        "0.07",               "readOnly":
        true,               "sortable":
        true,               "align":
        "left",               "addToColMenu":
        true,               "key":
        "priority",               "formats":
        [{"type": "externalStyle", "level": "cell", "externalCssFunction":
        "colorCodeHandlerForSearchCase"}]  }

The next step is to define the JavaScript function which will return the CSS class based on a user-defined validation. For example, the sample JavaScript function is displayed following that allows for color coding of Priority and Due Date column in Case List.

Figure 19-34 CSS Color Coding for FCC Columns
The JavaScript function mentioned in Step 4 can be defined in a custom JS file and that custom JavaScript file can be added in ECM as follows:
- Copy the custom JavaScript file to the <<deployedarea>>/ojff/js/appCommon directory.
- Go to the <<deployedarea>>/ojff/js/viewModels/aai-ecm.js. In aai-ecm.js directory, add entry for the JavaScript file in the defined block. For example, if your custom JavaScript file name is customValidator.js, then add as shown in the following image:
  
  Figure 19-35 Custom JavaScript file
- The external css classname mentioned in Step 4 should be defined in the <<deployed_path>>/ ojff/css/appCss/OFS_NGECM.css file.
- Clear browser cache and access the grid. The custom CSS will come into effect.
  
  Note:
  You can switch off the configuration if not required. To switch off the color-coding feature, remove the formats attribute from the column level configuration done in FCC_UI_MODULE_CONF.
  
  Sample Screenshot
  
  Figure 19-36 Sample Screenshot