Top 5 Features for Salesforce Lightning Developer in Winter’21 Release #BeReleaseReady

#Salesforce #Release #Winter21 #LightningDevelopers

1. Scan a Barcode in a Lightning Web Component (Beta)

  • Added resumeCapture() to allow continuous scanning of multiple barcodes.
  • Increased control over the scanning user experience.
  • Improved error handling and error responses.
  1. Import BarcodeScanner into your component definition.
  2. Test to make sure BarcodeScanner is available before you call scanning lifecycle functions.
  3. Use the scanning lifecycle functions to start and stop scanning.

2. Increased Timeout for Client-Side Caching

3. Add Custom Buttons to the lightning-input-rich-text Base Component (Beta)

<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>
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)

<template>
<button class="slds-button slds-button_brand">Submit</button>
</template>
:host {
--sds-c-button-brand-color-background: orange;
--sds-c-button-brand-color-border: orange;
/* Other CSS custom properties here */
}
/* Replace this CSS rule with
the --sds-c-button-brand-* custom properties
as shown in the previous example */

.slds-button_brand {
background-color: orange;
}
<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

New Components

Changed Lightning Web Components

  • 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.
  • 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'}
];
  • UTF-8 encoding is supported for entering an international email address.
  • 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.
  • 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.
  • 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.
setFormat({bold: true, italic: true, link: "google.com", color: "green", header: 2})

Say Hello To Me On Twitter | Facebook | Linkedin | Medium Blog | Blogger

#HappyLearning #LightningDeveloper #Winter21 #BeReleaseReady #Salesforceguy

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Swayam Chouksey

Salesforce Evangelist || Blockchain Enthusiast || Architect || Trainer || Blogger || Believes in turning Ideas to reality || Day Dreamer || Happy Person