Skip to main content

Share JavaScript Code Between LWC and Aura


To share JavaScript code between Lightning web components and Aura components, put the code in an ES6 module.

To share an ES6 module:
  • Create an ES6 module using the Lightning Web Components programming model.
  • To use the code in a Lightning web component, import and reference it in the component’s JavaScript file.
  • To use the code in an Aura component, use the same syntax that you use to import an Aura component and call its methods.
Create a .js file, example: extendableJS

const calculateMonthlyPayment = (principal, years, rate) => { if (principal && years && rate && rate > 0) { const monthlyRate = rate / 100 / 12; const monthlyPayment = (principal * monthlyRate) / (1 - Math.pow(1 / (1 + monthlyRate), years * 12)); return monthlyPayment; } return 0; }; export { calculateMonthlyPayment };

Create a lwc which can use your .js functions, example: applicationTest

        import { LightningElement, track} from 'lwc'; import { getTermOptions, calculateMonthlyPayment } from 'c/extendableJS'; export default class ApplicationTest extends LightningElement { @track principal = 200000; @track term = 30; @track rate = 4; @track monthlyPayment = ''; calculateMonthlyPayment() { this.monthlyPayment = calculateMonthlyPayment( this.principal, this.term, this.rate ); }

Create a Aura Component which can use same .js functions, 
example: auraDomListener

<aura:attribute name="termOptions" type="List"/> <aura:attribute name="principal" type="integer" default="1000"/> <aura:attribute name="term" type="integer"/> <aura:attribute name="rate" type="integer" default="10"/> <aura:attribute name="monthlyPayment" type="integer" default=""/> <c:extendableJS aura:id="pubsub" />

     calculateMonthlyPayment:function(component, event){ var pubsub = component.find('pubsub'); var calResult = pubsub.calculateMonthlyPayment(component.get("v.principal"), component.get("v.term"),component.get("v.rate")); component.set("v.monthlyPayment",calResult); }

Comments

Popular posts from this blog

Platform Developer I Certification Maintenance (Winter '23)

 Maintain Your Platform Developer I Certification for Winter ’23 1. Field update actions have changed in API Version 54.0. Which record-triggered flows do field update actions now execute? Answer: Before-Save after After-Save 2. Which Apex class is used to determine the hostnames for the domains that Salesforce hosts for your org? Answer: System.DomainCreator 3. Which modules can be used for notifications in a Lightning web component instead of native APIs? Answer: LightningAlert, LightningConfirm, and LightningPrompt 4. What determines an org’s “shape” in Salesforce? Answer: Features, settings, edition, limits, and licenses 5. Which lightning-modal-* component is required to create a modal? Answer: Body 6. How do you call an invocable action from Apex code? Answer: Reference Invocable.Action Get Hands-On With Apex Assertions 1. Create Two Apex class: Copy and Paste below codes (A.) TestFactory @isTest public class TestFactory {    public static Account getAccount(String accountName, B

Administrator Certification Maintenance (Spring '23)

 Maintain Your Administrator Certification for Spring '23 1. What information is listed in the Details panel for recently used reports? Answer: A, B, C 2. What is used to give sales reps access to a guided process to import contacts and leads? Answer:  Sample CSV file 3. Which feature efficiently removes inactive picklist values? Answer: Bulk Delete Unused Values 4. Which type of Process Builder processes can be converted using the Migrate to Flow tool? Answer: Record-triggered Get Hands-on with Enhance Record Pages With Dynamic Forms Follow steps show in Screenshot also highlighted with Red Box:

Platform App Builder Certification Maintenance (Winter ’23)

Maintain Your Platform App Builder Certification for Winter ’23 1. What component customizes related lists directly from the Lightning App Builder? Answer:      Dynamic Related List – Single 2. Where can a debug flow test be created and saved? Answer:      Flow Builder 3. What action enables smart email auto-responses in Flow Builder? Answer:      Create Article Recommendations 4. Custom address fields improve address data accuracy for your users using what type of list? Answer: State and Country/Territory Picklists 5. What are the benefits of using Dynamic Forms on record pages? Answer:      Place fields anywhere on the page  Use Visibility Rule to show and hide fields  6. Restriction or scoping rules now allow multiple values. When should double quotes surround a value? Answer:      If a single value contains a comma  Get Hands-On With Permission Set Expiration Verify before performing this: Permission Set & Permission Set Group Assignments with Expiration Dates should be enabled

Translate