Share JavaScript Code Between LWC and Aura

In this post, we will implement the functionality to share JavaScript code between LWC and Aura Component. Many projects use the Aura Component and LWC in the same project. And if there is some common JavaScript code that is used in both types of components, we can keep the common JavaScript Code in a single module that can be accessed from both LWC and Aura Component. Let’s hop into the implementation.

Implementation

In this implementation, we will create an ES6 module using the Lightning Web Components programming model. This function will display Toast Notification based on the parameters passed from the LWC or Aura Component.

Share JavaScript Code Between LWC and Aura
Share JavaScript Code Between LWC and Aura

First, create an ES6 module by creating a Lightning Web Component. This component will only contain JavaScript code in the JS Controller file. Add function showToastMessage which accepts three parameters to display TItle, Message, and Type of Toast notification. Then, export this function using export {showToastMessage}.

Check this post to know how to display Toast Notifications in Lightning Web Component. I recommend to check it as this post won’t explain it. Though just like other posts, this post will contain all the code.

showToast.js

import {ShowToastEvent} from 'lightning/platformShowToastEvent';

const showToastMessage = function(strTitle, strMsg, strType){
    const successToast = new ShowToastEvent({
        title : strTitle,
        message : strMsg,
        variant : strType
    });
    dispatchEvent(successToast);
}

export {showToastMessage};

Share JavaScript Code in LWC

Create a Lightning Web Component that will have a button. After clicking a button, call showSuccessNotification JS Controller method.

lwcCmp.html

<template>
    <lightning-card title="Lightning Web Component">
        <lightning-layout>
            <lightning-layout-item size="12" flexibility="grow">
                <div class="slds-p-horizontal_small">
                    <lightning-button label="Show Toast from LWC" 
                                    onclick={showSuccessNotification}></lightning-button>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

In JS Controller, import showToastMessage from ES6 module that we created earlier using import statement like below:

import { showToastMessage } from 'c/showToast';

Finally, call showToastMessage method with required parameters.

lwcCmp.js

import { LightningElement } from 'lwc';
import { showToastMessage } from 'c/showToast';
 
export default class LwcCmp extends LightningElement {
    
    showSuccessNotification(){
        showToastMessage('Success', 'This is a Success Notification from LWC.', 'success');
    }
}

Share JavaScript Code in Aura Component

Create an Aura Component and add a markup to display button. Once the button is clicked, call showToast method of JS Controller. Include ES6 module just like other Lightning Components we include in Aura Component:

<c:showToast aura:id="idToastService"/>

AuraCmp.cmp

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">

    <!-- Include ES6 module-->
    <c:showToast aura:id="idToastService"/>
    <lightning:card title="Lightning Aura Component">
        <div class="slds-p-left_x-small">
            <lightning:button label="Show Toast from Aura" onclick="{!c.showToast}" />
        </div>
    </lightning:card>
</aura:component>

In JS Controller, get the reference of showToast ES6 module and call showToastMessage with required parameters.

AuraCmpController.js

({
    showToast : function(component, event, helper) {
        const toastService = component.find('idToastService');
        toastService.showToastMessage('Information', 'This is the Information Notification from AURA.', 'info');
    }
})

This is how we can Share JavaScript Code Between LWC and Aura Component. If you don’t want to miss new implementations, please Subscribe here.

If you want to know more about Sharing Javascript Code, you can check official Salesforce documentation here.

See you in the next implementation !

Leave a Reply

Your email address will not be published. Required fields are marked *