Configure Redwood List Page Fields Using Custom Field Templates

You can customize how a field is displayed in the Redwood list page by applying a custom field template. A field template defines the properties and styling details for the contents of the field. For example, you can create a field template for displaying the Rank of a Lead in different colors based on its value such as red for Hot, orange for Warm and blue for Cold.  

Some of the benefits of using custom field templates include:

  • Faster visual scanning and decision-making - Instantly recognize status, priority, or category without reading text, reducing cognitive load and speeding up everyday tasks.
  • Better usability for high-density lists - Icons and color signals convey information efficiently, keeping list pages clean and readable even when many records are shown.
  • Easier Navigation - You can also use custom field templates to create links to 3rd party apps / webpages which will allow easy and quick navigation. 

Steps to enable and configure

The implementation differs slightly for Standard objects and Custom objects

Implementation path for Standard objects: 

       Open Visual Builder Studio

  1. Enable field templates for the page
    1. Navigate to the list page on which you need to enable custom field template. We will take the example of Accounts. So go to accounts-list page.
    2. Go to the Variables tab
    3. Here you will see a new constant already in the list called "advancedConfiguration". This will have the value 
      {
        "enableTemplates": false
      }
    4. Change the value of enableTemplates to true. 
  2. Create a field template
    1. Go to the Layouts tab and search for the name of the object, Account in this case. 
    2. You will find 2 nodes, Accounts (plural) and Account (singular). Double click on the Account (singular) node. 
    3. Go to the Templates subtab. Click Create Template button. 
    4. Give it a name and ID and click Create.
    5. Go to Code mode and define your template based on the desired behavior. 
      Example for a field to show up in red text color. 
      <template id="redTemplate">
          <div styles"color:red;">
          <oj-bind-text value="[[ $value |]"></oj-bind-text></div>
      </template>
  3. Add a template map
    1. Go to the Rule Sets subtab. Here you will see a Dynamic Table entry already existing called as Adaptive List. In case of Accounts it will be Accounts Adaptive List. 
    2. Duplicate this existing layout and go to the new entry's edit mode. 
    3. Go to the JSON subtab 
    4. Look for the "layout" entry under AdaptiveListLayout. Add a new property "fieldTemplateMap" within "layout", 
    5. Here you need to add and entry to associate a field to a template. Field name to be provided should be the Adaptive Search REST field name. 
      Example entry: 
      "fieldTemplateMap": {
           "AccountName": "redTemplate"
      } 

Implementation path for Custom objects: 

  1. Get the service connection 
    1. Go to CX Extenstion Generator and cerate a new extension. Include the custom object for which you want to enable Custom Field Templates. For example, ZEM_Auto2. 
    2. Go to Visual Builder Studio and import this new extension file. 
    3.  This is will create a new service connection calles "cx_custom_adaptive_search" if it does not already exist. 
  2. Enable field templates for the page
    1. Navigate to the list page on which you need to enable custom field template. In our example it will be zem_auto2_c-list page.
    2. Go to the Variables tab
    3. Here you will see a new constant already in the list called "advancedConfiguration". This will have the value 
      {
        "enableTemplates": false
        "layoutId": "AdaptiveListLayout",
        "serviceConnectionId": "site_cxsales_Extension:cx_custom_adaptive_search"
      }
    4. Change the value of enableTemplates to true. 
  3. Create a new Layout 
    1. Go to the Layouts tab 
    2. Click on + icon to create a new Layout
    3. Under Services, expand the cx_custom_adaptive_search node and look for the /data/object entry. In our example it will look like /data/ZEM_Auto2_c
    4. Select it and hit Create
  4. Create a field template
    1. Within the newly creates Layout, go to the Templates subtab. Click Create Template button. 
    2. Give it a name and ID and click Create.
    3. Go to Code mode and define your template based on the desired behavior. 
      Example for a field to show up in blue text color. 

      <template id="myRecordNameTemplate">
          <span style="color:blue">
          <oj-input-text value="{{ $value }}" label-hint="[[ $label-hint ]]" valid="{{ $fieldValid }}"></oj-input-text>
          </span>
      </template>

  5. Create Rule Set
    1. Within the newly created Layout, go to the Rule Sets tab. Click Create Rule Set. 
    2. Select Component as Dynamic Table and give the ID as "AdaptiveListLayout" 
  6. Update display propeties and add a template map
    1. Go to the JSON subtab 
    2. Look for the "layout" entry under AdaptiveListLayout and locate "displayProperties" 
    3. Add the following value to it 
      "displayProperties": "{{ $componentContext.dynamicFields }}"
      This gets the metadata from the saved searches and shows it in the table in runtime. 
    4. Within "layout", after displayProperties, add a new property "fieldTemplateMap" 
    5. Here you need to add and entry to associate a field to a template. Field name to be provided should be the Adaptive Search REST field name. 
      Example entry: 
      "fieldTemplateMap": {
           "RecordName": "myRecordNameTemplate"
      }