Top 5 Lightning Component Gems of Salesforce Winter’22 Release!

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

Currently, the Winter’22 release is available under the pre-release program. In case you have not read the entire 546 pages of Salesforce Winter’22release notes, check out the Winter’22 release quick summary and Pardot Winter’22 Release: Top 10 Features and Top Ten Gems of Salesforce Lightning Experience written by me.

I combed through the release notes and highlighted the added capabilities to the Lightning Web 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 the Winter’22 release.

1. Secure Your Components Better, Stronger, Faster with Lightning Web Security (Beta): – The Lightning Component framework introduces Lightning Web Security, a new client-side security architecture for your custom Lightning web components. This new architecture is defined by fewer restrictions and more functionality while providing strong sandboxing and a security posture to mitigate the most common UI attacks. The result is strong, flexible, usable security for your Lightning web components.The new Lightning Web Security architecture is positioned to replace Lightning Locker for Lightning web components. It works along with Lightning Locker, which is still used for Aura components.Like Lightning Locker, the new security architecture blocks or modifies behavior of APIs that aren’t secure. In addition, the new architecture supports features that Lightning Locker doesn’t.
   1. Cross-namespace component use:- Your LWC components can import components or modules from other namespaces and use them via composition or extension. Components are isolated in their own namespace JavaScript sandbox, but it’s transparent to you because the security architecture performs virtual communication behind the scenes.
   2. Interactions with global objects:- Because each namespace is given its own detached JavaScript sandbox, we can expose document, window, and element global objects directly without secure wrappers. Changes made to the global objects in your namespace can’t affect other components.
   3. Improved performance:- Execution of your code in the namespace JavaScript sandbox is faster than in Lightning Locker.
   4. Better support of third-party JavaScript:- Libraries can use techniques such as manipulating global objects while running in a JavaScript sandbox. In Lightning Locker, such behaviors prevented use of some third-party libraries.
   5. Compatibility with standard JavaScript as it evolves:- The JavaScript sandbox technology is built on standards. The new security architecture doesn’t need frequent updates to keep pace as new APIs are added. From Setup in Lightning Experience, in the Quick Find box, enter Session, and then select Session Setting. On the Session Settings page, select Next generation Lightning UI Security for LWC.
2. Expose Events in the Lightning App Builder: – As part of Dynamic Interactions, you can now define the events for a Lightning web component on a page, and then expose those events in the Lightning App Builder. An admin can then configure the event by setting up interactions between the source component and its targets right in the App Builder UI.
   1. 1. To expose an event from a component, you fire a standard JavaScript CustomEvent in its .js file. To make the event discoverable, use the Dynamic Interactions-related targetConfig subtags in the component js-meta.xml file with the target lightning__AppPage.
      2. event
         1. Exposes the event for Dynamic Interactions and make it available for the component in the Lightning App Builder. The event subtag supports the name, label, and description attributes.
            1. name—The name of the event as defined in the component’s .js file. If no label attribute is defined, the name value is shown in the list of available events for the component in the Lightning App Builder.
            2. label—The admin-friendly label for the event.
            3. description—The description of the event, which displays in an i-bubble on the event label in the Lightning App Builder.
      3. schema
         1. Provides the shape of the event. Content in the schema subtag must be in JSON format.

   Here’s a sample js-meta.xml configuration file for a custom Account List source component. It includes an itemselected event, and its schema includes apiName and recordId as defined in the .js file.
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>53.0</apiVersion>
       <isExposed>true</isExposed>
       <masterLabel>Account List</masterLabel>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
       <targetConfigs>
           <targetConfig targets="lightning__AppPage">
               <property name="apiName" type="String"/>
               <property name="listViewApiName" type="String"/>
               <event name="itemselected" label="Item Selected" description="This event fires when an item is selected.">
                   <schema>
                       {
                           "type": "object",
                           "properties": {
                               "recordId": {
                                   "type": "string",
                                   "title": "Record ID"
                                   "description": "Enter an 18-digit record ID."
                               },
                              "apiName": {
                                  "type": "string"
                              }
                          }
                       }
                   </schema>
               </event>
           </targetConfig>
       </targetConfigs>
       <description>Defines an event for an Account List component</description>
   </LightningComponentBundle>

3. Add User-Authorized Cookie Consent to Your Lightning Web Components: – Use the lightning/userConsentCookie module to incorporate user-authorized cookie consent into your components. Users can allow one or more specific cookie types: Required, Marketing, Preference, and Statistics.
   1. In Experience Builder on the Security & Privacy tab, turn on Allow only required cookies for this site. Your code can then give users the ability to fine-tune consent for the cookie types that they do and don’t want to permit.Import the userConsentCookie component method inside your custom component.

      import{
          setCookieConsent,
          isCategoryAllowedForCurrentConsent, 
      } from 'lightning/userConsentCookie';

      Use setCookieConsent() to set consent preferences for one or more cookie categories.

      var consent = {
          "Preferences" : true, 
          "Statistics" : true, 
          "Marketing" : false 
      }
      Sfdc.Cookie.setCookieConsent(consent);

4. Limit for Number of Actions in a Boxcar Request Was Added: – The Lightning Component framework now returns a 413 HTTP response status code if there are more than 2,500 actions in a boxcar request. Previously, there was no limit and a request with a larger number of actions was rare but led to a slow response time. If a user sees this error, consider redesigning your custom component to follow best practices and reduce the number of actions in a request.
   1. The framework queues up Apex actions before sending them to the server. This mechanism is largely transparent to you when you’re writing code, but it enables the framework to minimize network traffic by batching multiple actions into one request (XHR). The batching of actions is also known as boxcar’ing, similar to a train that couples boxcars together.
   2. The framework uses a stack to track the actions to send to the server. When the browser finishes processing events and JavaScript on the client, the enqueued Apex actions on the stack are sent to the server in a batch.
      
5. View Dependencies for Lightning Web Components: – Use the dependencies tree viewer to see which custom components and Apex classes that a Lightning web component uses. You can quickly see the structure of a component and navigate to the source for its dependencies.
   1. From Setup in Lightning Experience, in the Quick Find box, enter Company Information, and then select Company Information.
   2. To see its dependencies on the detail page, select a Lightning web component.
   3. To see the details for one of the dependencies, click a link in the Name column.

Additional enhancements worth noting!

Formative Assessment:

I want to hear from you!

What are your favorite Winter’22 release note gems? You can download release notes in HTML format!, for PDF files.

Let me know by Tweeting me at @automationchamp, or find me on LinkedIn.