Multi-picklist Field rendered as checkboxes – Symphonix

Introduced a new field type as

multiSelectCheckboxes

that can render a multi-picklist data type field as check boxes on Portal.

Note

The filter also supports the Multi-picklist field as a checkbox functionality.

Code JSON

"fieldUi": {
     "fieldType": "multiSelectCheckboxes",
      "label": "Select Countries",
      "selectOptions": [{
                 "id": "India",
                  "active": true,
                  "defaultOption": false,
                                "optionText": "India",
                                "optionValue": "India"                            },{
                                "id": "USA",
                                "active": true,
                                "defaultOption": false,
                                "optionText": "USA",
                                "optionValue": "USA"                            } …... ]

Multi-picklist Field rendered as checkboxes.png

Status

Release Available	Status	Framework Name
3.9	Current	MUI only

Controlling the number of columns to render the options

By using the below configuration in the actor appearance section, we can configure the number of columns needed to render the options. For example, in the below configuration, we are showing the options in three columns.

Code JSON

"grid": {
        "field": {
            "multiPicklistCheckboxes__c": {
                "selectCheckbox": {
                    "sm": 4,
                    "xs": 12
                }
            }
        }
    },

Multi-picklist Field rendered as checkboxes2.png

Enable or Disable Multi-picklist Field rendered as checkboxes

The Portal allows you to lock a row if it was already checked in the back-end. Use the enableRecord and enableSelectAll configurations for Multi-picklist Field rendered as checkboxes, so that a record that is selected previously can be disabled based on that condition.

Code JSON

"appearance": {
    "multipleSelections": true,
    "multipleSelectionOptions": {
      "renderSelectAll": true,
      "renderRecord": true,
      "enableRecord": "not($global.attr(previouslySelectedIds).contains($this.attr(id);",
      "enableSelectAll": true
    }
  }

Where, previouslySelectedIds is an array of strings that should be declared on a global value.