Salesforce Summer ’21 Release Notes LWC Updates And New Features

The Lightning Component modern framework is a User Interface framework to develop dynamic web apps for mobile and desktop devices. In the latest Summer’21 release is packed with the newly added Lightning Component features!

Lightning Components: New and Changed Items
Build UI easily with these new and changed components.

New Components
These components are new and require API version 52.0 and later.

lightning-quick-action-panel

Builds quick action modals with the same style as the Salesforce Lightning Design System (SLDS) modal. With this component, you can customize screen actions and still have consistent UI across all actions. Use lightning-quick-action-panel with the lightning__RecordAction target to use your custom component as a quick action on a record page. For more information.

lightning-service-cloud-voice-toolkit-API

This component provides access to event listeners and methods for the Service Cloud Voice Toolkit API, enabling your component to listen to events that take place during phone calls with service agents.

Changed Lightning Web Components
These components have changed.

lightning-quick-action-panel

This attribute is new.

• aria-haspopup—Indicates that the button has an interactive popup element. Valid values are true, false, menu, listbox, tree, grid, or dialog.

lightning-formatted-text

This attribute has changed.

• value—When linkify is true, URLs specified without a protocol use the host domain's protocol. For example, if a host domain uses the https:// protocol when you specify value=” See www.example.com” the link renders as https://www.example.com.

lightning-formatted-URL

This attribute has changed.

• href—URLs specified without a protocol use the host domain's protocol. For example, if a host domain uses the https:// protocol, when you specify href=”www.example.com” the link renders as https://www.example.com.

lightning-datatable

These attributes are new to provide a caption or description on the <table> element for assistive technologies. We recommend that you use one or the other, but not both.

• aria-label—Labels the datatable for assistive technology. The attribute and its value are passed down to the rendered <table>  element.
• aria-labelled by—Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to caption or describe the table.

lightning-helptext

This attribute is new.

• alternative-text—The assistive text for the button icon. This value defaults to "Help".

lightning-input-address

This attribute is new.

• country-disabled—Specifies whether the country field is disabled so users can’t interact with it. This value defaults to false.

lightning-pill

This attribute has changed

• href—URLs specified without a protocol use the host domain's protocol. For example, if a host domain uses the https:// protocol, when you specify href=”www.example.com” the link renders as https://www.example.com.

SEE ALSO: Component Library

Create Quick Actions with Lightning Web Components (Generally Available)
To save your users time and clicks, create a quick action that invokes a Lightning web component. On a record page, create a screen action that shows the component in a window, or create a headless action that executes with a click.

How to use: A Lightning web component as a quick action on a record page, define the metadata in fieldset><component> .js-meta.xml. Define a lightning__RecordAction target and specify actionType as ScreenAction for a screen action that opens in a window or Action for a headless action that executes when clicked. Here’s the configuration for a headless action.

 <?xml version="1.0" encoding="UTF-8" ?>

      <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

        <apiVersion>52.0</apiVersion>

        <isExposed>true</isExposed>

        <targets>

          <target>lightning__RecordAction</target>

        </targets>

        <targetConfigs>

          <targetConfig targets="lightning__RecordAction">

            <actionType>Action</actionType>

          </targetConfig>

        </targetConfigs>

      </LightningComponentBundle>

To use a headless action, add an exposed invoke() method to your component.

import { LightningElement, API } from "lwc";

    

declare default class HeadlessSimple extends LightningElement {

    @api invoke() {

         console.log("Hi, I'm an action."); 

    }

 }  

Note: LWC quick actions are currently supported only on record pages.

Create Styling Hooks for Lightning Web Components
To expose styling hooks for your custom components, use CSS custom properties. CSS custom properties also make code easier to read and update.

How to use: To define a CSS custom property in a component's style sheet, prefix the property with --. To insert the value of the property, use var()

:host {

    --important-color: red; 

}

 .important { 

    color: var(--important-color); 

}

CSS custom properties are inherited. Inherited properties pierce the shadow DOM. Some CSS properties, like color, are also inherited. Because CSS custom properties are inherited, a consumer can set their values at a higher level in the DOM tree and style your component. These CSS custom properties create styling hooks for two themes: light and dark. Pass the fallback value as an optional second parameter to var().

 

/* myComponent.css */

 .light {

     background-color: var(--light-theme-backgroud-color, lightcyan);

     color: var(--light-theme-text-color, darkblue);

 } 

.dark {

    background-color: var(--dark-theme-background-color, darkslategray); 

    color: var(--dark-theme-text-color, ghostwhite);

 }

A consumer can set values for the styling hooks to change the theme colors.

/* consumerComponent.css */

:host {

    --light-theme-backgroud-color: honeydew;

    --light-theme-text-color: darkgreen;

    --dark-theme-background-color: maroon;     

    --dark-theme-text-color: ivory; 

} 

To experiment with this code in a playground, see lwc.dev.

SEE ALSO: MDN:Custom properties (--*): CSS variables

At Last!!!

Monitor Lightning Component Changes in the Setup Audit Trail Use the audit trail to track when your users create, change, or delete a custom Lightning component. Audit history is especially useful when multiple developers work on components.

How to use: To view the audit history, from Setup, in the Quick Find box, enter View Setup Audit Trail, then select View Setup Audit Trail.

Note: Because of the structure of component bundles, more than one entry for the same change sometimes appears in the audit trail. But you can identify that the entries are for the same change because their timestamps are identical.

You can download release notes for PDF files.

I'll hope you like it.

Thanks to everyone 😁!!