How to populate a <lightning:CheckboxGroup with a Multi Select Picklist field

Question

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

apple;orange;banana

Answer 1

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

<aura:component>
    <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"
                             label="Fruit"
                             options="{! v.options }"
                             value="{! v.data }"
                             onchange="{! c.handleChange }"/>
</aura:component>

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(';');
},