Posts

Showing posts from 2020

New features in LWC

In Summer 20 release, Salesforce has launched some exciting features in LWC that I will be covering in this blog.  Communicate Across Salesforce UI Technologies with Lightning Message Service Lightning Message Service, which is popularly called as LMS is a technology used to communicate between the Lightning component (Aura and LWC) and Visualforce pages. Before the introduction of LMS, the recommended way to communicate between Lightning components was using window.postMessage. The major disadvantage with this approach is window.postMessage() is a standard web API that is not aware of the Lightning and Locker service namespace isolation level. As a result, there is no way to send a message to a specific namespace or to check which namespace a message is coming from. Therefore, messages sent using postMessage() should be limited to non-sensitive data and should not include sensitive data such as user data or cryptographic secrets. Since LMS is natively provided by Salesforce, it automa

Charts in LWC using 3rd party JavaScript library

Image
Today, we will have a look at how to draw charts in LWC. As of today, there is no lightning component available out of the box which provides us with the ability to display charts. But the good news is that we can use third-party JavaScript libraries in LWC to display a chart. In this blog, we will see how to use a popular third party JavaScript library called Chart.js in our LWC application. Want to try the application hands-on? Install the unmanaged package in your Salesforce developer org. A working version of this application can be accessed here . You need to perform the below steps in order to use any third-party library in a lightning web component: Download the 3rd party library, zip the file and upload it as a Static Resource in your Salesforce org. You can download Charts.js from here . Please note that I have used version 2.7.3 because the latest version of Charts.js is not compatible with the locker service. I figured this out after spending a day getting the l

COVID-19 tracker in LWC

Image
What's the best way to spend the weekend when the country is in lockdown mode - write some cool Lightning components. Over the weekend, I have created a single page application in LWC which gives you the live numbers of how many people are affected by the COVID-19 pandemic worldwide. In a single view, the application gives you an overview of how many people are affected globally. It also gives you the breakdown of the numbers on a per-country basis. You can filter the information by providing the desired country name. Also, besides each country's name is an info icon, which gives you more details for that specific country. You can install this application using the following unmanaged package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t6F000004LDId A live demo of the application is hosted on the following force.com site:  https://covid19-info-developer-edition.ap17.force.com/statistics  . Please note that this is a developer account and it allows

LWC: Audit log viewer using the infinite scrolling feature of the lightning data table

Image
Do you want to know what are the best practices when you want to display a large amount of data in your Lightning Web Component? If you know that your component has to display a large amount of data, consider using the lazy loading of data. Never display the data upfront which the user might never ask for. It is always a good practice to load the minimum required amount of data on the component load, and then load the subsequent data on demand. There are a lot of ways to implement lazy loading in lightning component and the simplest and most elegant way to implement lazy loading is by using the infinite scrolling feature provided as a part of the lightning data table. Today, we will build a lightning web component that displays the audit log history of the org using the lightning data table. Below are the key concepts that will be covered in this blog: 1) Use of infinite scrolling in the lightning data table 2) How to call apex method on initialization of a component 3) How to ma

Building an Org Role Hierarchy component in LWC

Image
You might have observed that the role hierarchy which gets displayed in the org (Setup > Users > Roles) is still displayed using a VF component. Today, we will see how to create the same role hierarchy using LWC and Apex. LWC provides us with a component called lightning-tree which displays a nested tree. We will make use of this component to display the role hierarchy in a tree structure. In Apex, we will query all the user roles and form a JSON structure which will be fed to the lightning-tree component. Let's first see the LWC component - roleHierarchy: roleHierarchy.html <template> <div class="slds-p-around_medium lgc-bg"> <lightning-tree items={roles} header="Roles"> </lightning-tree> </div> </template> Here we have used the lightning-tree component which will display the data in a tree structure. The items attribute is of type Object which has nested i