Picklist as Select buttons – Symphonix

Status

Release Available	Status	Framework Name
2.10	Current	MUI
4.3	Current	MUI

Default Value

"optionText": "Agriculture", "optionValue": "Agriculture", "optionRender": "$this.attr(Rating); == \"Cold\""

General

Picklist can be rendered as Select buttons with either prefix or suffix or both prefix and suffix icons, it supports all the Material icons. It also supports selectedSuffix and selectedPrefix options for the select buttons

Code JSON

"fieldType": "selectbuttons","label": "Account Type",
  "selectOptions": [{
          "id": "Prospect","active": true, "defaultOption": false,
           "optionText": "Prospect", "optionValue": "Prospect",
                                "optionPrefix": "home",
                                "optionSuffix": "done"                            },
        “selectedPrefix” : “ “,
        “selectedSuffix : “

Prefix and Suffix icons for Picklist & Radio buttons

Material icons can be added as prefix or suffix or both to radio buttons and Picklist as options

Code JSON

"fieldType": "selectbuttons","label": "Account Type",
  "selectOptions": [{
          "id": "Prospect","active": true, "defaultOption": false,
           "optionText": "Prospect", "optionValue": "Prospect",
                                "optionPrefix": "home",
                                "optionSuffix": "done"                            },

Making Picklist Accessible when rendered as Select or Radio buttons

With the Portal 4.3 release, the radio buttons are accessible. To make them accessible, the Portal Administrator can use the ariaLabel property. This property adds a name to the field when they are rendered in a list view and separates the options from multiple picklists.

Code JSON

{
  "id": "565c3b05-945c-4e42-80b2-b5bd9571b971",
  "fieldName": "radioPicklist__c",
  "fieldUi": {
    "fieldType": "radiobuttons",
    "label": "radioPicklist",
    "selectOptions": [
      {
        "id": "Head Phones",
        "active": true,
        "defaultOption": false,
        "optionText": "Head Phones",
        "optionValue": "Head Phones"      },
      {
        "id": "Laptop",
        "active": true,
        "defaultOption": false,
        "optionText": "Laptop",
        "optionValue": "Laptop"      },
      {
        "id": "Phone",
        "active": true,
        "defaultOption": false,
        "optionText": "Phone",
        "optionValue": "Phone"      }
    ],
    "ariaLabel": "radioPicklist"  }
}