How To Set a Custom Renderer in Search Builder

With DCM 6.3+, developers can set a custom renderer to the columns that already have a system renderer.

---

Replacing System Renderer

1. Edit the column settings.
   

   

2. Call the system renderer (State Name Color) and then remove the background colors for the cell. Check the following code as an example of removing the background color for Milestone.
   

   

   
   

   Example of Custom Renderer

   function (value, metaData, record) {
   const { previousRenderFn } = config,   // getting previous System Renderer from column config object
           { tdCls, tdStyle } = metaData; // getting classes and styles before calling system render
   let result = '';
   
   if (previousRenderFn) {
     result = previousRenderFn(...arguments);
     Ext.apply(metaData, { tdCls, tdStyle }); // set previous classes and styles
   }
   return result;
   }

   JS

   
   

3. Check the changes.
   Before
   

   

   
   After
   

   

Adding Custom Renderer

1. Edit the column settings. In our example, Car Year has not a System Renderer.
   

   

2. Check the following code as an example of setting the color for the Car Year field.
   

   Example Code of Custom Renderer

   function (value, metaData, record) {
       me = this,
       { options } = config, // getting column options from column config object
       isObjView = me.lookupViewModel().get('isObjView'),
           renderControlConfig = options.get('RENDERCONTROLCONFIG'); // getting system renderer config from column options
       let result = '';
   
       if (record.get('ID') < 0 && !isObjView) {
           result = record.get('_' + options.OBJECTCODE + '_REFNAME');
       } else {
           result = record.get(renderControlConfig.get('name'));
           if (record.get(renderControlConfig.get('value').replace('_VALUE', '_CODE')) === 'CRITICAL') { // setting custom styles
               metaData.tdStyle = 'color: blue; font-weight: 900;';
           }
       }
       return result;
   }

   JS
3. Check the changes.
   Before
   

   

   
   After