Creating A Multi-Select Picklist As Checkbox In Salesforce Visualforce Pages

Creating A Multi-Select Picklist As Checkbox In Salesforce Visualforce Pages


Visualforce is a web development framework that enables developers to build sophisticated, custom user interfaces for mobile and desktop apps that can be hosted on the Lightning Platform. You can use Visualforce to build apps that align with the styling of Lightning Experience, as well as your own completely custom interface. Visualforce enables developers to extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps. Use powerful built-in standard controller features, or write your own custom business logic in Apex. You can build functionality for your own organization, or create apps for sale in the AppExchange.

Visualforce app development is familiar to anyone who has built web apps. Developers create Visualforce pages by composing components, HTML, and optional styling elements. Visualforce can integrate with any standard web technology or JavaScript framework to allow for a more animated and rich user interface. Each page is accessible by a unique URL. When someone accesses a page the server performs any data processing required by the page, renders the page into HTML, and returns the results to the browser for display.

Visualforce pages are basic building blocks for application developers. A Visualforce page is similar to a standard Web page but includes powerful features to access, display, and update your organization’s data. Pages can be referenced and invoked via a unique URL, just as they would be on a traditional web server. Visualforce uses a tag-based markup language that’s similar to HTML. Each Visualforce tag corresponds to a coarse or fine-grained user interface component, such as a section of a page, a list view, or an individual field. Visualforce boasts nearly 150 built-in components and provides a way for developers to create their own components. Visualforce markup can be freely mixed with HTML markup, CSS styles, and JavaScript libraries, giving you considerable flexibility in how you implement your app’s user interface.

Salesforce provides a range of ways that you can use Visualforce within your organization. You can extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps.

Before going to the Developer console for the Visualforce page, create a custom object "MultiselectPicklist" and a field and relationship type picklist "Interests" and insert a value that you want to show.

Step 1: Create a Visualforce page

Firstly we have to create a Visualforce Page and for that Go to setup->Developer console, At Developer, console Click on New to create a Visualforce page and use the code mentioned below:

MultiSelect.vfp (VisualForce Page)

<apex:page standardController="MultiselectPicklist__c" extensions="MultiSelectApex" tabStyle="MultiselectPicklist__c">
            <apex:pageblockSection title="Interests/Hobbies" columns="1" collapsible="false">
                <apex:selectcheckboxes layout="pageDirection"  value="{!Items}" label="Interests">                   
                    <apex:selectoptions value="{!getPicklistValue}"/>      

Step 2: Create an Apex class that fetch the record from the Visualforce Page

Apex is a strongly typed, object-oriented programming language that you use to execute code in your Salesforce instance. The Apex syntax is similar to Java and also includes built-in support for database operations.

MultiSelectApex.apxc (Apex Class)

public class MultiSelectApex {
    public MultiselectPicklist__c MultiselectPicklist {get;set;}     
    public MultiSelectApex(ApexPages.StandardController stdCtrl) {
        MultiselectPicklist = (MultiselectPicklist__c)stdCtrl.getRecord();
    public List<SelectOption> getPicklistValue {
        get {
            List<SelectOption> options = new List<SelectOption>();
            for( Schema.PicklistEntry obj : MultiselectPicklist__c.Interests__c.getDescribe().getPicklistValues()) {
                options.add(new SelectOption(obj.getValue(), obj.getLabel()));
            return options;
    public String[] Items { 
        get {
            List<String> selected = new List<String>();
            List<SelectOption> options = this.getPicklistValue;
            for(SelectOption obj : options) {
                if (this.MultiselectPicklist.Interests__c !=null && this.MultiselectPicklist.Interests__c.contains(obj.getValue()))
            return selected;
        }public set {
            String selectedCheckBox = '';
            for(String s : value) {
                if (selectedCheckBox == '') 
                    selectedCheckBox += s;
                else selectedCheckBox += ';' + s;
            MultiselectPicklist.Interests__c = selectedCheckBox;

Step 3: Test the Application

Popular Salesforce Blogs