Lot of enhancements done for development using Lightning components, Visualforce, Apex, or APIs in Winter 20 release. New enhancements help us develop amazing applications, integrations, and packages for resale to other organizations.
Lightning Web Components: Open Source
Lightning Web Components framework is now open source. This will empower to build enterprise-ready web components on any platform. On the Salesforce Platform, you can add a Lightning web component as a custom tab in a Lightning Experience app and in the Salesforce app.
How to do this: Check lwc.dev for complete understanding of framework.
Add Lightning Web Components as Custom Tabs
We can make a Lightning web component available as a custom tab in a Lightning Experience app and in the Salesforce app.
How to do this:
- Add the lightning__Tab target to the component’s configuration file. The <component>.js-meta.xml configuration file defines the metadata values for the component, including the setting to allow usage in a custom tab.
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <targets> <target>lightning__Tab</target> </targets> </LightningComponentBundle>
- Create a custom tab for this component.
- To display the component in a custom tab:
- For a Lightning Experience app, add the component to the App Launcher.
- For the Salesforce mobile app, add the component to the Salesforce app navigation menu.
Share CSS Style Rules
We can share CSS style rules in multiple lightning web component. To share CSS, create a component that contains only a CSS file. Import the style rules from that CSS file into the CSS files of other Lightning web components.
How:
- Create a Lightning web component that contains only a CSS file.
cssLibrary └──cssLibrary.css
/* cssLibrary.css */ h1 { font-size: xx-large; }
- In the CSS file of another Lightning web component, import the style rules.
myComponent ├──myComponent.html ├──myComponent.js ├──myComponent.js-meta.xml └──myComponent.css
/* myComponent.css */ @import 'cssLibrary.css';
- Imported style rules are applied to the template just like non-imported style rules. In the myComponent.html template, the text in the <h1> tag uses the xx-large style defined in cssLibrary.css.
<!-- myComponent.html --> <template> <h1>Words to the Wise</h1> <slot></slot> </template>
DOM API Changes
Shadow DOM is a standard that encapsulates the internal document object model (DOM) structure of a web component. The internal DOM structure is called the shadow tree. In Winter ’20, code can’t use documentor document.bodyto access the shadow tree of a Lightning web component.
Per the Shadow DOM specification, elements in a shadow tree aren’t accessible via traditional DOM querying methods. To access its own shadow tree, a Lightning web component uses this.template.querySelector().
For example, code in a test can’t call document.querySelector()to select nodes in a Lightning web component’s shadow tree.
How to do this :
In Winter ’20, Document.prototype and HTMLBodyElement.prototypeupdated to respect shadow DOM semantics. Remove below code that uses DOM APIs to reach into a component’s shadow tree.
- Document.prototype.getElementById
- Document.prototype.querySelector
- Document.prototype.querySelectorAll
- Document.prototype.getElementsByClassName
- Document.prototype.getElementsByTagName
- Document.prototype.getElementsByTagNameNS
- Document.prototype.getElementsByName
- Document.body.querySelector
- Document.body.querySelectorAll
- Document.body.getElementsByClassName
- Document.body.getElementsByTagName
- Document.body.getElementsByTagNameNS
Lightning Components Can Access Apex Methods Only in the Same Package
A Lightning component installed from a package can’t call an Apex method from an Apex class in another package, even if both packages are in the same namespace. You can’t use the @NamespaceAccessible Apex annotation in an Apex method referenced from a Lightning component.
How: This table shows the access differences for public @AuraEnabled Apex methods in a Lightning component in second-generation managed packages.
| Annotation | Winter ’20 Access | Summer ’19 Access |
|---|---|---|
| public (no @NamespaceAccessible) | Same package only | Same namespace |
| public (with @NamespaceAccessible) | Error | Same namespace |
Aura Components in the ui Namespace Are Being Retired
The ui components are scheduled for retirement in all Salesforce orgs in Summer ’21. Use similar components in the lightningnamespace instead.
Replace the retired components with their counterparts in the lightning namespace. These components are faster, more efficient, and they implement Lightning Design System styling out of the box.
Use these recommended alternatives for the retired Aura components.
| Winter’20 and Earlier | Summer 21 |
|---|---|
| ui:actionMenuItem | lightning:menuItem and lightning:buttonMenu |
| ui:button | lightning:button, lightning:buttonIcon, lightning:buttonIconStateful and lightning:buttonGroup. |
| ui:checkboxMenuItem | lightning:menuItem and lightning:buttonMenu |
| ui:inputCheckbox | lightning:input using checkbox, toggle, or checkbox-button type. lightning:checkboxGroup for group. |
| ui:inputCurrency | lightning:input using number type and currency formatter |
| ui:inputDate | lightning:input using date type. |
| ui:inputDateTime | lightning:input using datetime type. |
| ui:inputDefaultError | lightning:input using built-in field validation |
| ui:inputEmail | lightning:input using email type |
| ui:inputNumber | lightning:input using number type |
| ui:inputPhone | lightning:input using phone type |
| ui:inputRadio | lightning:input using radio type |
| ui:inputRichText | lightning:inputRichText |
| ui:inputSecret | lightning:input using password type |
| ui:inputSelect | lightning:select or lightning:combobox. |
| ui:inputSelectOption | lightning:select or lightning:combobox. |
| ui:inputText | lightning:input using text type. |
| ui:inputTextArea | lightning:textarea |
| ui:inputURL | lightning:input using url type. |
| ui:menu | lightning:buttonMenu |
| ui:menuItem | lightning:menuItem and lightning:buttonMenu. |
| ui:menuItemSeparator | lightning:menuDivider and lightning:buttonMenu. |
| ui:menuList | lightning:menuItem and lightning:buttonMenu. |
| ui:menuTrigger | lightning:menuItem and lightning:buttonMenu. |
| ui:menuTriggerLink | lightning:menuItem and lightning:buttonMenu |
| ui:message | lightning:notificationsLibrary |
| ui:outputCheckbox | lightning:input using checkbox type and set readonly to true. |
| ui:outputCurrency | lightning:formattedNumber using style set to currency |
| ui:outputDate | lightning:formattedDateTime |
| ui:outputDateTime | lightning:formattedDateTime or lightning:formattedTime. |
| ui:outputEmail | lightning:formattedEmail |
| ui:outputNumber | lightning:formattedNumber |
| ui:outputPhone | lightning:formattedPhone |
| ui:outputRichText | lightning:formattedRichText |
| ui:outputText | lightning:formattedText |
| ui:outputTextArea | lightning:formattedText |
| ui:outputURL | lightning:formattedUrl |
| ui:radioMenuItem | lightning:menuItem and lightning:buttonMenu |
| ui:menuFocusChange | lightning:buttonMenu |
| ui:menuSelect | lightning:combobox |
| ui:menuTriggerPress | lightning:buttonMenu |
Override Aura CSS Flipping for RTL Languages
When our Language setting in Salesforce is set to a right-to-left (RTL) language, the framework automatically flips property names, such as left and border-left to right and border-right respectively.
@noflip annotation gives power to override the automatic flipping for RTL languages in your custom Aura components.
To override the automatic flipping, add a /*@noflip*/ annotation in a comment directly before the property. For example:
.THIS.mycontainer { /*@noflip*/ direction : rtl; }
Navigate Users Directly to an App
We can now develop Lightning web components and Aura components that navigate users to a specific page in an app.
This change applies to Lightning Experience in all editions. This change doesn’t apply to Lightning Out, Lightning communities, or the Salesforce mobile app.
How to do this:
Use the lightning-navigation Lightning web component or the lightning:navigation Aura component with the new standard__app page reference type.
- To navigate users to an app, pass either the appId or appDeveloperName URL parameters to the appTarget.
- To navigate users to a specific page in an app, include the pageRef attribute.
Reference : https://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_lc_message_channel.htm
Dhanik Lal Sahni is a Salesforce Independent Consultant and Architect with extensive experience in Salesforce implementation, integration, and custom development. He helps businesses design scalable, AI-driven CRM solutions using Sales Cloud, Service Cloud, Experience Cloud, and Salesforce Data Cloud.
As the founder of SalesforceCodex.com, Dhanik shares practical insights, tutorials, and architectural best practices to help professionals grow in the Salesforce ecosystem.
Explore his consulting and freelance services at dhaniksahni.com
, where he offers end-to-end Salesforce solutions for startups and enterprises worldwide.
