Display multi-select picklist as multi-select checkboxes

Use Case :- To improve user experience, we can implement multi-select picklist as multi-select checkboxes on a page.

Steps to accomplish this :-

1.     Create a Page and a extensions for the page. Can't use custom controller assuming that we need to override new button of the custom object.

2.     Extensions Code as below:-

public class newcustomobjectextension {

    public CustomObject pr{get; set;}

     //initialize

    public newproductrequestcontroller(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.CustomMultiSelectPicklist.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.CustomMultiSelectPicklist!=null && this.pr.CustomMultiSelectPicklist.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.CustomMultiSelectPicklist= selectedConcat;

     }

   } 

   

   //create record

   public PageReference savepr() {

        insert pr;

        return (new PageReference('/'+pr.id));

   }

}

3.Page code as below:-

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

 <apex:form id="prform">

 <apex:pageBlock id="prblock">

   <apex:pageBlockSection title="Purpose of Request" id="prmain"><br/><br/><br/>

    <font color="red"><b><i>How will this software 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:pageblockButtons location="bottom">

    <apex:commandButton action="{!savepr}" value="Create Request"/>

    <apex:commandButton action="{!cancel}" value="Cancel"/>

   </apex:pageblockButtons>

  </apex:pageBlock>

 </apex:form>  

</apex:page> 

4.Now override the new button of the custom object with this page.