4

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?

Improve this question

2 Answers 2

Reset to default
4

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">
   <apiVersion>52.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__RecordAction</target>
   </targets>
    <targetConfigs>
   <targetConfig targets="lightning__RecordAction">
     <actionType>ScreenAction</actionType>
   </targetConfig>
 </targetConfigs>
</LightningComponentBundle>

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">
    <c:yourLwc></c:yourLwc>
<aura:component>
  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.
Improve this answer
2
  • 2
    An alternative is to actually implement the "modal" as a Screen in a Screen Flow. That obviously only works if what you are trying to do fits with what can be done with Flows and Screens.
    – Phil W
    Commented Feb 5, 2020 at 14:00
  • Thank you, this helps me. In the idea I found a pointer to a Github project, github.com/1ktribble/Simple-Quick-Action-Lighting-Web-Component, that has a simple example of all the code that is needed.
    – Sander de Jong
    Commented Feb 5, 2020 at 14:08
1

This is already supported since Summer 21

Check it here.

Improve this answer
1
  • Thanks, I will check it out.
    – Sander de Jong
    Commented Jul 27, 2021 at 14:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .