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.
- 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.
- 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.
- 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.
- Improved performance:- Execution of your code in the namespace JavaScript sandbox is faster than in Lightning Locker.
- 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.
- 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.
- 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.
-
- 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.
- event
- 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.
- 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.
- label—The admin-friendly label for the event.
- description—The description of the event, which displays in an i-bubble on the event label in the Lightning App Builder.
- 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.
- schema
- 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>
-
- 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.
- 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);
- 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.
- 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.
- 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.
- 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.
- 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.
Additional enhancements worth noting!
- Associate Errors with the Right Lightning Components for Screen Reader: -You can now associate a custom component’s error element with an input component. When you build a new custom component for a flow, set an ID for the error element so that a screen reader can read the error message text that describes the custom component. For example, you’re building a custom component that searches through a to-do list. You want to make sure that screen readers properly associate errors with the to-do list component.
- Add input validation to a custom component so that it lets the flow know whether the component is valid. If the custom component is invalid, the flow displays an error message below the custom component. The flow passes the ID of the element that displays the error message to a property called
ariaDescribedBy
in the custom component. The component receives the updatedariaDescribedBy
property and assigns the ID to the appropriate input component that has its ownariaDescribedBy
property. As a result, the error gets associated with the custom component’s input property.
- Add input validation to a custom component so that it lets the flow know whether the component is valid. If the custom component is invalid, the flow displays an error message below the custom component. The flow passes the ID of the element that displays the error message to a property called
- DOM API Changes May Require UI Test Updates: – The content and structure of HTML, CSS, and the DOM can change at any time and can’t be considered a stable API. Automated UI tests that use tools like Selenium WebDriver to reach into component internals require your ongoing maintenance. We’re here to help you adapt your automated UI tests for this release.
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.