New features in LWC

In Summer 20 release, Salesforce has launched some exciting features in LWC that I will be covering in this blog. 

• Communicate Across Salesforce UI Technologies with Lightning Message Service

Lightning Message Service, which is popularly called as LMS is a technology used to communicate between the Lightning component (Aura and LWC) and Visualforce pages. Before the introduction of LMS, the recommended way to communicate between Lightning components was using window.postMessage. The major disadvantage with this approach is window.postMessage() is a standard web API that is not aware of the Lightning and Locker service namespace isolation level. As a result, there is no way to send a message to a specific namespace or to check which namespace a message is coming from. Therefore, messages sent using postMessage() should be limited to non-sensitive data and should not include sensitive data such as user data or cryptographic secrets. Since LMS is natively provided by Salesforce, it automatically takes care of the security aspect related to the message exchange.

Another area where LMS can be used is to communicate between sibling components present on a lightning page. Since sibling components are not connected with each other through a hierarchy, the only way to communicate between them was by using a pub-sub library which was provided by Salesforce on their trailhead repository. The developer had to create a pub-sub component in the organization. copy the code given in trailhead repository and then use that component to communicate between sibling components. But now with LMS, the extra step of creating the pub-sub component in your organization is not required.

• Share CSS Styles Among Lightning Web Components

Let's take an example of a custom lightning application creating by composing multiple lightning web components. The components use SLDS to get the lightning look and feel, but they also use custom CSS to align the look and feel with the company's branding. Each component has a header tag, which is styled by custom CSS as per your company's styling guidelines. How will you achieve a consistent style across all your components? You will probably define the same style in each of the components as below:

/* component.css */
h1 { font-size: xx-large; }

Now, what will you do if the designer asks you to change the font-size from xx-large to x-large? Change the CSS in all the components. This sounds like a lot of work.

With this new enhancement, you can now define a common CSS module and then import it in your lightning component. This will help you to get a consistent look and feel across your application and it will be a lot of less work when you have to make CSS changes.

• Check User Permissions for Lightning Web Components

Before the introduction of this feature, if you want to check any user permission in LWC, the only way was to make a server call, check the permission in Apex either using the FeatureManagement Class or doing a SOQL and then result back to LWC.  But now, Salesforce has made it a lot easier to check user permissions in LWC. You just need to import the static reference to the permission and check whether it is true or false. There is absolutely no Apex call required which gives your component an additional performance benefit.

import hasPermission from '@salesforce/userPermission/PermissionName';

• Get child elements by tag or class name in Lightning Web Components

The Element.getElementsByTagName() and Element.getElementsByClassName() APIs are now supported in the LightningElement base class for Lightning web components. A parent element can use getElementsByTagName() to get a list of its child elements with a specified tag. A parent element can use getElementsByClassName() to get a list of its child elements with a specified class.

const table = this.template.querySelector('forecast-table');
const cells = table.getElementsByTagName('td');

If you are interested in knowing more about what's new in the latest release, please refer below links:

References:

Salesforce Summer 20 Release Notes

Lightning Message Service