Home Salesforce Salesforce Winter 20 Release – Feature Enhancements For Development

Salesforce Winter 20 Release – Feature Enhancements For Development

by Dhanik Lal Sahni
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:
  1. Add the lightning__Tab target to the component’s configuration file. The .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"?>
     xmlns="http://soap.sforce.com/2006/04/metadata">
        
            lightning__Tab
        
    
  2. Create a custom tab for this component.
  3. 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:

  1. Create a Lightning web component that contains only a CSS file.
    cssLibrary
       └──cssLibrary.css
    /* cssLibrary.css */
    
    h1 {
        font-size: xx-large;
    }
  2. 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';
  3. Imported style rules are applied to the template just like non-imported style rules. In the myComponent.html template, the text in the 

     tag uses the xx-large style defined in cssLibrary.css.
    
    
    

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.

AnnotationWinter ’20 AccessSummer ’19 Access
public (no @NamespaceAccessible)Same package onlySame namespace
public (with @NamespaceAccessible)ErrorSame 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 EarlierSummer 21
ui:actionMenuItemlightning:menuItem and lightning:buttonMenu
ui:buttonlightning:buttonlightning:buttonIconlightning:buttonIconStateful and lightning:buttonGroup.
ui:checkboxMenuItemlightning:menuItem and lightning:buttonMenu
ui:inputCheckbox lightning:input using checkboxtoggle, or checkbox-button type. lightning:checkboxGroup for group.
ui:inputCurrencylightning:input using number type and currency formatter
ui:inputDatelightning:input using date type.
ui:inputDateTimelightning:input using datetime type.
ui:inputDefaultErrorlightning:input using built-in field validation
ui:inputEmaillightning:input using email type
ui:inputNumberlightning:input using number type
ui:inputPhonelightning:input using phone type
ui:inputRadiolightning:input using radio type
ui:inputRichTextlightning:inputRichText
ui:inputSecretlightning:input using password type
ui:inputSelectlightning:select or lightning:combobox.
ui:inputSelectOptionlightning:select or lightning:combobox.
ui:inputTextlightning:input using text type.
ui:inputTextArealightning:textarea
ui:inputURLlightning:input using url type.
ui:menulightning:buttonMenu
ui:menuItemlightning:menuItem and lightning:buttonMenu.
ui:menuItemSeparatorlightning:menuDivider and lightning:buttonMenu.
ui:menuListlightning:menuItem and lightning:buttonMenu.
ui:menuTriggerlightning:menuItem and lightning:buttonMenu.
ui:menuTriggerLinklightning:menuItem and lightning:buttonMenu
ui:messagelightning:notificationsLibrary
ui:outputCheckboxlightning:input using checkbox type and set readonly to true.
ui:outputCurrencylightning:formattedNumber using style set to currency
ui:outputDatelightning:formattedDateTime
ui:outputDateTimelightning:formattedDateTime or lightning:formattedTime.
ui:outputEmaillightning:formattedEmail
ui:outputNumberlightning:formattedNumber
ui:outputPhonelightning:formattedPhone
ui:outputRichTextlightning:formattedRichText
ui:outputTextlightning:formattedText
ui:outputTextArealightning:formattedText
ui:outputURLlightning:formattedUrl
ui:radioMenuItemlightning:menuItem and lightning:buttonMenu
ui:menuFocusChangelightning:buttonMenu
ui:menuSelectlightning:combobox
ui:menuTriggerPresslightning: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

You may also like

Leave a Comment