Skip to main content

Latest Post

Record Types & Page Layout Strategy

  Record Types & Page Layout Strategy 💬 In plain words:   Record Types let one object act like different forms for different teams. Different picklist values, page layouts, and processes — same Account object. Use them for truly different business processes. Not for cosmetic layout changes. 📌 Example:   One Account object, two businesses: 'Retail Customer' record type shows B2C picklist values and layout. 'Enterprise Client' shows contract fields and a different sales process. Same table, two costumes. 🧠 One object, many costumes:   A Record Type is a costume on the same object — different picklists and layouts, same table underneath. Concept Record Types split one object into business variants. •   Each type can carry its own subset of picklist values, its own business process — Lead, Case and Opportunity stages — and its own page layout per profile. •   Lightning has changed the calculus. Dynamic Forms and conditional comp...

LWC Dynamic Code: Calling LWC from Aura Component

Introduction:

In Salesforce development, Lightning Web Components (LWC) and Aura Components are two widely used frameworks for building user interfaces. While Aura Components have been around for a while, LWC introduces a modern, lightweight approach to component-based development. In this blog post, we will explore how to dynamically call an LWC from an Aura Component, allowing for flexible and dynamic user interfaces.


Prerequisites:


Before diving into the implementation, ensure that you have a Salesforce Developer Edition or any suitable Salesforce org for testing purposes. Additionally, you should have a basic understanding of both Aura Components and LWC.


Step 1: Create an Aura Component


Let's start by creating an Aura Component that will dynamically call an LWC. Open your Salesforce Developer Console or preferred IDE, and create a new Aura Component with the following code:


<aura:component>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <div aura:id="lwcContainer"></div>

</aura:component>


Step 2: Create the Aura Component Controller


Next, create a controller for the Aura Component to handle the initialization and dynamic LWC creation. Add the following code to the Aura Component's controller:


({

    doInit: function (component, event, helper) {

        $A.createComponent(

            "c:lwcComponentName",

            {},

            function (newComponent, status, errorMessage) {

                if (status === "SUCCESS") {

                    var container = component.find("lwcContainer");

                    container.set("v.body", [newComponent]);

                } else if (status === "INCOMPLETE") {

                    console.log("No response from server or client is offline.")

                } else if (status === "ERROR") {

                    console.log("Error: " + errorMessage);

                }

            }

        );

    }

})


Replace lwcComponentName with the actual name of your LWC.


Step 3: Create the LWC Component


Now, let's create the LWC component that will be dynamically called from the Aura Component. In your Salesforce Developer Console or preferred IDE, create a new LWC with the following code:


<template>

    <lightning-card title="Dynamically Called LWC" variant="base">

        <!-- Add your LWC content here -->

    </lightning-card>

</template>


Step 4: Register the LWC in the Aura Component


To allow the Aura Component to recognize and call the LWC, you need to register it in the Aura Component's markup. Open the Aura Component file and add the following line at the top:


<aura:registerComponent

    name="c:lwcComponentName"

    description="Sample LWC Component"

    access="global"

/>


Replace lwcComponentName with the actual name of your LWC.


Step 5: Testing


Now that everything is set up, save all the files and deploy the Aura Component and the LWC to your Salesforce org. Once deployed, create a Lightning App or open an existing page where you want to use the Aura Component. Add the Aura Component to the page, and you should see the dynamically called LWC within the designated container.


Conclusion:


In this blog post, we explored how to dynamically call an LWC from an Aura Component. By following the step-by-step guide, you should now have a better understanding of how to leverage the flexibility of LWC within Aura Components. This dynamic approach allows for more customizable and adaptable user interfaces, enhancing the overall Salesforce development experience. Feel free to experiment further and explore the extensive capabilities of both Aura and LWC frameworks. Happy coding!