We are thrilled to announce that Dynamic Components with Lightning Web Components (LWC) have reached General Availability in the Winter ’24 release. This marks a significant enhancement to the LWC framework. Dynamic Components enable developers and administrators to provide flexible, customizable experiences by harnessing the power of dynamic import and instantiation. They empower developers and administrators while boosting developer productivity by simplifying the creation of custom UI and the reuse of components across applications.
Dynamic Components have been a well-loved feature on the Salesforce Lightning platform, using the Aura framework. They have allowed administrators and developers to create reusable and configurable components without extensive coding. Now, this highly sought-after functionality is extending to the LWC framework, expanding the possibilities for creating flexible and adaptable UI.
What do dynamic components entail?
Dynamic components enable the creation of configurable and reusable components that can be dynamically included or excluded from a Lightning App Builder page or an LWC-based application. These components expose properties that allow developers to manage their behavior, appearance, or displayed data, offering extensive customization possibilities.
Introducing Dynamic Components for Lightning Web Components
With the incorporation of dynamic components support for LWCs, developers can leverage the advantages of dynamic composition within the contemporary LWC framework. This capability facilitates the seamless integration of configurable components into LWC-based applications, emphasizing reusability and streamlining the development process.
To instantiate a dynamic component, the component’s configuration file should encompass the “lightning__dynamicComponent” capability.
<!--?xml version="1.0" encoding="UTF-8"?--> <lightningcomponentbundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiversion>59.0</apiversion> <capabilities> <capability>lightning__dynamicComponent</capability> </capabilities> </lightningcomponentbundle>
To create a component dynamically, utilize the lwc:component managed element in conjunction with the lwc:is directive.
<template> <div class="container"> <lwc:component lwc:is={componentConstructor}></lwc:component> </div> </template>
Import the custom element within the connectedCallback() method using the dynamic import syntax provided by import().
import { LightningElement } from 'lwc'; export default class extends LightningElement { componentConstructor; // Use connectedCallback() on the dynamic component // to signal when it's attached to the DOM connectedCallback() { import('c/concreteComponent') .then(({ default: ctor }) => this.componentConstructor = ctor) .catch(err => console.log('Error importing component')); } }
The import() call yields a promise that resolves to a LightningElement constructor, which is then displayed in place of the lwc:component. The tag name for the dynamic component corresponds to the constructor’s return value.
Like a standard LWC custom element, the dynamic component is generated and added to the DOM. If the constructor for the dynamic component is altered, the existing element is removed from the DOM.For instance, after the import operation is finished, the following HTML will be generated.To utilize this feature, it’s necessary to set the apiVersion property to 55.0 or a later version and enable Lightning Web Security in your organization.
Noteworthy Attributes of Dynamic Components
Simplified UI Configuration: Dynamic components in LWC simplify configuration by exposing properties that can be adjusted at runtime. This user-friendly feature empowers administrators and non-technical users to customize the application interface without extensive coding.
Component Reusability and Easy Maintenance: Developers can create reusable dynamic components, reducing the need to duplicate code. This approach allows for building a consistent UI that can be adapted to various use cases or scenarios, eliminating the necessity to build multiple versions of similar components.
Improved User Experience: Dynamic components give administrators the ability to create flexible and adaptable user interfaces. They can easily add, remove, or rearrange components within an application’s layout, resulting in personalized experiences tailored to users’ specific needs.
Begin your journey with Dynamic Components for LWC today.
To get started with Dynamic Components for LWC, developers can access the updated documentation and developer guide, providing in-depth information on creating dynamic components, configuring properties, and seamlessly integrating them into LWC applications. Additionally, for those who prefer a hands-on learning approach, you can watch a codeLive episode.
The introduction of dynamic components support for LWCs is a significant milestone within the Salesforce ecosystem, offering vast customization possibilities to ensure your Salesforce applications meet the unique needs of your users.
We’re excited to introduce this powerful capability to the LWC framework and are eager to witness the innovative solutions that our developer community will create using dynamic components. Stay tuned for more updates and resources as we continue to expand LWC capabilities, empowering you on your Salesforce journey.