Top 5 Lightning Component Gems of Salesforce Summer'20 Release!

Advertisements

Last Updated on April 15, 2022 by Rakesh Gupta

The Lightning Component modern framework is a User Interface framework to develop dynamic web apps for mobile and desktop devices. As is the case with each release, the latest Summer’20‘ release is packed with rich features including, the newly added Lightning Component features!

Last weekend Summer’20 release arrives in Sandboxes, as a result, your organization now gets the look and feel of Summer’20 release.

In case you have not read the entire 526 pages of Salesforce Summer’20 release notes, check out Summer’20 release quick summary and the Top 10 Lightning Experience Gems of Salesforce Summer’20 Release! written by me.

I combed through the release notes and highlighted the added capabilities to the Lightning Component features. Believe me, it was hard to stop at just five! To kick things off, here is my take on the coolest Lightning Component features from Summer’20 release.

1. Communicate Across Salesforce UI Technologies with Lightning Message Service (Generally Available):- Use Lightning message service to communicate across the DOM—between Visualforce pages, Aura components, and Lightning web components, including components in a utility bar. You can use it to communicate between components within a single Lightning page or across multiple pages. If you’re switching from Salesforce Classic to Lightning Experience, you can now build Lightning web components that can communicate with existing Visualforce pages and Aura components. You can also use Lightning message service to communicate with softphones via Open CTI.

2. Get Child Elements by Tag or Class Name in Lightning Web Components:- The Element.getElementsByTagName() and Element.getElementsByClassName() APIs are now supported in the LightningElement base class for Lightning web components. A parent element can use getElementsByTagName() to get a list of its child elements with a specified tag. A parent element can use getElementsByClassName() to get a list of its child elements with a specified class.

3. Develop Flow Screen Components That Work for Multiple Objects (Beta):- Now you can create reusable flow screen components that use the generic sObject and sObject[] data types. Build one component that works for multiple objects, rather than one for each individual object. For example, you can build a data table component that works with any collection of records, from accounts and contacts to custom objects.

4. Check User Permissions for Lightning Web Components:- Customize a component’s behavior based on whether the current user has a specific permission. To check a user’s permission assignment, import Salesforce permissions from the @salesforce/userPermission and @salesforce/customPermission scoped modules.

5. Share CSS Styles Among Lightning Web Components:- Create a consistent look and feel for Lightning web components by using a common CSS module. Define styles in the CSS module, and import the module into the components that share those styles.

Create a component that contains a CSS file and a configuration file. The folder and filenames must be identical. This component is your CSS module.
```
cssLibrary
   ├──cssLibrary.css
   └──cssLibrary.js-meta.xml
```

In the CSS file, define the style rules to share.

/* cssLibrary.css */
h1 {
    font-size: xx-large;
}

The configuration file needs only these tags.

 
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    49.0
    false

In the CSS file of a Lightning web component, import the module.

myComponent
   ├──myComponent.html
   ├──myComponent.js
   ├──myComponent.js-meta.xml
   └──myComponent.css

/* myComponent.css */
@import 'c/cssLibrary';

/* Define other style rules for myComponent here */

You can import one or more CSS modules.

/* Syntax */
@import 'namespace/moduleName';

Additional enhancements worth noting!

Check Whether a Lightning Web Component Is Connected to the DOM: -Use a property, isConnected, to check whether a component is connected to the Document Object Model (DOM).
Set an Uppercase JavaScript Property Via an HTML Attribute: – Lightning Web Components provides special syntax to allow you to set an uppercase JavaScript property via an HTML attribute. Previously, you couldn’t set an uppercase JavaScript property via an HTML attribute.