Sunday, September 24, 2023
HomeUncategorizedPrime 5 Lightning Internet Part Gems of Salesforce Winter'23 Launch!

Prime 5 Lightning Internet Part Gems of Salesforce Winter’23 Launch!

[ad_1]

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.  

  1. 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. 
    1. 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.
  2. 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.
    1. To create a modal element, import LightningModal from lightning/modal in your JavaScript file. Then, create a element class that extends LightningModal.
      /* c/myModal.js */
      
      import { api } from 'lwc';
      import LightningModal from 'lightning/modal';
      
      export default class MyModal extends LightningModal {
      
          handleOkay() {
              this.shut('okay');
          }
      }


    2. This element doesn’t use a lightning-modal tag. As an alternative, the modal’s HTML template makes use of helper lightning-modal-* parts to make the modal’s header, footer, and physique. The lightning-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>


  3. 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.
    1.  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 error No 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 the calc 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)));
      }



  4. 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.
  5. 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.
    1. 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'
      }


      Use the 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.


Further Enhancements Value Noting!

  1. 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.
    1. 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.
  2. 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.
  3. New Lightning Internet Elements: – Do extra with Lightning internet parts by utilizing modules.
    1. expertise/cmsDeliveryApiThis module features a new wire adapter for retrieving content material from an enhanced CMS workspace to make use of in an enhanced LWR website.
      1. getContent—Retrieves revealed content material from enhanced CMS workspaces.
    2. expertise/cmsEditorApi This module consists of new wire adapters and strategies for working with the content material editor in an enhanced CMS workspace.
      1. The brand new wire adapters are:
        1. getContent—Retrieves the title, urlName, and contentBody of the content material merchandise primarily based on the content material sort—picture, information, doc, or customized content material.
        2. getContext—Retrieves metadata that gives contextual details about the content material merchandise within the CMS content material editor.
      2. The brand new methodology is:
          1. setContent—Updates the title and contentBody 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;
            }


    3. 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.
    4. lightning/modal – This module features a new library used to create the brand new modal element.
      • LightningModal— Lengthen this element as an alternative of LightningElement 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 */
        }


Formative Evaluation:

I need to hear from you!

 

What’s your favourite Winter’23 launch notice, the Lightning Internet Part gem? Care to share? You’ll be able to obtain launch notes in HTML format! for PDF information.

 

Be at liberty to share within the feedback beneath.

[ad_2]

Source link

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments