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

Last Updated on January 19, 2022 by Rakesh Gupta

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

Currently, the Spring’22 release is available under the pre-release program. In case you have not read the entire 540 pages of Salesforce Spring’22 release notes, check out the Spring’22 release quick summary, 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 Spring’22 release.

1. Secure Your Components Better, Stronger, Faster with Lightning Web Security (Generally Available): – Lightning Web Security (LWS) is a new client-side security architecture for your custom Lightning web components. The architecture is defined by fewer restrictions and more functionality while providing strong sandboxing and a security posture to enforce namespace isolation. The result is strong, flexible, usable security for your Lightning web components. This feature, now generally available, includes some changes since the beta release.
   1. From Setup, in the Quick Find box, enter Session, and then select Session Settings. On the Session Settings page, select Use Lightning Web Security for Lightning web components.
2. Enablement of Lightning Web Security Begins: – Salesforce plans to enable the Lightning Web Security (LWS) org setting on a rolling basis in production orgs that have only custom Lightning web components. If your org also has custom Aura components or has no custom components, Lightning Web Security won’t be enabled in Spring ’22.
3. Ensure That Your Code Works in Lightning Web Security with New Tools: – Try our new developer tools to ensure that your Lightning web component’s JavaScript code works with Lightning Web Security (LWS).
   1. Lightning Web Security Console – Evaluate your code in Lightning Web Security Console as it runs with LWS enabled and disabled. This tool can help you determine if a problem with your JavaScript code is related to its interaction with LWS.
   2. LWS Distortion Viewer – View information about the security modifications, known as distortions, in LWS Distortion Viewer. LWS applies distortions to code running in a sandbox to help prevent behavior that’s not secure. This tool can help you learn how to modify your JavaScript code to avoid distortions that affect your components.
4. Customize Your Datatable with New Features: – Enhance user interaction with your datatables. Programmatically change a focused field to edit mode from an external element such as a button. Display a lock icon on fields that can’t be edited. Use an icon as a column header without a column label. Give a column a unique ID to enable a field name to be used in multiple columns.
   1. The following examples apply to lightning-datatable, the new method and properties also work in lightning:datatable using Aura syntax.
   2. Program an external element such as a button to direct the user to the first editable cell in your datatable component. Use the openInlineEdit()method to open the inline edit panel on the currently active cell or next editable cell in the datatable.

      /* withInlineEdit.js */
      import { LightningElement } from 'lwc';
      
      export default class DatatableWithInlineEdit extends LightningElement {
        data = [];
        columns = columns;
        rowOffset = 0;
      
        handleClick() {
          const dt = this.template.querySelector('lightning-datatable');
          dt.openInlineEdit();
        }
      }

      To distinguish editable fields from read-only fields, you can mark read-only fields with a lock icon. To specify that a column’s field is read-only and display a lock icon, set editable to false and displayReadOnlyIcon to true in the associated column definition.

      const columns = [
        { label: 'Label', fieldName: 'name', editable: false, displayReadOnlyIcon: true },
        {
          label: 'Website',
          fieldName: 'website',
          type: 'url',
          editable: false,
          displayReadOnlyIcon: true,
        }

      To display an icon instead of a label in a column header, hide the column label. Specify an iconName and set hideLabel to true. The labelproperty is still required and is used for the icon’s title and alternativeText attributes.

      const columns = [
          {
              label: 'Ordering',
              fieldName: 'id',
              type: 'orderingButtons',
              fixedWidth: 90,
              iconName: 'utility:trending',
              hideLabel: true,
          },
          // other column data
      ];

      In some situations, multiple columns reference the same fieldName but have different fieldApiNames and different ways of working with the field information. To give a column a unique ID when using the same field name for two columns, use the attribute columnKey instead of fieldName on one of the column definitions.

      get columns() {
          return [
              // Column using 'fieldName' as identifier
              {
                  label: 'Lead',
                  fieldName: 'leadId',
                  ...
              },
              // Column using 'columnKey' as identifier
              {
                  label: 'Company',
                  columnKey: 'leadCompany',
                  fieldName: 'leadId',
                  ...
              }
          ]
      }

5. Enable Third-Party Integrations with Light DOM (Beta): – Lightning web components render in shadow DOM by default, providing strong encapsulation but posing challenges for global styling and many third-party integrations. With light DOM, your component markup is attached to the host element instead of its shadow tree. You can then access it like any other content in the document host.
   1. Light DOM allows third-party tools to traverse the DOM, enabling standard browser query APIs like querySelector and querySelectorAll, without traversing the shadow root. It also facilitates global styling so you can apply custom branding to your components and child components easily.To enable a component to render in light DOM, set the renderMode the static field in your component class.

      import { LightningElement } from 'lwc';
      
      export default class LightDomApp extends LightningElement {
          static renderMode = 'light'; // the default is 'shadow'
      }
      

      Use the lwc:render-mode template directive on the <template> tag of your component.

      
      <template lwc:render-mode='light'>
          <my-header>
              <p>Hello World</p>
          </my-header>
      </template>

      When you enable light DOM on a component, it no longer renders its elements in the #shadow-root tree.

      <my-app>
          <my-header>
              <p>Hello World</p>
          </my-header>
      </my-app>

      A light DOM component can contain a shadow DOM component. Similarly, a shadow DOM component can contain a light DOM component. However, base Lightning components always render in shadow DOM. Restricting light DOM to specific namespaces isn’t supported.

      LWC doesn’t scope styles automatically for you. To implement style encapsulation on a light DOM component, use a *.scoped.css file, which applies CSS to elements on the component only.

      myCmp
          ├──myCmp.html
          ├──myCmp.css
          └──myCmp.scoped.css

      If you use both *.css and *.scoped.css files, the *.css style sheets are injected before the *.scoped.css style sheets. The scoped-style CSS selectors have precedence over the unscoped ones because they’re declared last.

      Let’s look at a light DOM component with unscoped and scoped styles.

      <!-- c-light-cmp -->
      <template lwc:render-mode="light">
         <p>This is a paragraph in c-light-cmp</p>
      </template>
      

      // lightCmp.js
      import { LightningElement } from 'lwc';
      
      export default class LightCmp extends LightningElement {
         static renderMode = 'light';
      }
      

      /* lightCmp.css */
      p {
         background: yellow;
         color: #777;
      }
      

      /* lightCmp.scoped.css */
      p {
         background: silver;
         color: black;
      }
      

      In this case, c-light-cmp uses the scoped styles, but the styles from the unscoped style sheet can bleed out of the component

Additional enhancements are worth noting!

Formative Assessment:

I want to hear from you!  

What are your favorite Spring’22 Lightning Component gems? Care to share? You can download release notes in HTML format!, for PDF files.

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