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.
Hi Saurabh, all your blog posts are really helpful. I found this article really helpful. Need your guidance regarding, a small popup is opening for a fraction of seconds before opening actual LWC component. Is there a way to hide that? And LWC has close button in it, but upon clicking it the opened tab(window) is not closing. I tried window.close() and sending event from lwc to aura but nothing seems working. Any tips on these two.
Thanks
Kiran