Call Lightning Web Component from a Quick Action.

In Lightning, still you cannot call a LWC component from quick action directly. A LWC component needs to be wrapped inside a Aura Component and Aura Component will be referred in Quick Action override.


You can directly embed a LWC component inside a Aura Component like this.



But there are senarios where you want to open a LWC component in full screen or in different tab. Then you can't use this direct method. You need to use Lightning:Navigation for this, but the problem is Lightning:UrlAddressable is not available in Lightning Web Component. So you can't use Lightning:Navigation to navigate from Aura Component to LWC component.


To do this first we will create a Aura Component that will be called when quick action is called.


TestAuraComponent.cmp

TestAuraComponentController.js


TestAuraComponent will use lightning:navigation service to navigate to TestAuraComponent2. It will also pass recordId to TestAuraComponent2.


TestAuraComponent2.cmp

TestAuraComponent2Controller.js



TestAuraComponent2 will extract parameter from url and pass it to LWC component


Code this in LWC component Js file to get recordId.



use can directly get recordId using @api decorator.


Please note : This is a workaround till Salesforce brings some way where lightning web component can be call from quick action directly.

©2019 by SFDC Blogs.