- \n
- Declare the LWC component function as public<\/strong> by using the
@api<\/code> decorator<\/strong>.<\/li>\n\n\n\n- Access the LWC component from the Aura component using
aura:id<\/strong><\/code><\/li>\n<\/ul>\n\n\n\nThe example below features a Lightning button labeled “Call LWC Function”<\/strong>. When clicked, it calls the LWC component function and displays the message: “LWC Function Invoked through Aura Component.”<\/strong><\/p>\n\n\n\n
The following code is for the LWC component that displays text when invoked by the Aura component.<\/p>\n\n\n\n
LWCComponent.html<\/mark><\/strong><\/h2>\n\n\n\n
<template> \n <div class=\"slds-box\"> \n <div if:true={DisplayText}>{textValue}<\/div> \n <\/div> \n <\/template><\/mark><\/code><\/pre>\n\n\n\nLWCComponent.js<\/mark><\/strong><\/h2>\n\n\n\n
import { LightningElement, track, api } from 'lwc'; \n export default class lWCComponent extends LightningElement\n{ \n DisplayText = false;\n textValue='LWC Function Invoked through Aura Component' \n @api LWCFunction()\n {\n this.DisplayText = true; \n }\n}<\/code><\/pre>\n\n\n\nThe following code is the Aura Component to call the above LWC component on a button click.<\/p>\n\n\n\n
AuraComp.cmp<\/mark><\/strong><\/h2>\n\n\n\n
<aura:component implements=\"force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction\" access=\"global\" > \n <div class=\"slds-box\">\n <lightning:button variant=\"brand\" label=\"Call LWC Function\" onclick=\"{! c.handleClick }\" \/> \n <\/div> \n <c:lWCComponent2 aura:id=\"lWCComponent2\"><\/c:lWCComponent2> \n<\/aura:component><\/code><\/pre>\n\n\n\nAuraCompController.js<\/mark><\/strong><\/h2>\n\n\n\n
({ \n handleClick : function(component, event, helper) \n { \n component.find('lWCComponent2').LWCFunction (); \n } \n})<\/code><\/pre>\n\n\n\nOutput:<\/mark><\/strong><\/h2>\n\n\n\n
![\"Before](\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/1.Before-Invoking-LWC.png\")
<\/a><\/center>\nBefore Invoking LWC<\/i><\/center><\/font>\n\n\n\n ![\"Invoke](\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/2.After-Invoking-LWC.png\")
<\/a><\/center>\nInvoke an LWC Component function from Aura Component<\/i><\/center><\/font>\n\n\n\n The above steps shows how user can fetch the current record Id from Salesforce<\/a> using LWC.<\/p>\n\n\n\n
We hope that you find this blog helpful, if you still have queries, don\u2019t hesitate to contact us at salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n
About Us<\/b><\/br>\n
Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.
Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration<\/a> for Sage X3<\/a>, Sage 100<\/a> and Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on Salesforce AppExchange<\/a>.
The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.
For more information on our Salesforce products and services, contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\nRelated Posts<\/strong><\/p>\n\n\n\n
- \n
- How to Create Multi-Select Pick-list Field Using Lightning Web Component<\/a><\/li>\n\n\n\n
- Call the apex method in lightning web component<\/a><\/li>\n\n\n\n
- Create records from Apex Restful Service in Salesforce<\/a><\/li>\n\n\n\n
- Clone Record of Any Object using Flows in Salesforce<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
This blog\u00a0explains how to call a LWC component function from an Aura component when an Aura event takes place. To invoke an LWC function from an Aura component, follow these steps: The example below features a Lightning button labeled “Call LWC Function”. When clicked, it calls the LWC component function and displays the message: “LWC\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1266,1131,1267,1068,206,1055,1069,207,208,1050,1049,651],"class_list":["post-6620","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-api-decorator","tag-aura","tag-aura-component","tag-aura-method","tag-lightning","tag-lightning-aura-component","tag-lightning-aura-method","tag-lightning-basics","tag-lightning-component","tag-lightning-web-component","tag-lwc","tag-salesforce-lightning-component"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6620"}],"version-history":[{"count":15,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6620\/revisions"}],"predecessor-version":[{"id":11524,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6620\/revisions\/11524"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Call the apex method in lightning web component<\/a><\/li>\n\n\n\n
- Access the LWC component from the Aura component using