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); }
Labels:

Comments

Post a Comment

Popular posts from this blog

Maintain Your Administrator Certification for Spring ’24

Maintain Your Administrator Certification for Spring ’24 Intelligence Views Intelligence views are now available for leads, contacts, and accounts in Sales Cloud. Turn on a view in Setup and then add the Intelligence View button to the view-button layout for the applicable page. New Salesforce organizations include the views by default, but admins for existing orgs can enable: Lead Intelligence View Contact Intelligence View Account Intelligence View Find specifics about these views in the next three topics. Turn on Contact Intelligence View in Contact Intelligence View Setup and add the Intelligence View button to the Contact List View button layout. To view engagement metrics, enable Email Tracking in the Inbox section of Sales Engagement Setup. To see the Intelligence View, users go to the Contact home page and click Intelligence View. To view engagement metrics, choose Engagement Metrics from the Metrics menu. To see the Account Intelligence view, go to the account home page and cl...
4 comments
Read more

Platform App Builder Certification Maintenance (Winter '24)

 Maintain Your Platform App Builder Certification for Winter ’24 The Enable Reactive Components for Screen Flows running API Version 57.0 and 58.0 setting expires in Winter ’25. Before that release, upgrade your flows to run on API version 59.0 or later to take advantage of reactive components. Build Screen Flows with Reactive Global Variables Save time by referencing global variables in reactive formulas on flow screens. Use custom labels in reactive formulas to display translatable text to your users. For example, create a custom setting called DiscountPercentage, which specifies org, profile, and user discount percentages. Reference the variable in reactive formulas across a screen flow. The screen flow applies the correct discount value for the user running the flow and recalculates the value as the user makes changes.   Build Screen Flows with Reactive Selections Use choice components to respond to user selections elsewhere on the same screen. For example, on a flow ...
Post a Comment
Read more

Platform Developer I Certification Maintenance (Winter '24)

Due Date:   December 6, 2024 1. Which SOQL keywords can be used to respect the object permissions of the running user for a query in Apex code? A. WITH USER_MODE 2. Where can an error message be displayed by adding the Custom Error Message element to a flow? A. In a window on the record page and As an inline error on a specific field 3. Why are the lwc:if, lwc:elseif, and lwc:else conditional directives more efficient than the legacy if:true and if:else directives? A. Property getters are accessed only once per instance of the directive. 4. Which of the following can be used to iterate through lists or sets in a for loop? C. Iterable variable 5. Which Apex feature can be used to customize the behavior of the List.sort() method? B. Comparator interface Get Hands-on with Bind Variables in a SOQL Query Launch the org you’ll use for the hands-on challenge, then do the following prework. Step: 1 Now, as mentioned in trailhead challenge, we need to create one apex class. To open the Deve...
Post a Comment
Read more

Translate