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

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 Winter’20‘ release is packed with rich features including, the newly added Lightning Component features!

Currently, Winter’20 release is available under the pre-release program. On the 6th and 7th of September, Sandboxes will be upgraded, as a result, your organization will get the look and feel of Winter’20 release.

In case you have not read the entire 540 pages of Salesforce Winter’20 release notes, check out Winter’20 release quick summary and the Top 10 Lightning Experience Gems of Salesforce Winter’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 Winter’20 release.

1. Add Lightning Web Components as Custom Tabs:- Make a Lightning web component available as a custom tab in a Lightning Experience app and in the Salesforce app. Perform the following steps to add a custom tab for Lightning Web component:

Add the lightning__Tab target to the component’s configuration file. The .js-meta.xml configuration file defines the metadata values for the component, including the setting to allow usage in a custom tab.

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

Create a custom tab for this component.
To display the component in a custom tab:
- For a Lightning Experience app, add the component to the App Launcher.
- For the Salesforce mobile app, add the component to the Salesforce app navigation menu.

2. Share CSS Style Rules:- To share CSS style rules, create a component that contains only a CSS file. Import the style rules from that CSS file into the CSS files of other Lightning web components. Check the following example,

Create a Lightning web component that contains only a CSS file.

cssLibrary
└──cssLibrary.css

/* cssLibrary.css */

h1 {
font-size: xx-large;
}

In the CSS file of another Lightning web component, import the style rules.

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

/* myComponent.css */

@import 'cssLibrary.css';

Imported style rules are applied to the template just like non-imported style rules. In the myComponent.html template, the text in the tag uses the xx-large style defined in cssLibrary.css.

3. Communicate Across Salesforce UI Technologies with Lightning Message Channel (Developer Preview:- Use the Lightning Message Service API to communicate across the DOM, between Aura components, Visualforce pages, and Lightning web components. If you’re switching from Salesforce Classic to Lightning Experience, you can now build Lightning web components that can communicate with existing Visualforce pages or Aura components. For more information, see the Lightning Web Components release notes.

4. Hitting Apex Limits in Server-Side Actions Is More Predictable:- Apex limits in Lightning components are now applied per action. Previously, the Apex limits applied across all the actions batched together (boxcar’ed) in a request (XHR).

Applying Apex limits per action makes it less likely that your components hit Apex limits. Apex limit issues for action are more predictable because the limits are based on one action rather than the unpredictable set of actions that the framework batches together in a boxcar.

This change has a few more benefits.

Limits that are applied when an action calls an @AuraEnabled Apex method using cacheable=true or continuation=true no longer affect other actions in the same boxcar.
The granularity of event monitoring for Lightning components is improved. Event monitoring data for the Apex Execution event type is now for each component action rather than for each boxcar.

5. Lightning Components Can Access Apex Methods Only in the Same Package:- A Lightning component installed from a package can’t call an Apex method from an Apex class in another package, even if both packages are in the same namespace. You can’t use the @NamespaceAccessible Apex annotation in an Apex method referenced from a Lightning component.

This table shows the access differences for public @AuraEnabled Apex methods in a Lightning component in second-generation managed packages.

Annotation	Winter ’20 Access	Summer ’19 Access
`public` (no `@NamespaceAccessible`)	Same package only	Same namespace
`public` (with `@NamespaceAccessible`)	Error	Same namespace

Additional enhancements worth noting!

1. Navigate Users Directly to an App: – Now you can create lightning components that link directly to your app and to a specific page in your app.

Use the lightning:navigation Lightning web component or the lightning:navigation Aura component with the new standard__app page reference type.

To navigate users to an app, pass either the appId or appDeveloperName URL parameters to the appTarget.
To navigate users to a specific page in an app, include the pageRef attribute.

2. DOM API Changes: – Shadow DOM is a standard that encapsulates the internal document object model (DOM) structure of a web component. The internal DOM structure is called the shadow tree. In Winter ’20, code can’t use document or document.body to access the shadow tree of a Lightning web component. For example, code in a test can’t call document.querySelector() to select nodes in a Lightning web component’s shadow tree. Read more about it here.

What are your favorite Winter’20 release note gems?

–> You can download release notes in HTML format!, for PDF file.