Multi-Value Status Indicator (MVSI)

Compact view for narrow horizontal space (e.g., phone).

The current highlighted status is always displayed below the dotted line.

Code JSON

"fieldName": "Application_Status",
"fieldUi": {
  "fieldType": "multiValueIndicator",
  "defaultValue": "Underwriting",
  "selectOptions": [{
    "optionText": "Processing",
    "optionValue": "Processing",
    
  },...],
  "format": { "compact": true }
  
}

The indicator can be configured to be expansible for extra information of each value.

Code JSON

"fieldUi": {
  "fieldType": "multiValueIndicator",
  "expansible": true,
  "expansibleIcons": {
    "expanded": "<span class=\"fa fa-angle-double-down\"/>",
    "collapsed": "<span class=\"fa fa-angle-double-up\"/>"    
  },
  "selectOptions": [{
    "optionText": "Processing",
    "optionValue": "Processing",
    "optionExpansionContent": "..."    
  },...],

Expanded content is in the paragraph. The information about the current highlighted status is indented.