Lightning Quick Action in LWC.

3 min readFeb 15, 2020

After the release of Salesforce LWC (Lightning Web Component), It has become popular. but it’s new and lots of things are missing. I also stuck in a problem when I know that LWC doesn’t support Lighintning quick action. (Btw Salesforce LWC do Support quick Actions now in Spring 21 release )

So, How to implement this?

let’s start from scratch by creating an aura component the only way for Quick Actions.

<aura:component implements="force:lightningQuickActionWithoutHeader>
</aura:component>

So far so good. now let’s remove the white background by applying custom CSS so we can add LWC easily. Otherwise, LWC will be added in a weird way.

<aura:html tag="style">
.cuf-content {
  padding: 0 0rem !important;
}
.slds-p-around--medium {
  padding: 0rem !important;
}
.slds-modal__content{
  overflow-y:hidden !important;
  height:unset !important;
  max-height:unset !important;
}
</aura:html>

now our aura component will look something like this.

Now let’s move to the favorite part LWC.

create an LWC component.

<template>
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal Title</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
{displayMessage}
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={cancel}>Cancel</button>
<button class="slds-button slds-button_brand" onclick={save}>
  Save
</button>
</footer>
</template>

now add

<c:childLWC/>

in the aura component before

</aura:component>

tag.

Here is the output.

if you click on these buttons nothing will happen. So let’s add some actions to them.

Open up childLWC.js and add this code.

import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ChildLWC extends LightningElement {
  @track displayMessage = '';
  save() {
    this.dispatchEvent(new ShowToastEvent({
      title: 'Success',
      message: 'some message here.',
      variant: 'success',
    }));
    //this.dispatchEvent(new CustomEvent('close'));
  }
  cancel() {
    //this.dispatchEvent(new CustomEvent('close'));
  }
}

Wait… how about closing the modal! Well closing quick action modal is a bit tricky here because to do this we have to call

$A.get("e.force:closeQuickAction").fire()

Which you can’t do in LWC js.

So to do this we have to create a custom event in LWC. Simply un-comment the code from childLWC.js. and update

<c:childLWC onclose="{!c.closeMethodInAuraController}"/>

the aura component and add some code in the aura component controller.js

({
closeMethodInAuraController : function(component, event, helper) {
$A.get("e.force:closeQuickAction").fire();
}
})

That’s it you are good to go. Happy Coding!

Join Slack Channel for more Solutions.

“Setting Up SFDX Environment. And creating your first Lighting Web Component.”

Lightning Quick Action in LWC.

Written by Vinod Patel