Lightning Web Component Enhancements

This blog post serves as your guide to the Lightning Web Component Enhancements, offering insights into recent enhancements and a glimpse into the exciting features on the horizon.

From performance improvements to new capabilities and tools, explore the latest Lightning Web Component enhancements and upcoming features to stay ahead in web development.

Following are the few latest features of Lightning Web Component :

1. refreshViewApi
2. workspaceApi
3. Api Versioning
4. Lightning Logger
5. isUrlAddessable
6. utilityBarApi
7. Dynamically import and instantiate LWC

Let’s talk about some of the new features

RefreshViewApi

It is the standard way to refresh the component data without reloading the page. Previously, the RefreshView API required LWS to be enabled in the Salesforce org. Now, It also works with Lightning Locker.

Here, we have created one Lightning Web Component RefreshViewApiComp, below is the syntax. We have imported the RefreshEvent from lightning/refresh, and then we have dispatched the event in the refreshStandardComp handler. This handler will execute whenever we update the contact. By using this we can improve user experience, performance and data synchronization.

Similarly, we can use registerRefreshHandler to refresh the custom component whenever there is a change in our standard component like when we update something on the standard page layout and we want to sync that with our custom component.

refreshViewApiComp.js

import { LightningElement, api } from 'lwc';
import { RefreshEvent } from 'lightning/refresh';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class RefreshViewApiComp extends LightningElement {
@api recordId
refreshStandardComp() {
this.dispatchEvent(
new ShowToastEvent({
title: 'success',
message: 'Record Updated Successfully!',
variant: 'success'
})
)
this.dispatchEvent(new RefreshEvent());
}
}

refreshViewApiComp.html

<template>
<lightning-card>
<lightning-record-edit-form object-api-name="Contact" onsuccess={refreshStandardComp} record-id={recordId}>
<lightning-input-field field-name="FirstName">
</lightning-input-field>
<lightning-input-field field-name="LastName">
</lightning-input-field>
<lightning-input-field field-name="Email">
</lightning-input-field>
<div style="margin-left:35%;width:fit-content">
<lightning-button label="Cancel" type="reset" variant="destructive"></lightning-button>&nbsp;
<lightning-button label="save" type="submit" variant="brand"></lightning-button>
</div>
</lightning-record-edit-form>
</lightning-card>
</template>

refreshViewApiComp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>

OUTPUT

Here you can see we have updated the email and without refreshing the page standard page layout has updated.

WorkspaceApi

The lightning/platformWorkspaceApi module provides LWC Workspace API methods to control workspace tabs and subtabs in a Lightning console app. Earlier they were only available in Aura but now we can use them in LWC also.

First, let’s check what are the navigation tabs, subtabs, and primary tabs. In the below picture, the blue box is the navigation tab, the red box is the primary tab on which we are working and the yellow box is the sub-tabs that the related records (Contacts or Opportunities ) for that particular item which is Account here.

Now we will perform actions using LWC on these tabs. We have different methods available in LWC workspace Api like openTabs, closeTab, focusTab, getFocusedTabInfo, openSubtab etc.

Here, we have created one LWC WorkSpaceApiMethods in which we have a different button that is performing actions. In this, we have to import the API method from the lightning/platformWorkspaceApi module.

How to close a tab in the console?

In the above image when we click on Close Tab, it will close the primary tab (highlighted) that we are working on. Below is the piece of code for the close tabs. getFocusedtabInfo will return the promise and we will get the tabId here which we can use in the closeTab method.

Want to Learn Salesforce Flows? Checkout our Salesforce Flow Course

How to close the sub tab?

Here, we can utilize the same closeTab method provided. We have to check if that focused tab contains the sub-tab and as we are iterating on sub-tabs, we can see in the below image just after clicking on the Close All Sub-Tab button we will get the three sub-tabs info that is open in the console.

Syntax

workSpaceApiMethods.js

import { LightningElement, wire } from 'lwc';
import { IsConsoleNavigation, getFocusedTabInfo, closeTab } from 'lightning/platformWorkspaceApi';export default class WorkSpaceApiMethods extends LightningElement {@wire(IsConsoleNavigation)
isConsoleNavigation// close the focused tab
closeTabHandler() {
if (this.isConsoleNavigation) {// getting focused tab Id
getFocusedTabInfo()
.then(tabInfo => {
closeTab(tabInfo.tabId)
})
.catch(error => {
console.log('Error occured while closing tabs');
})
}
}// close all sub tabs
closeSubTabHandler() {
if (this.isConsoleNavigation) {
getFocusedTabInfo()
.then(tabInfo => {
if (tabInfo.subtabs) {
tabInfo.subtabs.forEach(tab => {
console.log('tab info data is ', tab);
closeTab(tab.tabId)
});
}
})
}}}

workSpaceApiMethods.html

<template>
<lightning-card title="Work Space API">
<div class="slds-m-bottom--x-small">
<lightning-button title="Close Tab" onclick={closeTabHandler} label="Close Tab" variant="brand"
class="slds-m-around--xxx-small"></lightning-button>
<lightning-button title="Close All Sub-tab" label="Close All Sub-tab" onclick={closeSubTabHandler}
variant="brand" class="slds-m-around--xxx-small"></lightning-button>
</div>
<div>
<lightning-button title="Open Tab" label="Open Tab" onclick={closeTab} variant="brand"
class="slds-m-around--xxx-small"></lightning-button>
<lightning-button title="Open Sub-tab" label="Open Sub-tab" onclick={closeTab} variant="brand"
class="slds-m-around--xxx-small"></lightning-button>
</div>
</lightning-card>
</template>

We’ve talked about two cool features in detail, but Lightning Web Components has even more exciting stuff to offer. From making things faster to making development easier, there’s a lot more to discover. So, while we’ve covered a couple of things, remember, there’s still plenty more to learn and try out!

Also Read – How to access the custom label in the apex

FAQ’s

1. What is the salesforce feature release lifecycle?

When Salesforce releases a feature, It undergoes different stages of its life cycle. Following are the stages and their basic meaning :

1. Pilot – It is usually the first phase of public testing. It mostly includes a small set of participant Organizations who requested to opt-in for the pilot feature. They are requested to provide additional information to clear the eligibility criteria.
2. Beta – It is the next phase after the successful testing in the pilot phase. Beta features may necessitate further activation by a System Admin and are accompanied by messaging that indicates the feature is in Beta status. They typically receive minimal or no support since they are not yet fully functional or completed.
3. GA – It means Generally Available. The feature will be included in this phase when it has passed the Beta and Pilot phase. In this phase, it is available to the public, fully supported and fully functional. It is considered at official release by Salesforce.

2. How many releases does Salesforce have?

We have three releases per year in Salesforce which are Spring, Summer, and Winter.

3. What is trust.salesforce.com?

Trust.salesforce.com is Salesforce’s website which provides transparent status details on service availability, performance, security, privacy, and compliance to instil trust and confidence in our service.

Conclusion

In conclusion, Lightning Web Components continues to evolve, offering developers powerful tools and features to create innovative solutions on the Salesforce platform. By staying informed about the latest advancements and upcoming features, developers can harness the full potential of this framework, to build robust and scalable applications.

Embrace the changes, explore new possibilities, and continue to push the boundaries of development with Lightning Web Components.

Get a complete Roadmap To Learn Salesforce Admin And Development

Name *

First

Last

Email *

Comment or Message

Submit