Top 5 Lightning Component Gems of Salesforce Summer'21 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 Summer’21 release is packed with rich features including, the newly added Lightning Component features!

Currently, the Summer’21 release is available under the pre-release program. On the and 07th & 08th of May, Sandboxes will be upgraded, as a result, your organization will get the look and feel of the Summer’21 release. In case you have not read the entire 562 pages of Salesforce Summer’21 release notes, check out the Summer’21 release quick summary, Pardot Summer’21 Release: Top 5 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 Summer’21 release.

Enforce Access Modifiers on Apex Properties in Lightning Component Markup (Update, Enforced): – This update makes Lightning components consistent with the use of Apex properties in other contexts. For example, a markup expression can no longer access an Apex property with a private Apex getter. This release update doesn’t affect usage of Apex setters.

Let’s look at an example for an Apex class with a private getter for a counter class property.

public class EnforcePrivateGetter {
    @AuraEnabled

    public Integer counter { private get; set; }

    @AuraEnabled
    public static EnforcePrivateGetter GetRepro2()
    {
        EnforcePrivateGetter result = new EnforcePrivateGetter();
        result.counter = 2; 
        return result;
    }
}

With the update enabled, this Aura component can’t access the private getter with the {!v.apexObject.counter} expression. The same restriction applies for a Lightning web component.

<aura:component controller="EnforcePrivateGetter" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute type="EnforcePrivateGetter" name="apexObject" />

    counter = {!v.apexObject.counter} <br></br>
</aura:component>

Here’s the JavaScript controller.

({
    doInit : function(cmp, ev) {
        var action = cmp.get("c.GetRepro2");
    
        action.setCallback(this, function(response) {
          var state = response.getState();
          if (state === "SUCCESS") {
            cmp.set('v.apexObject', response.getReturnValue());
          }
          else if (state === "ERROR") {
            console.log('Error : ' + JSON.stringify(errors));
          }
        });
        $A.enqueueAction(action);
    }
})

With the update enabled, the fix is to remove the private access modifier on the getter and change the class variable definition to:

public Integer counter { get; set; }

To make an Apex property readable outside the Apex class, the property can’t have a private or protected access modifier.

Securely Access Aura Components (Update): – This update ensures that an external component with access=”public” is accessible only to other components within its same namespace or to internal Salesforce components. This update is enforced in Winter ’22.
1. Fixing this issue can reveal other issues that were previously undetected. For example, before this update, a callback that wasn’t wrapped in $A.getCallback() could lose its context but still run successfully. After this update, if a callback loses its context, the access check fails with an error. We recommend performing these testing steps in a sandbox environment to evaluate the release update’s impact and fix any component access errors before it’s auto-enabled in Winter ’22.
  1. From Setup, in the Quick Find box, enter Release Updates, then select Release Updates.
  2. For Enable Aura Component Access Fix, enable the release update test run.
  3. Test pages with custom components and watch for any error messages such as Access Check Failed! in the console log.
  4. Fix any broken components.
  5. When manual testing is complete, disable the release update test run and transfer the code changes to production.
  6. In production, enable the release update or wait for it to auto-enable in Winter ’22.
Enable Secure Static Resources for Lightning Components (Update, Postponed): – This release update has been postponed indefinitely while we change the implementation to reduce customer impact. The release update won’t be enforced in its present form. Don’t enable it.
New Lightning Web Components: –These components are new and require API version 52.0 and later.
1. 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.
2. 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.
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.
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;
}
```

Additional enhancements worth noting!

Deploy a New Custom Label and Component Together: – Deploy a new custom label and a reference to that custom label in an existing Lightning web component in a single deployment. Previously, you deployed the new custom label then added a reference to it in an existing Lightning web component in a second deployment.
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.