Home Salesforce Winter 20 Release – Code Enhancement in LWC

Winter 20 Release – Code Enhancement in LWC

by Dhanik Lal Sahni

Developers can find new and changed objects, calls, classes, components, commands, and more that help you customize Salesforce features in Winter 20 release.

Lightning Components:

Changed Lightning Web Components

Build a UI easily with these new and changed resources in Lightning Web Component. Below components have changes.
lightning-button:
  1. click() method has been added.
  2. The variant attribute supports new values
    1. brand-outline—Similar to the brand variant, this variant draws attention to the primary action on a page. The blue color is used only for the label and border, and the button color is white. Use this variant when the brand variant is too distracting to the experience.
    2. destructive-text—Similar to the destructive variant, this variant indicates a destructive action to the user, like permanently deleting data. The red color is used only for the label and border, and the button color is white. Use this variant when the destructive variant is too distracting to the experience.
lightning-button-icon : The click() method has been added.
lightning-button-menu : The click() method has been added.
lightning-carousel : Swiping carousel images is now supported on mobile devices.

The following attributes are added

  • aria-labelledbyA space-separated list of element IDs that provide labels for the combobox.
  • aria-describedby—A space-separated list of element IDs that provide descriptive labels for the combobox.

lightning-datatable :

The url type has changed the default behavior for the following attributes.

  • target—Links now open in the same frame by default (or the same browser tab if a frame is not used), which corresponds to the _self target value. To open links in a new tab, use this column definition.
    var columns = [
        { 
            label: 'Company Website', fieldName: 'website', type: 'url', 
                typeAttributes: { target: _blank }
        }...
    ]
  • tooltip—The URL field no longer displays a tooltip if a tooltip value isn’t provided. To display a tooltip with the URL value, use this column definition.
    var columns = [
        { 
            label: 'Company Website', fieldName: 'website', type: 'url', 
                typeAttributes: { 
                    tooltip: { fieldName: 'website' } 
                } 
        },
    // other column data 
    ]

lightning-formatted-number : Arabic, Hindi, and Persian numbers are now supported.

lightning-formatted-rich-text : The mark HTML tag is now supported.

lightning-formatted-url : The click() method has been added.

lightning-record-edit-form :

onchange event: This component clears validation rule errors when an onchange event is fired on the overall form and when you update a field with a validation rule error. This change also applies to lightning-record-form.

lightning-input-fieldrequired attribute is added to mark filed required at client side.

lightning-tab : 

The following attributes are new.

  • end-icon-nameThe name of a utility icon to display after the tab’s label.
  • end-icon-alternative-text—Alternative text for the end icon.

lightning-treeselected-item attribute added to select and highlight specified tree item.Tree item names are case-sensitive. If the tree item is nested, selecting this item also expands the parent branches.

lightning/flowSupport:

Lightning web component can now added in flow screen. To make a Lightning web component available to a flow screen as a screen component, lightning__FlowScreen must be a target in the component’s targets tag, and the isExposed tag must be set to true. The component can use events in the new lightning/flowSupport module.

Below Events included to provides access to flow events. Use these events to control flow navigation and notify the flow runtime of changes in attribute values.

  • FlowAttributeChangeEvent—Informs the flow runtime that a component property has changed.
  • FlowNavigationBackEvent—Requests navigation to the previous screen.
  • FlowNavigationNextEvent—Requests navigation to the next screen.
  • FlowNavigationPauseEvent—Requests the flow runtime to pause the flow.
  • FlowNavigationFinishEvent—Requests the flow runtime to finish the flow.
// Syntax
import {LightningElement, api} from 'lwc';
import {FlowAttributeChangeEvent, FlowNavigationNextEvent} from 'lightning/flowSupport';
export default class MyFlowComponent extends LightningElement {
  @api
  numberOfClicks = 0;
  handleClick() {
    // Notify flow that the number of clicks has increased.
    let newNumClicks = this.numberOfClicks + 1;
    const attributeChangeEvent = new FlowAttributeChangeEvent('numberOfClicks', newNumClicks);
    this.dispatchEvent(attributeChangeEvent);
  }
  handleGoNext() {
       // Navigate next when user clicks next button.
       const nextNavigationEvent = new FlowNavigationNextEvent();
       this.dispatchEvent(nextNavigationEvent);
  }
}

@salesforce/client/formFactor:

This will indicate the form factor of the hardware on which the browser is running. Possible values are:

  • Large—Desktop client
  • Medium—Tablet client
  • Small—Phone client

These values need to pass in getRecordCreateDefaults wire adapter to get the default layout information and object information for creating a record.

 

@salesforce/messageChannel (Developer Preview)

Lightning Message Service API is added to communicate across the DOM, between Aura components, Visualforce pages, and Lightning web components. A Lightning web component uses a Lightning message channel to access the Lightning Message Service API.

/ Syntax
import channelName from '@salesforce/messageChannel/channelReference';

channelName—An imported symbol that identifies the message channel.

// Syntax for resources in a managed package
import channelName from '@salesforce/messageChannel/namespace__channelReference';

channelReference—The API name of the message channel.

namespace—If the message channel is in a managed package, this value is the namespace of the managed package. If the message channel is not in a managed package, omit the namespace.

For more information, see Communicate Across Salesforce UI Technologies with Lightning Message Service.

lightning/uiRecordApi

Non-array strings are now supported for the following parameters in the getRecord wire adapter.

  • fields
  • layoutTypes
  • modes
  • optionalFields

Non-array strings are now supported for the following parameter in the getRecordUi wire adapter.

  • optionalFields

Reference : https://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_lc_nc.htm

You may also like

Leave a Comment