The business landscape has become typically hostile and to sustain in this competitive environment, businesses must implement a robust CRM system that stays agile and relevant. Today, almost every business irrespective of their size and domain has realized the significance of implementing a robust system like Salesforce. While Salesforce promises optimal processes, improved efficiency and better business outcomes, it’s crucial to consider the edition, which organizations have stuck to.
So, if your organization is still using the classic version of Salesforce, it’s time for Salesforce Lightning Migration. There are several key differences between Salesforce Classic and Lightning Experience that make adoption essential for businesses aiming to stay competitive
Boost Business Efficiency with Salesforce Classic to Lightning Migration
Salesforce Lightning – representing the next generation of Salesforce signifies a gradual shift as to how organizations connect with the platform. This smart and outcome-driven platform offers an intuitive interface that is designed to help teams function more effectively, ensure informed and faster decision-making along with improved scalability.
With the Salesforce Lightning Experience offering AI-driven features, automation tools, and augmented analytics—the shift is no longer discretionary. It has become a strategic imperative.
This article throws light on Salesforce Classic to Lightning migration along with a step-by-step approach.
Why Shifting to Salesforce Lightning Experience Matters?
User Experience
Salesforce Lightning offers an intuitive interface with active components, tailor-made pages, and quicker navigation. It shows detailed data in a single view, reducing the need to toggle across multiple screens while aiding users work more efficiently.
Built-in Tools
Lightning includes native features such as Path, Kanban views, Workspace tabs and more. This enables teams to manage work efficiently without relying on third-party tools.
Advanced AI
With access to powerful capabilities such as Einstein AI, AI-driven insights and more, Lightning also offers features that aren’t a part of the Salesforce Classic edition and are crucial for intelligent automation.
Future Readiness
The product roadmap of Salesforce is Lightning-first. This means new features, security developments, and innovations are being built solely for the Lightning Experience. This confirms organizations remain secure, scalable and prepared for future developments.
Step-by-step Guide to Ensure Successful Migration from Classic to Lightning Experience
Step 1: Assess Your Current Salesforce Classic Environment
For a successful transition, a thorough assessment of your existing Classic setup is required. Start by assessing patterns to comprehend which teams depend on Classic, how often they access the platform, and which objects and features they utilize most. This insight helps focus on migration efforts, recognize high-impact areas, and ensure a seamless and targeted shift to Lightning. Some Salesforce Classic components might not be well-suited with Lightning and will require to be restructured using Lightning Web Components or substituted with usual Lightning functionality. Review your AppExchange applications to ensure they enable Lightning Experience. While most modern apps are Lightning-ready, outdated solutions may need upgrades, replacement or reconfiguration to ensure compatibility and performance.
Step 2: Lightning Readiness Check
Salesforce offers in-built Lightning Readiness Check that serves as a crucial diagnostic point for businesses planning the migration from Classic. The Readiness Check assesses the compatibility of the existing features of the Lightning identifies supported objects and workflows, highlights risk of user adoption, and assesses overall business impact. By running the Readiness Check from Salesforce Setup, teams get visibility into what will work and what requires redress, and what might not function as anticipated in Lightning. This insight helps businesses avoid amazement while building a realistic and informed transition roadmap.
Step 3: Define Your Transition Strategy
Defining a clear strategy for transition is crucial, as there is no standard approach to migration. The right strategy relies on several factors including but not limited to business complexity, user engagement, and the extent of customization. Common approaches include a phased rollout, department-based shift, and a complete switch, which is suitable for small organizations with minimal needs for customization.
Step 4: Prepare your Salesforce Org
This could be done by emphasizing on the required technical aspects once your strategy is in place. Lightning Experience can be activated without turning off Salesforce Classic, while allowing users to temporarily switch back during the transition period. Next, organize role-based Lightning Apps for various teams. Each app can be tailored with navigation, pertinent objects, and more to support workflows and augment user productivity.
Step 5: Modernizing Customization
It is a critical step in the transition to Salesforce Lightning, as various elements built for Classic need to be updated. For this JavaScript buttons present in Classic and not supported in Lightning should be substituted with Lightning-ready substitutes. Shifting Visualforce pages to Lightning components might offer better performance and a more spontaneous user experience. Additionally, legacy workflows and process builders should be augmented using Lightning-native Flow Builder, which offers flexible, powerful and scalable automation capabilities.
Step 6: Focusing on user adoption
This is crucial, as technology might not alone assure a successful Lightning transition. Organizations must communicate the reason behind the change by emphasizing personal benefits such as reduced manual effort, quick access to information, and enhanced insights, rather than focusing on business objectives. Providing role-based training for service agents, sales reps, managers, etc. ensures effectiveness, with demos proving way more effective than basic presentations. Additionally, utilizing in-app guidance helps users learn features of Lightning directly within the platform. This reinforces adoption through routine use.
Step 7: Run a Pilot Program
Before rolling out Lightning organization wide in order to validate the experience in a real-world setting, it’s crucial to run a pilot. The pilot should focus on finding usability gaps, confirming customization, assembling practical user feedback, and gauging efficiency enhancements.
Step 8: Optimizing Performance and Security
It is a critical step in ensuring a seamless Lightning Experience. While Lightning offers optimized performance, further enhancements help maximize reliability. This includes removing unexploited fields and components, streamlining reports and dashboards, and reducing dependence on heavy Visualforce pages to improve page load times. At the same time, security settings should be studied to ensure everything aligns with Lightning navigation and access patterns. This maintains both usability, as well as robust access control.
Step 9: Roll-out Lightning
Once testing and optimization are over, Lightning should be rolled out to users. A steady approach allows admins to control the pace of rollout by activating access through permission sets. During this stage, it is crucial to monitor metrics such as login frequency, usage feature, task completion rates, and user feedback.
Final Words: (and Your Next Best Action)
Salesforce Classic to Lightning Migration isn’t just a technical upgrade. It showcases a significant business transformation. Organizations that take a deliberate approach gain quick workflows, insights, and a more scalable CRM foundation. So, sooner you adopt Lightning Experience, the quicker you can shift from outdated systems for driving growth and customer engagement.
As a prominent name in the cloud CRM space, Salesforce is being leveraged by organizations to manage customer relationships, as well as their business processes. Today, several forward-looking businesses including small and medium sized businesses are considering implementing this robust platform within their business ecosystem. By associating with an experienced Salesforce Consulting Partner, businesses are making the most of this platform to drive business growth and efficiency by automating processes, streamlining customer data and fortifying networks.
What is Salesforce Lightning?
Salesforce Lightning includes a set of applications, designed to help organizations manage their operations efficiently. Ever since the launch of this powerful and intuitive UI (user interface) framework i.e. Salesforce Lightning – businesses have enjoyed improved user experience, streamlined workflows, and augmented productivity. This component-based framework has helped businesses maintain their digital presence by helping them build applications on the Salesforce platform without any coding or development knowledge. This powerful, and enhanced version of CRM has the potential to maximize sales productivity, offer meaningful data insights, and transform the way people make a purchase.
What Should Businesses Consider Migrating from Salesforce Classic to Lightning?
While many organizations have already upgrade from Salesforce classic to Lightning, there are several others that are still hesitant to make a move. The reason might be ignorance about benefits of Salesforce Lightning, apprehension about missing features, and the fear of disrupting their business operations. While the Lightning platform had certain limitations, it has evolved significantly over the years. By providing a more visually pleasing, receptive, and adaptable user interface, Lightning offers a suite of powerful tools and features that enable businesses to streamline their businesses processes.
Augmented User Experience: Salesforce Lightning is known to have an intuitive interface, which is a noteworthy improvement over the classic version. While the changes might not seem obvious, the overall experience is strikingly smoother and faster. In fact, the interface is fully responsive, providing users with an optimum experience across different devices. The drag-and-drop functionality of the Lightning App builder allows users to tailor the platform as per their unique business needs.
Mobile-first: Salesforce Lightning can be easily accessed on mobile devices such as tablets and smartphones. In fact, users can easily access its functions even without the need for an internet connection. This advantage enables team members to work remotely or on the go. This not just boosts their output but also the overall performance of the organization.
Advanced Reporting and Analytics: With Salesforce Lightning, organizations can utilize the reporting and analytics capabilities of this platform, including Salesforce Einstein. Salesforce Einstein offers intelligent insights into their data. Lightning enables the creation of dynamic reports by conducting data analysis, and envisaging data through graphs and charts, which leads to more informed decision-making.
Improved Sales Productivity: Lightning equips sales teams with user-friendly features like customizable dashboards, automation tools and more. These functionalities help sales reps manage opportunities, leads and workflows thereby driving augmented productivity and better sales results.
Seamless Integration: Salesforce Lightning can easily integrate with a wide range of third-party system, applications, and services, enabling businesses to centralize their data and streamline operations. Recognizing evolving business needs, the platform offers Salesforce integration services to boost efficiency and provide a single view of customer related information.
Personalization: Salesforce Lightning allows businesses to tailor the platform to meet their unique needs. Users can create custom fields, dashboards, and pages to providing a personalized experience that supports their exclusive business processes.
What are Benefits of Utilizing Salesforce Lightning?
Customer satisfaction is at the heart of business success. Listed below are the business benefit of implementing this platform.
Time Efficiency: Salesforce Lightning offers several features for optimizing time usage, which enhances business efficiency through efficient time management.
Effective Sales Pipeline: Disorganized data is a major obstacle to an effectual pipeline. Salesforce Lightning offers an ingenious solution to this issue through its visual representation of the pipeline.
Better Collaboration: Salesforce Lightning offers features such as chatter that foster team collaboration through real-time information and document sharing.
The Bottom Line
Salesforce Lightning marks a major dive in the CRM landscape, transforming the way organizations handle customer relationships. Its user-friendly interface, wide range of features, and continual evolution make it a robust solution for all the teams. If you are still on the fence whether your business should migrate to Salesforce Lightning, make sure to get in touch with one of the best Salesforce Consultants.
In this era of cut-throat competition, organizations should ensure a smooth and better customer experience to sustain positive business growth. In fact, retaining existing customers and acquiring new ones depends largely on the way a company interacts with its customers. Yet, only 1% of the customers are capable of measuring their customer engagement.
One of the primary reasons why a company fails to connect with its customers completely is its inability to accumulate and utilize crucial data, which they can leverage to gain insights for creating operational customer strategies. This calls the need for an intelligent solution that can enable organizations to explore new ways to connect with their customers, and Salesforce Lightning is one such platform.
Built on the Salesforce UI framework, Salesforce Lightning involves a collection of tools and technologies that can be utilized to draw insights about customer engagement. This app development platform not just helps in driving business growth but also boosts user experience. Today, organizations especially those leveraging Salesforce have realized the potential of the Lightning platform and consider it to be a superior choice to any other options available in the market. It makes sense to seek support from one of the best Salesforce partners to know more about the Lightning platform.
Endowed with enhanced features, the Lightning platform allows users to develop strong customer relationships while finding new ways of interacting with customers. Listed below are some significant benefits of Salesforce Lightning that help you to better connect with your customers:
Quick Building of Apps: The components available in Salesforce Lightning kick start the building of apps that too without the need for any coding. The components available act as building blocks that combine to create new apps. This saves the time and effort of building apps from scratch besides the trouble of optimizing your apps as the components can do so for different devices. Apart from this, additional components from App Exchange can be used to develop the foundation of your app, which you can customize as per the specific needs of your company.
Availability of Quality Resources: Besides the provision of building robust apps with the help of tools and methods, the Lightning ecosystem offers components that can be leveraged to add new functionalities that otherwise seemed impossible without the help of a developer. Moreover, the quality of applications isn’t compromised as the components used to build them are derived from reliable resources. Since, reviews of these apps are gathered from experienced users, customer engagement increases.
Drives Innovation: Developing mobile apps has become significant for enhancing customer business as it helps to personalize communication. The drag and drop functionality of the Lightning platform encourages innovation as it is packed with customizable components.
Syndicates User Experience: To remain competitive, organizations need to set their products/ services apart from the competitors. By providing experience with a live-in experience, organizations can get an edge over their competitors. The Lightning Design System equips organizations with a ‘How-To guide’ that provides organizations the power to build user-friendly components. Thus, it becomes easy to develop custom apps that sync with the main capabilities of Salesforce without the requirement for reverse engineering.
Provide Engaging Experience: Although Lightning was developed with mobile devices in mind, it also included the desktop within the design and experience and was ultimately employed across app design, service, sales, and communities, which provides an engaging face to your company.
Final Words:
To provide customers with an engaging and enriching experience, organizations should encourage customer-centricity. The Salesforce Lightning platform helps in driving engagement by providing a sturdy environment along with robust features for creating a great user experience. So, if you are looking to migrate to the Salesforce Lightning platform, you must consider getting in touch with a reputed Salesforce Lighting company.
Salesforce is the most trusted name in the world of CRM software. Salesforce has taken customizability to the next level by allowing its customers to choose between two different user interfaces: Salesforce Lightning, and Salesforce Classic.
Salesforce Classic as the name suggests is the original and older version whereas Salesforce Lightning is the new version that carries several new features that aren’t available with ‘Classic’. What’s new in Salesforce Lightning? Salesforce Lightning is the latest version of the salesforce org’s interface. The intuitive and intelligent design will empower users to navigate the platform seamlessly and work with greater efficiency. This will influence better decisions and help teams to close more deals From Campaign, Leads, Contacts, and Accounts to Opportunity, Pricebook, and Products, etc everything has been re-organized to provide a modern visual appeal. The intent behind redesigning the interface was to make the tool,as well as the data more accessible to Sales Reps so that they can close more deals that too quickly. Let’s take a quick look at the Opportunity display screens images displayed below to draw a clear comparison between the two versions i.e. Salesforce classic and Salesforce Lightning:
Salesforce Lightning Screen
Salesforce Classic Screen
Listed below are some features which have been introduced in SalesforceLightning:
Customizable Home Page: Users can now customize their home page. Now they can show the information they need the most on the Homepage.
Enhanced Reporting Lightning has the Lightning Report Builder which helps in creating improved reports. It also provides improved and efficient visual reporting which saves time involved in creating and reading reports.
Columns on Dashboard In Lightning, Dashboards are not confined to 3 columns anymore.
Activity Timeline With this Sales Reps can now easily keep a track of their planned and accomplished activities for a specific lead, account or opportunity.
Lighting Experience Lightning Experience comes with no extra cost.
In the below image you can see list of new features introduced in Salesforce Lightning.
Source of the above table – https://trailhead.salesforce.com/en/content/learn/modules/lex_migration_introduction/lex_migration_introduction_rightforme
Key Benefits of Salesforce Lightning:
Integration with Einstein AnalyticsEinstein Integration is available in both the Classic and Lightning Version of Salesforce for creating reports and dashboards, but the Lightning version has more integration with Einstein as compared to the Classic.Einstein is a game-changer in itself as it carries its own database that fetches the data from salesforce instance and updates reports and dashboards each hour automatically. It even comes with features like:
Export Dashboard as a picture.
Ability to edit widget on dashboard.
Ability to do advance formula calculation.
Improved Security Salesforce Lightning comes with enhanced security features like ‘Locker Service’. Locker Service helps in safeguarding the platform from malicious data by preventing Lightning components to interact with each other. Besides this ‘Locker’ uses the Content Security Policy to prevent cross-site scripting, which helps in avoiding code injecting attacks.
Opportunities Kanban View It is a visualization tool for opportunities. In the Kanban view, Opportunities are displayed as cards. The lanes/columns in Kanban view represent the different stages of the Opportunity.
Sales Reps can now change the Opportunity stage by simply dragging them from one column to another. Sales Reps can even customize, and personalize alerts on key deals.
New Design One of the major differences between the old and the new version of the salesforce is the User Interface. The Salesforce Lightning offers a better UI experience to its users as it includes features like news about key accounts and deals and performance charts, which were unavailable in the Classic version.
No Extra Cost Salesforce Lightning doesn’t cost an extra penny more than theSalesforce Classic and remains pretty much the same. Long-time users of the Salesforce Classic can move to Salesforce Lightning without paying anything extra for a new license.
Features Unavailable in Salesforce Lightning Listed below are some of the features that are unavailable in the new version:
Custom JavaScript Buttons: Custom buttons that have JavaScript running in the backend in the Classic version will no longer be supported in Lightning. In the Lightning you will be able to replace JavaScript content by using tools like Process Builder, Visual Workflow, etc.
Apps from AppExchange: Many apps that were working in theSalesforce Classic will not be supported in Salesforce Lightning unless they are made Lightning Ready. If any app is not supported in Salesforce Lightning, even then you can continue to use them in Salesforce Classic.
Search: Salesforcehas completely revamped the way search used to work in Salesforce Lightning by removing the Sidebar Search and the Search All button.
Which one should we Opt for? As the sayings goes “Old is Gold but New is Diamond”, in the same way Salesforce Classic was something huge in the early 2000’s but with revamped UI, enhanced analytics, better security, etc. Salesforce Lightning has become a preferred choice. Though the new version i.e Salesforce Lightning offers several new features over its classic counterpart, it’s important to measure the pros and cons of both the system before making a shift.
About Girikon –
As a Salesforce consulting partner, Girikon is an excellent Salesforce Implementation Partner as it helps businesses in the effective implementation of the Salesforce CRM.
In the early 90s and 2000s, customer service was about face to face communication, emails, and telephone contact. After the arrival of the Internet of Things (IoT), the face of customer service changed for good.
Let’s get into the nitty-gritty detail to know what Internet of Things (IoT) is. Internet of Things (IoT) is the network of physical devices, vehicles, home appliances, and other software items which are connected to the internet and enables these devices to connect, collect and behave as per the surrounding environments using embedded sensors, processors and communication hardware.
With the evolution of CRM, smartphones and cloud-based application Internet of Things is growing and becoming stronger day by day.
Haven’t we all imagined a smart home where lights are turned on automatically as you enter home. At morning when you get up, your favorite music starts and an automatic kitchen where the coffee pot starts brewing when you come out of the washroom.
The above things seemed like a science fantasy movie a few years back but thanks to the Internet of Things (IoT), now these all are possible. All the home appliances, smart devices are connected and communicate with each other which makes this wonder happen.
If the Internet of Things (IoT) add magic into your day to day life then just imagine the benefits it will bring into the customer service sector. According to a report of Gartner, 8.4 billion connected things will be in use worldwide in 2017, up 31 percent from 2016, and will reach 20.4 billion by 2020.
IoT also makes machine smart. Smart products can identify faults, communicate with the technical support and initiate actions to resolve them. All this happens before your customer is even aware of the issue.
With the help of Salesforce IoT, your support team can easily track the actual usage and new opportunities emerge from that data. Before that, you have to find out useful IoT data for your business. Now with the help of Salesforce IoT, you can actually create program based on your own idea with minimal coding in the Lightning Platform.
After implementing IoT for your business, it is really important to organize and manage volumes of data. A small volume of data can be managed easily but if you have a large volume of data we have another solution called Einstein.
Einstein will assist you with data on how to manage it and based on the activities and trends. For example, it will assign data to the team to solve an issue, flag them as per the requirement.
That’s all folks for today. That’s all for this article, in case you require Salesforce Implementation Partners or Salesforce IoT expert, then please feel free to reach out to us at sales@girikon.com
Here, I am displaying
Salesforce Lightning
modal with a progress indicator in footer using Lightning component.
In this article, you will be able to open a modal on button click, close the modal, and add a progress indicator in the footer.
Let’s start the process step by step:
Step 1: Create Lightning component ProgressIndicator.cmp
<aura:component >
<aura:attribute name="showpage1" type="boolean" default="true"/>
<aura:attribute name="showpage2" type="boolean" default="false"/>
<aura:attribute name="showpage3" type="boolean" default="false"/>
<aura:attribute name="openModal" type="boolean" default="false"/>
<aura:attribute name="currentstep" type="String" default="step1"/>
<lightning:button variant="brand" label="Open" onclick="{!c.openModal}" />
<aura:if isTrue="{!v.openModal}">
<section role="dialog" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
...
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</aura:component>
Step 2: Create Lightning controller ProgressIndicatorController.js
({
openModal : function(component) {
component.set("v.openModal", true);
},
page1 : function(component) {
component.set("v.showpage1", true);
component.set("v.showpage2", false);
component.set("v.showpage3", false);
component.set("v.currentstep", "step1");
},
page2 : function(component) {
component.set("v.showpage2", true);
component.set("v.showpage1", false);
component.set("v.showpage3", false);
component.set("v.currentstep", "step2");
},
page3 : function(component) {
component.set("v.showpage3", true);
component.set("v.showpage1", false);
component.set("v.showpage2", false);
component.set("v.currentstep", "step3");
},
hideModal : function(component) {
component.set("v.openModal", false);
}
})
Step 3: Create Lightning app to preview the component
<aura:application extends="force:slds">
<c:ProgressIndicator/>
</aura:application>
I am going to show to create custom multiselect component using
salesforce lightning design system static HTML.
Here I am retrieving data from custom object in list and populate in options and making options multiselect.
Follow the below process step by step then you will be able to create multiselect picklist: –
Step 1: Create lightning component “MultiSelectComponent.cmp” and use below code.
<aura:component controller="ExpenseOptionsCtr">
<aura:attribute name="lstExpenseData" type="Expense__c[]" />
<aura:handler name="init" action="{!c.doInit}" value="{!this}"></aura:handler>
<c:QFMultiSelectUIComp options_="{!v.lstExpenseData}" />
</aura:component>
When you will save this code then it will fail to save because we didn’t create “QFMultiSelectUIComp” till now. Before we create this component let we should create MultiSelectComponentController and MultiSelectComponentHelper . Now follow next step.
Step 2: Create lightning component controller “MultiSelectComponentController.js” and use below code.
({
doInit : function(component, event, helper) {
helper.expenseDetails(component, event, helper);
}
})
Step 3: Create lightning component helper “MultiSelectComponentHelper.js” and use below code.
({
expenseDetails : function(component, event, helper) {
var action = component.get("c.getExpenseDetails"); //Calling Apex class controller 'getTemplateRecrod' method
action.setCallback(this, function(res) {
var state = res.getState();
if (state === "SUCCESS") {
component.set("v.lstExpenseData", res.getReturnValue());
} else {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Error :",
"mode": "sticky",
"message": res.getError()[0].message
});
toastEvent.fire();
}
});
$A.enqueueAction(action);
}
})
We defined the controller “ExpenseOptionsCtr” in component so now create controller .
Step 4: Create apex controller “ExpenseOptionsCtr.apxc” , in this getting data from custom object Expense__c but you can use any object.
public class ExpenseOptionsCtr {
@AuraEnabled
public static List<Expense__c> getExpenseDetails(){
List<Expense__c> lstExpense=[Select Id,Name From Expense__c];
return lstExpense;
}
}
Step 5: Create lightning component “QFMultiSelectUIComp.cmp” and use below code.
<aura:component >
<aura:attribute name="MultipleoptnId" type="object" />
<aura:attribute name="options_" type="String[]" />
<aura:attribute name="selectedItems" type="String[]" />
<aura:attribute name="infoText" type="String" default="Select an option..." />
<aura:attribute name="width" type="String" default="245px;" />
<aura:attribute name="dropdownLength" type="Integer" default="4" />
<aura:registerEvent name="selectChange" type="c:SelectChange" />
<aura:method name="reInit" action="{!c.init}" description="Allows the lookup to be reinitalized">
</aura:method>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="dropdownOver" type="Boolean" default="false" />
<div aura:id="main-div" class=" slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click ">
<button class="slds-button slds-button--neutral slds-picklist__label" style="{!'width:' + v.width }" aria-haspopup="true" onclick="{!c.handleClick}" onmouseleave="{!c.handleMouseOutButton}">
<span class="slds-truncate" title="{!v.infoText}">{!v.infoText}</span>
<lightning:icon iconName="utility:down" size="small" class="slds-icon" />
</button>
<div class="slds-dropdown slds-dropdown--left" onmouseenter="{!c.handleMouseEnter}" onmouseleave="{!c.handleMouseLeave}">
<ul class="{!'slds-dropdown__list slds-dropdown--length-' + v.dropdownLength}" role="menu">
<aura:iteration items="{!v.options_}" var="option">
<li class="{!'slds-dropdown__item ' + (option.selected ? 'slds-is-selected' : '')}" role="presentation" onclick="{!c.handleSelection}" data-value="{!option.Name}" data-selected="{!option.selected}">
<a href="javascript:void(0);" role="menuitemcheckbox" aria-checked="true" tabindex="0">
<span class="slds-truncate">
<lightning:icon iconName="utility:check" size="x-small" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small" />
{!option.Name}
</span>
</a>
</li>
</aura:iteration>
</ul>
</div>
</div>
</aura:component>
Do not panic if your code is not getting save. Just follow the complete process and save code in the last. It will save successfully.
Step 6: Create lightning component controller “QFMultiSelectUICompController.js” and use below code.
({
init: function(component, event, helper) {
var values = helper.getSelectedValues(component);
helper.setInfoText(component, values);
},
handleClick: function(component, event, helper) {
var mainDiv = component.find('main-div');
$A.util.addClass(mainDiv, 'slds-is-open');
},
handleSelection: function(component, event, helper) {
var item = event.currentTarget;
if (item && item.dataset) {
var value = item.dataset.value;
var selected = item.dataset.selected;
var options = component.get("v.options_");
//contro(ctrl) key ADDS to the list (unless clicking on a previously selected item)
//also, ctrl key does not close the dropdown (uses mouse out to do that)
if (event.ctrlKey) {
options.forEach(function(element) {
if (element.Name === value) {
element.selected = selected === "true" ? false : true;
}
});
} else {
options.forEach(function(element) {
if (element.Name === value) {
element.selected = selected === "true" ? false : true;
} else {
element.selected = false;
}
});
var mainDiv = component.find('main-div');
$A.util.removeClass(mainDiv, 'slds-is-open');
}
component.set("v.options_", options);
var values = helper.getSelectedValues(component);
var labels = helper.getSelectedLabels(component);
helper.setInfoText(component, labels);
helper.despatchSelectChangeEvent(component, values);
}
},
handleMouseLeave: function(component, event, helper) {
component.set("v.dropdownOver", false);
var mainDiv = component.find('main-div');
$A.util.removeClass(mainDiv, 'slds-is-open');
},
handleMouseEnter: function(component, event, helper) {
component.set("v.dropdownOver", true);
},
handleMouseOutButton: function(component, event, helper) {
window.setTimeout(
$A.getCallback(function() {
if (component.isValid()) {
//if dropdown over, user has hovered over the dropdown, so don't close.
if (component.get("v.dropdownOver")) {
return;
}
var mainDiv = component.find('main-div');
$A.util.removeClass(mainDiv, 'slds-is-open');
}
}), 200
);
}
})
Step 7: Create lightning component helper “MultiSelectComponentHelper.js” and use below code.
({
setInfoText: function(component, labels) {
if (labels.length === 0) {
component.set("v.infoText", "Select an option...");
}
if (labels.length === 1) {
component.set("v.infoText", labels[0]);
}
else if (labels.length > 1) {
component.set("v.infoText", labels.length + " options selected");
}
},
getSelectedValues: function(component){
var options = component.get("v.options_");
console.log('options:='+options);
var values = [];
if(options!==undefined){
options.forEach(function(element) {
if (element.selected) {
values.push(element.Name);
}
});
}
return values;
},
getSelectedLabels: function(component){
var options = component.get("v.options_");
var labels = [];
if(options!==undefined){
options.forEach(function(element) {
if (element.selected) {
labels.push(element.Name);
}
});
}
return labels;
},
despatchSelectChangeEvent: function(component,values){
var compEvent = component.getEvent("selectChange");
compEvent.setParams({ "values": values });
compEvent.fire();
}
})
Now you will save the code but it will not save because we didn’t create event right now.
Let’s create event “SelectChange.evt”
Step 8: Create lightning event “SelectChange.evt” and use below code.
<aura:event type="COMPONENT" description="Despatched when a select has changed value" >
<aura:attribute name="values" type="String[]" description="Selected values" access="global" />
</aura:event>
You can check – Salesforce consulting companySalesforce implementation partner