Implement multi-select picklist as multi-select checkboxes on a page, for improving the User Experience

Use Case

Implement multi-select picklist as multi-select checkboxes on a page, for improving the User Experience.

Solution

Use the following VF page code and the controller class login for the use case

Code Snippet

·         Controller

public class CustomObjectExtension {

    public CustomObject pr{get; set;}

     //initialize

    public CustomObjectExtension (ApexPages.StandardController controller){

      pr=new CustomObject();

    }

  

    //get the multi-select pick list values

    public List<SelectOption> MPOptions {

     get {

       List<SelectOption> options = new List<SelectOption>();

       for( Schema.PicklistEntry f : CustomObject.Multi_Select__c.getDescribe().getPicklistValues()) {

         options.add(new SelectOption(f.getValue(), f.getLabel()));

        }

       return options;

     } 

     set;

    }

   

    //get and set the multi-select pick list as checkboxes

    public String[] MPItems {

     get {

        String[] selected = new List<String>();

        List<SelectOption> sos = this.MPOptions;

        for(SelectOption s : sos) {

        if (this.pr.Multi_Select__c!=null && this.pr.Multi_Select__c.contains(s.getValue()))

           selected.add(s.getValue());

        }

        return selected;

     }public set {

        String selectedConcat = '';

        for(String s : value) {

         if (selectedConcat == '')

           selectedConcat += s;

         else selectedConcat += ';' + s;

        }

        pr.Multi_Select__c= selectedConcat;

     }

   }

} 

·         VF Page

<apex:page standardController="CustomObject" extensions="CustomObjectExtension" id="prpage">

<apex:form id="prform">

<apex:pageBlock id="prblock">

   <apex:pageBlockSection title="View the picklist values" id="prmain"><br/><br/><br/>

    <font><b><i>Which picklist values to be used(select the most relevant)?</i></b></font><br/>

    <center>

     <apex:selectCheckboxes value="{!MPItems}" layout="pageDirection" required="true" id="prodreq">

       <apex:selectOptions value="{!MPOptions}"/>

     </apex:selectCheckboxes>

    </center>

   </apex:pageBlockSection>

  </apex:pageBlock>

</apex:form> 

</apex:page>