MultiPicklist Lightning Experience Problem Solved

By -

When we create a Visualforce Page and in which we can use Multipicklist. It work well in Salesforce Classic but somehow not work in Lightning Experience. We can say a small bug in Salesforce. But every problem has a solution. So, here is the solution below: Demo Video : https://youtu.be/OwWT2WkrsiY

Apex Class


public class MultipicklistSelect{
    public list<SelectOption> lstHobbiesOption {get;set;}
    public Account acc {get;set;}
    public List<String> lstSelectedHobbies {get;set;}
   
   
    public MultipicklistSelect(){
        fetchTrainedBy();
        acc = new Account();
        lstSelectedHobbies = new List<String>();
    }
   
    public void fetchTrainedBy(){
       
        lstHobbiesOption = new List<SelectOption>();
       
        Schema.DescribeFieldResult fieldResult =
            Account.Hobbies__c.getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
       
        for( Schema.PicklistEntry f : ple){
            lstHobbiesOption.add(new SelectOption(f.getLabel(), f.getValue()));
        }      
    }
   
   
    public pageReference doSave(){
        String trainedBy = '';
        Boolean Start = true;
        if(!lstSelectedHobbies.isEmpty()) {          
            for(String Str : lstSelectedHobbies) {
                if(Start) {
                    trainedBy = Str;
                    Start = false;
                } else {              
                    trainedBy = trainedBy + ';' + Str;
                }
            }
        }
        acc.Hobbies__c = trainedBy;
        insert acc;
       
        pageReference pg = new pagereference('/'+acc.id);
        pg.setRedirect(false);
        return pg;
    }
}


Visualforce Page:

<apex:page controller="MultipicklistSelect" cache="false" showHeader="false" sidebar="false">
    <html>
        <head>
            <title>Create Candidate</title>
            <meta charset="utf-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <apex:stylesheet value="{!URLFOR($Resource.MultipicklistSelect,'css/bootstrap.min.css')}"/>
            <apex:includeScript value="{!URLFOR($Resource.MultipicklistSelect,'js/jquery-2.2.4.min.js')}"/>
            <apex:includeScript value="{!URLFOR($Resource.MultipicklistSelect,'js/bootstrap.min.js')}"/>
            <apex:styleSheet value="{!URLFOR($Resource.MultipicklistSelect,'css/bootstrap-multiselect.css')}"/>
            <apex:includeScript value="{!URLFOR($Resource.MultipicklistSelect,'js/bootstrap-multiselect.js')}"/>
            <style>
                .form-group{
                padding:1% !important;
                }
                .scrollBar{
                max-height: 18rem;
                overflow-y: auto;
                }
                .btn-default {
                color: #333 !important;
                background-color: #fff !important;
                border-color: #ccc !important;
                }
               
                .btn {
                display: inline-block !important;
                margin-bottom: 0!important;
                font-weight: normal !important;
                text-align: center !important;
                vertical-align: middle !important;
                touch-action: manipulation !important;
                cursor: pointer !important;
                background-image: none !important;
                border: 1px solid transparent ;
                white-space: nowrap !important;
                padding: 6px 12px !important;
                font-size: 14px !important;
                line-height: 1.42857143 !important;
                border-radius: 4px !important;
                -webkit-user-select: none !important;
                -moz-user-select: none !important;
                -ms-user-select: none !important;
                user-select: none !important;
                }
            </style>
        </head>
        <body>
           
            <apex:form id="frm">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="yrOfGrad">Name</label>
                    <div class="col-sm-6">
                        <apex:inputField value="{!acc.Name}" styleclass="form-control" required="true" id="yrOfGrad"/>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom: 4.5% !important;">
                    <label class="control-label col-sm-2" for="trainedas">Hobbies</label>
                    <div class="col-sm-6">
                        <apex:selectList value="{!lstSelectedHobbies}" id="demo" styleclass="demo" multiselect="true" size="5">
                            <apex:selectOptions value="{!lstHobbiesOption}"/>
                        </apex:selectList>
                    </div>
                </div>
                <center>
                <apex:commandButton id="creg" action="{!doSave}"  styleClass="btn btn-default" value="Save" />
                </center>
            </apex:form>
           
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.demo').multiselect({
                       optionLabel: function(element){
                            return $(element).attr('label') || $(element).text();
                        },
                       
                        onChange : function(option, checked) {
                            console.log("@console.log-->option:"+JSON.stringify(option));
                            console.log("@console.log-->option:"+(option).val());
                            console.log("@console.log-->checked:"+checked);
                        },
                       
                        onDropdownShow: function(event) {
                           
                        },
                       
                        onDropdownHide: function(event) {
                           
                        },
                       
                        onDropdownShown: function(event) {
                           
                        },
                       
                        onDropdownHidden: function(event) {
                           
                        },
                       
                        onSelectAll: function() {
                           
                            console.log('@console.log-->ALlSelectedVales:'+($('[Id$=demo]').val()));
                        },
                        enableHTML: false,
                        buttonClass: 'btn btn-default',
                        inheritClass: false,
                        buttonWidth: 'auto',
                        buttonContainer: '<div class="btn-group" />',
                        dropRight: false,
                        selectedClass: 'active',
                        
maxHeight: false,
                        //checkboxName: false,
                        includeSelectAllOption: false,
                        includeSelectAllIfMoreThan: 0,
                        selectAllText: ' Select all',
                        selectAllValue: 'multiselect-all',
                        includeSelectAllOption:true,
                        selectAllName: true,
                        selectAllNumber: true,
                        enableFiltering: true,
                        enableCaseInsensitiveFiltering: false,
                        enableClickableOptGroups: false,
                        filterPlaceholder: 'Search',
                        // possible options: 'text', 'value', 'both'
                        filterBehavior: 'text',
                        includeFilterClearBtn: true,
                        preventInputChangeEvent: false,
                        nonSelectedText: 'None selected',
                        nSelectedText: 'selected',
                        allSelectedText: 'All selected',
                        numberDisplayed: 3,
                        disableIfEmpty: false,
                        delimiter: ', ',
                        templates: {
                            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
                            ul: '<ul class="multiselect-container dropdown-menu scrollBar"></ul>',
                            filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
                            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
                            li: '<li><a tabindex="0"><label></label></a></li>',
                            divider: '<li class="multiselect-item divider"></li>',
                            liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
                        }
                    });
                   
                });
     
     
            </script>

        </body>
    </html>
</apex:page>

Screenshot  

Comments

  1. Anonymous26 June 2018 at 11:29

    WOW !!!!!!

    ReplyDelete
  2. Anonymous26 June 2018 at 11:31

    I am following You. You are doing Good job bro. Appreciated !!!!

    ReplyDelete
  3. Anonymous24 February 2020 at 11:04

    !!He is too good.

    ReplyDelete
  4. Anonymous4 December 2022 at 10:12

    The common rule right here is that the more on line casino video games, the better. However, let’s be trustworthy – when you select a on line casino that provides thousands of actual money video games to check out at no cost, you won’t actually undergo all of them. It might even be a drawback because of the paradox 퍼스트카지노 of selection. Aside from free and actual money on line casino video games, Ignition additionally features virtual sports and reside supplier video games. Bovada has almost 200 on line casino video games find a way to|you possibly can} play, and over half of them are slot machines.

    ReplyDelete

Post a Comment

Popular posts from this blog

Service Cloud for Lightning Experience - All Steps Q&A [Salesforce][Trailhead]

By -
Service Cloud for Lightning Experience: Step 1 1. What is the Service Cloud? Ans. An easy-to-use customer service application 2. What are key benefits of the Lightning Service Console? Ans. Preconfigured pages and productivity tools for service 3. To update a customer case with a comment: Ans. Select a case from the Cases tab, and share a post. ------------------------------------------------------------- Service Cloud for Lightning Experience: Administer Service Cloud (Step2) 1. What are two key benefits of Lightning Service Setup? Ans. Service metrics and setup flows 2. To get to Lightning Service Setup: Ans. Click the gear icon, then Service Setup. 3. The second stage in the setup process for Service Cloud is to: Ans. Add channels so that your team can respond to customers. ------------------------------------------------------------- Service Cloud for Lightning Experience:  Create Digital Engagement on Multiple Channels 1. On-Demand Email-to-Case: Ans. Sends email traffic outsi...
Read more

Salesforce Process Builder in Brief (Learning/Interview)

By -
  1. What is  Process Builder ? Process Builder helps you automate your business processes and gives you a graphical representation as you build it. 2. How Many Type  of Processes? Process Builder supports three types of processes for your automation needs. The type determines what triggers the process. A record change process starts when a record is created or updated. An event process starts when a platform event message is received. An invocable process starts when something else, like another process, invokes it. 3. Process Builder vs. Workflow? Use the more powerful and flexible Process Builder to perform the same actions as Workflow. With Process Builder, you can: Create a record of any object type Update any related record—not just the record or its parent Use a quick action to create a record, update a record, or log a call Invoke a process from another process Launch a flow—you can’t schedule this action with workflow Send an email Send a custom notification Post...
Read more

Cloud Computing

By -
Image
Cloud computing is the delivery of computing services—including servers, storage, databases, networking, software, analytics, and intelligence—over the Internet (“the cloud”) to offer faster innovation, flexible resources, and economies of scale. You typically pay only for cloud services you use, helping lower your operating costs, run your infrastructure more efficiently and scale as your business needs change. By Sam Johnston - Created by Sam Johnston using OmniGroup's OmniGraffle and Inkscape (includes Computer.svg by Sasa Stefanovic)This W3C-unspecified vector image was created with Inkscape., CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=6080417 Top benefits of cloud computing: Cost:  Cloud computing eliminates the capital expense of buying hardware and software and setting up and running on-site datacenters—the racks of servers, the round-the-clock electricity for power and cooling, the IT experts for managing the infrastructure. It adds up fast...
Read more

Copado Winter 21 Administrator Maintenance Dumps

By -
As we are trying hard to provide you latest questions and answers of Copado. Please do comment over the post and follow us on our Instagram Profile  SFDCMASTER Answer should be in Green Color. 1. What are some of the benefits of upgrading to Copado Winter '21? Select all that apply (3 answers).You have reached the max number of allowed answers a) You can integrate with external tools for which there is no built-in integration. b) You can avoid migrating duplicate records with an easy-to-build formula that populates external Id values. c) You get more meaningful information on your processes with new metrics and the option to filter custom metrics.  d) You need to uninstall the previous package and install the new one in order to upgrade and enjoy the new features of the Agile Integrations package. 2. Which deployment step allows you to trigger a Salesforce Flow as part of your deployment? a) Flow. b) URL Callout. c) Salesforce Flow. d) External CI. 3. True or False: Copado has...
Read more

Einstein Analytics Data Preparation Specialist

By -
Hi guys, In this post, you will know how to open "Einstein Analytics Data Preparation Specialist" Superbadge. Click here to redirect to Superbadge   To unlock your Superbadge you have to complete 4 Prerequisites Badges. Einstein Analytics Administration Basics Einstein Analytics Data Integration Basics Einstein Analytics Desktop Exploration You need to create Developer org for Einstein (It is free). There is another module through which you can learn how to setup developer org for Einstein and got new badge as well. Click Here Solution "Einstein Analytics Administration Basics"   - Click here Solution "Einstein Analytics Data Integration Basics" - Click here Solution "Einstein Analytics Desktop Exploration"     - Click here
Read more