Top 5 Features for Salesforce Lightning Developer in Winter’21 Release #BeReleaseReady
1. Scan a Barcode in a Lightning Web Component (Beta)
Use the BarcodeScanner API to add barcode scanning to your Lightning web components. Scan UPC, QR, and other standard barcode types from Lightning components running on a mobile device. Look up product details, record inventory scans, save contact details from a conference badge — your code, your way!
Where: This feature is available in Lightning web components when they’re running in the Salesforce mobile app or Mobile Publisher.
Why: Improvements to the BarcodeScanner API in this release include the following.
- Added resumeCapture() to allow continuous scanning of multiple barcodes.
- Increased control over the scanning user experience.
- Improved error handling and error responses.
How: Using BarcodeScanner in your Lightning web component is straightforward.
- Import BarcodeScanner into your component definition.
- Test to make sure BarcodeScanner is available before you call scanning lifecycle functions.
- Use the scanning lifecycle functions to start and stop scanning.
For complete details, see Scan Barcodes on a Mobile Device in the Lightning Web Components Developer Guide.
2. Increased Timeout for Client-Side Caching
When a component is generated on the server from metadata, the page loads from a client-side cache of the indexed database. The client-side cache timeout has increased from 15 minutes to 8 hours, with a refresh interval of 15 minutes. This increased timeout can result in faster page loads for users who bootstrap the application frequently or click links from outside the application to open a new browser window or tab to Lightning Experience.
3. Add Custom Buttons to the lightning-input-rich-text Base Component (Beta)
You can add buttons to perform actions that you define, such as inserting an email template, applying formats, or adding a link to your FAQ. You can even open a popup from a custom button. Define a custom button using two new components together, nested in the lightning-input-rich-text component.
Where: This change applies to Lightning Experience, Lightning communities, and the Salesforce app.
How: In your lightning-input-rich-text component, place a lightning-rich-text-toolbar-button-group component in a slot named toolbar to contain your custom buttons. Place a lightning-rich-text-toolbar-button component for each custom button inside the lightning-rich-text-toolbar-button-group component.
In the lightning-rich-text-toolbar-button component, display a utility icon on the button using the icon-name attribute, and specify onclick for your button’s action.
lightning-rich-text-toolbar-button provides the methods showPopup() and closePopup(), which you can use in your button handler to open and close a popup. Provide the content of the popup by nesting components inside lightning-rich-text-toolbar-button.
This example adds a custom button to apply the code-block style. The lightning-input-rich-text component doesn’t include code-block by default. The formats attribute must specify all the formats to allow in the rich text editor, including code-block.
<template>
<lightning-input-rich-text formats="font, bold, italic, underline, strike,
list, indent, align, link, image, clean, code, code-block, color, background, header">
<lightning-rich-text-toolbar-button-group slot="toolbar" aria-label="First group">
<lightning-rich-text-toolbar-button
icon-name="utility:insert_tag_field"
icon-alternative-text="Code Block"
onclick={handleCodeBlockButtonClick}>
</lightning-rich-text-toolbar-button>
</lightning-rich-text-toolbar-button-group>
</lightning-input-rich-text>
</template>The button handler gets the format that’s currently applied, and then sets or unsets the code-block format using the setFormat() method.
import { LightningElement } from 'lwc';
export default class CustomButtonDemo extends LightningElement {
handleCodeBlockButtonClick() {
const inputRichText = this.template.querySelector('lightning-input-rich-text');
let format = inputRichText.getFormat();
// Set or unset code-block format based on format on current selection
if (format['code-block']) {
inputRichText.setFormat({ 'code-block': false });
} else {
inputRichText.setFormat({ 'code-block': true });
}
}
}4. Customize Components with Lightning Design System Styling Hooks (Beta)
Lightning Design System Styling Hooks provide you with a set of CSS custom properties so you can customize a component’s look and feel. In Winter ’21, a limited set of CSS custom properties is available for component-level customizations.
Why: Styling hooks make it easy to customize component styling and express your brand, especially when working with web components and shadow DOM. For a list of component blueprints that support styling hooks, see the Lightning Design System website.
How: Styling hooks are placeholders in the Lightning Design System stylesheet, for example, var( — sds-c-badge — color-background, #ecebea), which enable you to use the corresponding — sds-c-badge-color-background CSS custom property with your own styling.
A CSS custom property corresponds to a Lightning Design System component blueprint and its design variations. Let’s take a look at a Lightning web component that implements the button blueprint with the brand variation, which turns the background color a standard Salesforce blue.
<template>
<button class="slds-button slds-button_brand">Submit</button>
</template>To apply a different background color to the brand variation, specify the corresponding CSS custom property. In this case, declare your style via the — sds-c-button-brand-color-background custom property. To target all elements in a component with your custom styles, use the :host selector.
:host {
--sds-c-button-brand-color-background: orange;
--sds-c-button-brand-color-border: orange;
/* Other CSS custom properties here */
}This CSS declaration turns your button elements with the slds-button_brand class orange.
If you are overriding the styles by targeting an SLDS class name in your template, replace them with CSS custom properties instead. For example, replace the following style override with --sds-c-button-brand-color-background.
/* Replace this CSS rule with
the --sds-c-button-brand-* custom properties
as shown in the previous example */
.slds-button_brand {
background-color: orange;
}Let’s take a look at base components next. Base components implement Lightning Design System blueprints and design variations. Previously, you couldn’t customize the style on a base component easily. To customize the style on a base component, such as lightning-button, specify the corresponding CSS custom property.
<template>
<lightning-button variant="brand"
label="Submit"
onclick={handleClick}>
</lightning-button>
</template>:host {
--sds-c-button-brand-color-background: orange;
--sds-c-button-brand-color-border
5. New and Changed Lightning Web Components
Build UI easily with these new and changed components.
New Components
The following components are new and require API version 50.0 and later.
lightning-rich-text-toolbar-button (Beta)Adds a custom button to the toolbar of the lightning-input-rich-text component. This component must be nested within lightning-rich-text-toolbar-button-group. For more information, see Add Custom Buttons to the lightning-input-rich-text Base Component (Beta).lightning-rich-text-toolbar-button-group (Beta)A container for custom buttons in the toolbar of the lightning-input-rich-text component. For more information, see Add Custom Buttons to the lightning-input-rich-text Base Component (Beta).
Changed Lightning Web Components
The following components have changed.
lightning-click-to-dialThe following method is new.
- click() — Dials the phone number by passing the parameters and record Id to the phone system if they are provided. Only an enabled phone number can be clicked.
lightning-comboboxThe following property is new for the options attribute.
- description — Defines descriptive text for a list item. The descriptive text displays below the label of the list item. When adding descriptions, specify a description for each item in a list. If some items are missing descriptions, the text of the items can be misaligned.
- Here’s an example using the description property in a component’s JavaScript:
options = [
{value: 'new', label: 'New', description: 'A new item'},
{value: 'in-progress', label: 'In Progress', description: 'Currently working on this item'},
{value: 'finished', label: 'Finished', description: 'Done working on this item'}
];lightning-datatableColumns with the text data type now don’t display any content if you pass in an object value.lightning-inputThe input type email has changed.
- UTF-8 encoding is supported for entering an international email address.
lightning-input-addressThe following attributes are new.
- address-lookup-placeholder — The placeholder for the address lookup field, which is visible only when you use show-address-lookup.
- street-placeholder — The placeholder for the street field.
- city-placeholder — The placeholder for the city field.
- province-placeholder — The placeholder for the province field.
- country-placeholder — The placeholder for the country field.
- postal-code-placeholder — The placeholder for the postal code field.
lightning-input-fieldThe following field types have changed.
- The picklist field type displays in a disabled and read-only state if you don’t provide a controlling field.
- The email field type supports UTF-8 encoding for entering an international email address.
- The name field type supports the suffix field. For more information on enabling this field in your org, see User Fields in Salesforce Help.
lightning-input-rich-textYou can add custom buttons to the toolbar using the components lightning-rich-text-toolbar-button-group and lightning-rich-text-toolbar-button. For more information, see Add Custom Buttons to the lightning-input-rich-text Base Component (Beta).The setRangeText() method (beta) is new.
- setRangeText() — Inserts text in a specified range of index values, replacing content or inserting new content. This method follows the API of the HTMLInputElement.setRangeText() method, and enables you to insert formatted text when you use it with the setFormat() method.
The setFormat() method has changed. You can programmatically set these additional formats: bold, italic, underline, strike, code, code-block, link, color, background, and header. Previously, only align, font, and size were supported.
Apply formats to selected text by calling the method with key-value pairs as parameters. For example:
setFormat({bold: true, italic: true, link: "google.com", color: "green", header: 2})lightning-pill-containerWhen a pill contains an href value, the optional icon or avatar is no longer nested within the hyperlink tag. Clicking the icon or avatar doesn’t navigate to the hyperlink. This behavior is consistent with a lightning:pill component that’s rendered without lightning:pillContainer.The bare variant no longer renders pills in an unordered list element. However, the standard and bare variants are visually the same. The bare variant provides a focusable remove button on each pill. Tab to focus on the pill, and tab again to focus on the remove button.lightning-textareaThe setRangeText() method (beta) is new.
- setRangeText() — Inserts text in a specified range of index values, replacing content or inserting new content. This method follows the API of the HTMLInputElement.setRangeText() method.
There are many other features as well, Official release notes are available HTML format as well as PDF file.
