Final Up to date on September 10, 2022 by Rakesh Gupta
The Lightning Part trendy framework is a Consumer Interface framework to develop dynamic internet apps for cellular and desktop gadgets. As is the case with every launch, the newest Winter’23 launch is full of wealthy options, together with the newly added Lightning Part options!
At the moment, the Winter’23 launch is below the pre-release program. You probably have not learn the 577 pages of Salesforce Winter’23 launch notes, take a look at the Winter’23 launch quick summary and Top 10 Gems of Salesforce Lightning Experience Written by me.
I combed by the discharge notes and highlighted the added capabilities to the Lightning Internet Part options. Consider me; it was onerous to cease at simply 5! To kick issues off, right here is my tackle the best Lightning Web Component options from the Winter’23 launch.
- Synchronize Part Information With no Web page Refresh by Utilizing RefreshView API (Pilot):- Whether or not user-driven or app-invoked, the power to synchronize information with out reloading a complete web page is a key consumer expertise requirement. The brand new
lightning/refresh
module and RefreshView API present an ordinary solution to refresh element information in LWC and Aura. Beforehand, LWC lacked an information refresh API, and Aura solely supported the legacy,drive:refreshView
which doesn’t meet the necessities of contemporary internet growth.- RefreshView API updates the information for a particular hierarchy of parts, generally known as a view, with out reloading a complete web page. This refresh ensures full synchronization with information externally sourced by parts in that view. RefreshView API can refresh information for Salesforce platform containers and customized parts.
- Create Overlays with the New Modal Part:- Use modals to interrupt a consumer’s workflow and draw consideration to an necessary message. A modal, which shows the message on prime of the present app window, requires a consumer to work together with it to regain management over the app.
- To create a modal element, import
LightningModal
fromlightning/modal
in your JavaScript file. Then, create a element class that extendsLightningModal
./* c/myModal.js */ import { api } from 'lwc'; import LightningModal from 'lightning/modal'; export default class MyModal extends LightningModal { handleOkay() { this.shut('okay'); } }
- This element doesn’t use a
lightning-modal
tag. As an alternative, the modal’s HTML template makes use of helperlightning-modal-*
parts to make the modal’s header, footer, and physique. Thelightning-modal-body
element is required, and the others are optionally available.<!-- c/myModal.html --> <template> <lightning-modal-header label="My Modal Heading"></lightning-modal-header> <lightning-modal-body>That is the modal’s contents.</lightning-modal-body> <lightning-modal-footer> <lightning-button label="OK" onclick={handleOkay}></lightning-button> </lightning-modal-footer> </template>
- To create a modal element, import
- Take away Non-World Design Tokens in CSS:- Solely design tokens labeled as World Entry (GA) are supported in your Lightning internet parts’ CSS. Non-global design tokens not work after Spring’23.
- After Spring’23, utilization of non-global design tokens, corresponding to these labeled as inside (I), ends in a validation error
No TOKEN named tokenName discovered
throughout element save for API model 57.zero and later. For instance, this utilization of the non-global--lwc-heightInput
token isn’t allowed and returns the errorNo TOKEN named drive:base.heightInput discovered
./* This non-global token utilization does not work */ div { peak: var(--lwc-heightInput); }
The next utilization is allowed, nevertheless it’s invalid due to the non-global--lwc-heightInput
token, which is positioned contained in thecalc
CSS perform./* This does not work after Spring '23 */ .resultcontainer{ peak: calc(var(--lwc-height-header) - (var(--lwc-heightInput))); }
Substitute the non-global tokens in your CSS with a worldwide token or use a customized Aura design token as an alternative.
div { peak: var(--lwc-lineHeightText); /* use a worldwide design token */ } .resultcontainer { peak: calc(var(--lwc-height-header) - (var(--lwc-lineHeightText))); }
- After Spring’23, utilization of non-global design tokens, corresponding to these labeled as inside (I), ends in a validation error
- Entry iframe Content material in Lightning Internet Safety:- Lightning Internet Safety now permits Lightning internet parts to entry content material in
iframe
components. With this modification, you should utilize one other internet growth characteristic that Lightning Locker blocks. - Allow Third-Get together Integrations with Mild DOM (Typically Accessible):- Lightning internet parts render in shadow DOM by default, offering robust encapsulation however posing challenges for international styling and plenty of third-party integrations. With mild DOM, your element markup is hooked up to the host ingredient as an alternative of its shadow tree. You’ll be able to then entry it like every other content material within the doc host.
- To allow a element to render in mild DOM, set the
renderMode
static subject in your element class.import { LightningElement } from 'lwc'; export default class LightDomApp extends LightningElement { static renderMode="mild"; // the default is 'shadow' }
lwc:render-mode
template directive on the<template>
tag of your element.<template lwc:render-mode="mild"> <my-header> <p>Hi there World</p> </my-header> </template>
Whenever you allow mild DOM on a element, it not renders its components within the
#shadow-root
tree.<my-app> <my-header> <p>Hi there World</p> </my-header> </my-app>
A lightweight DOM element can include a shadow DOM element. Equally, a shadow DOM element can include a lightweight DOM element. Nevertheless, base Lightning parts at all times render in shadow DOM. Limiting mild DOM to particular namespaces isn’t supported.
LWC doesn’t scope kinds routinely for you. To stop kinds from bleeding in or out of a element, use a
*.scoped.css
file to implement scoped kinds for a element.
- To allow a element to render in mild DOM, set the
Further Enhancements Value Noting!
- Safe Elements by Default with Lightning Internet Safety in New Orgs: – To guard customized Lightning internet parts, the setting Use Lightning Internet Safety for Lightning internet parts is enabled by default in new Salesforce orgs. The brand new Lightning Internet Safety structure is changing Lightning Locker over a number of releases.
- Lightning Locker has been the default safety structure for Lightning parts. Lightning Internet Safety (LWS) is changing Lightning Locker for Lightning internet parts initially, after which Salesforce intends so as to add assist for Aura parts over a number of releases. When enabled, LWS at present helps Lightning internet parts solely. Lightning Locker nonetheless helps Aura parts. This modification impacts your new org provided that you add Lightning internet parts or set up managed packages that include Lightning internet parts. The Lightning internet parts then run with LWS as an alternative of Lightning Locker.
- Help for Amazon Athena in Salesforce Join: – Combine information saved in Amazon S3 into your org with clicks as an alternative of utilizing customized code, ETL, or a mixture of each. Remove the “swivel chair” impact to your finish customers by surfacing S3 information straight within the Salesforce consumer expertise.
- New Lightning Internet Elements: – Do extra with Lightning internet parts by utilizing modules.
- expertise/cmsDeliveryApi – This module features a new wire adapter for retrieving content material from an enhanced CMS workspace to make use of in an enhanced LWR website.
getContent
—Retrieves revealed content material from enhanced CMS workspaces.
- expertise/cmsEditorApi – This module consists of new wire adapters and strategies for working with the content material editor in an enhanced CMS workspace.
- The brand new wire adapters are:
getContent
—Retrieves thetitle
,urlName
, andcontentBody
of the content material merchandise primarily based on the content material sort—picture, information, doc, or customized content material.getContext
—Retrieves metadata that gives contextual details about the content material merchandise within the CMS content material editor.
- The brand new methodology is:
-
setContent
—Updates the title andcontentBody
of the content material merchandise within the editor.import { LightningElement, wire } from 'lwc'; import { getContext } from 'expertise/cmsEditorApi'; export default class Instance extends LightningElement { @wire(getContext, {}) context; }
-
- The brand new wire adapters are:
- lightning/fileDownload – Permits file downloads from customized parts in LWR websites. Generates a URL that lets customers obtain Salesforce information, attachments, and paperwork from desktop and cellular gadgets.
- lightning/modal – This module features a new library used to create the brand new modal element.
LightningModal
— Lengthen this element as an alternative ofLightningElement
to create a modal. LightningModal offers your element entry to the traditional LWC assets and the particular modal container, helper parts, strategies, and occasions./* c/myModal.js */ import LightningModal from 'lightning/modal'; export default class MyModal extends LightningModal { /* element content material */ }
- expertise/cmsDeliveryApi – This module features a new wire adapter for retrieving content material from an enhanced CMS workspace to make use of in an enhanced LWR website.
Formative Evaluation:
I need to hear from you!