[SalesForce] How to make a Lightning modal window pop-up with a quick action

I am new to LWC development, but I do know my Apex code and VF pages. What I am looking for: clicking a quick action on a standard Lightning record page should open a modal Lightning window (which I am building).

Googling gives me results for LWC and for Aura, but I don't know if Aura is advisable to use.

To use an LWC in an action, you must have proper attributes in the .js-meta.xml file. I am fine with that. The .html file is also no problem. But then? The secret to a modal pop-up behavior is in the .js file, I think. What are the magic words?

I tried to implement force:lightningQuickAction as well as extend LightningElement, but that gives the error "implements clauses can only be used in a .ts file". So I think that that is not the way to go. And the documentation does not make it clear to me if force:lightningQuickAction is specific for Aura, or that it can be used in LWC as well.

Can anyone give me any pointers? Is it possible to do it 100% LWC or must I use some Aura as well?

Best Answer

Update: It's now Generally Available (GA) for LWC in Summer '21. For your use case (open a modal), you can utilize the ScreenAction actionType under the Lightning__RecordAction target now:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <targetConfig targets="lightning__RecordAction">

Original Answer pre-Summer '21:

It's not supported for Quick Actions as mentioned here. There's an idea to support this that I suggest voting on.

Unsupported Experiences and Tools

Lightning Web Components doesn’t currently support these Salesforce experiences and tools. To use a Lightning web component with these experiences and tools, wrap the component in an Aura component.

  • Salesforce Console APIs (Navigation Item API, Workspace API, Utility Bar API)
  • URL Addressable Tabs
  • Conversation Toolkit API, Omni Toolkit API, Quick Action API
  • Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions
  • Chatter Extensions

You'll have to either:

  1. wrap the component in an Aura component
<aura:component implements="force:lightningQuickAction">
  1. As Phil W mentions in the comment to this post, you can use the LWC "modal" as a screen in a Screen Flow. There's dedicated sections in the LWC documentation that concern Flow and there's examples out there.
Related Topic