How to Show multi-picklist field on VF page using checkboxes and save their selected values back?

Question

I'm trying to show multi-picklist field on VF page. Ideally I should be able to show picklist values already selected and once user do selecting/unselecting some items, it should save back to database.

Below is my approach.

In controller class,

This Function provides generated select options for select radio/checkboxes in UI

public List<SelectOption> getSelectionOptions(Sobject Obj, String PicklistFieldName){
    Schema.sObjectType sobject_type = Obj.getSObjectType();
    Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();
    Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap();

    List<Schema.PicklistEntry> pick_list_values = field_map.get(PicklistFieldName).getDescribe().getPickListValues();
    List<selectOption> options = new List<selectOption>();

    for (Schema.PicklistEntry a : pick_list_values) {
        SelectOption so = new selectOption(a.getLabel(), a.getValue());
        //if (Obj[PicklistFieldName].contains(a.getLabel()))
            //so.setValue('true');
        options.add(so);
    }

    return options;
}

    // Get Options for multi-picklist
    public List<SelectOption> getOptions(){
       return getSelectionOptions(Obj,'multipickfield');
    }

In VF Page,

<apex:selectCheckboxes value="{!Obj.multipickfield}" layout="pageDirection">
    <apex:selectOptions value="{!Options}"></apex:selectOptions>
</apex:selectCheckboxes>

Checkboxes are displayed. But it's not correct the way it tries show the already selected values on VF page.

I'm not sure if this is the right way to achieve this. Anyone who has done it successfully, appreciate any guidance. Thanks.

Answer 1

Below is how I achieved it.

In VF Class,

//  MycheckBoxField
public String[] Checklist_MycheckBoxField { 
    get {return getMultipicklistField(MyObj,'MycheckBoxField');}
    set {setMultipicklistField(MyObj,'MycheckBoxField',value);}
} 

/* This Function provides generated select options for select radio/checkboxes in UI */
public List<SelectOption> getSelectionOptions(Sobject Obj, String PicklistFieldName){
    Schema.sObjectType sobject_type = Obj.getSObjectType();
    Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();

    Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap();

    List<Schema.PicklistEntry> pick_list_values = field_map.get(PicklistFieldName).getDescribe().getPickListValues();
    List<selectOption> options = new List<selectOption>();

    for (Schema.PicklistEntry a : pick_list_values) {
        SelectOption so = new selectOption(a.getLabel(), a.getValue());
        //if (Obj[PicklistFieldName].contains(a.getLabel()))
            //so.setValue('true');
        options.add(so);
    }

    return options;
}

// get the multi-select pick list as checkboxes
String[] getMultipicklistField(SObject obj,String FieldName){
    String[] selected = new List<String>();
    List<SelectOption> sos = getSelectionOptions(obj,FieldName);
    for(SelectOption s : sos) {
        if (obj.get(FieldName) !=null && String.valueOf(obj.get(FieldName)).contains(s.getValue()))
            selected.add(s.getValue());
    }
    return selected;
}

// set the multi-select pick list as checkboxes
void setMultipicklistField(SObject obj,String FieldName,String[] ValueList){
        String selectedCheckBox = '';
        for(String s : ValueList) {
            if (selectedCheckBox == '') 
                selectedCheckBox += s;
            else 
                selectedCheckBox += ';' + s;
        }
        obj.put(FieldName,selectedCheckBox);
}

//  GetMyChecklistitems
public List<SelectOption> getMyChecklistitems(){
    return getSelectionOptions(MyObj,'MyField');
}

And In VF page,

<apex:selectCheckboxes value="{!Checklist_MycheckBoxField}" layout="pageDirection">
   <apex:selectOptions value="{!MyChecklistitems}"></apex:selectOptions>
</apex:selectCheckboxes>