How do I populate a <lightning:CheckboxGroup with a multi select picklist field?

The <lightning:CheckboxGroup takes a string[]

And the mulit select picklist field returns a string


1 Answer 1


You need to convert data from string to array when you load and then back again when you save.

    <aura:attribute name="options" type="List" default="[
    {'label': 'apple', 'value': 'applie'},
    {'label': 'orange', 'value': 'orange'}
    {'label': 'banana', 'value': 'banana'}
    {'label': 'grape', 'value': 'grape'}

    <aura:attribute name="data" type="List" />

    <lightning:checkboxGroup name="Fruit"
                             options="{! v.options }"
                             value="{! v.data }"
                             onchange="{! c.handleChange }"/>

This method loads the data and calls a helper method:

loadData : function(cmp, data) {

   // get data from Apex controller

   data = this.splitString(data);

   cmp.set("v.data", data);


Using this helper method to split the string into an array

splitString : function(value){
    if (value == null) return null;  

    if(Array.isArray(value) == true) return value;

    return value.split(';');

And when saving:

saveData : function(cmp, data) {

   var data = cmp.get("v.data")

   // before saving 
   data = this.joinArray(data);

   // now save

Use this helper method to join the array back into a string

joinArray : function(value){
    if(value == null) return null;  

    if(Array.isArray(value) == false) return value;

    return value.join(';');

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .