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



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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.