Picklist as Select buttons
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
Copy
"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
Copy
"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
Copy
{
"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" }
}