Lightning Quick Action in LWC.

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.

nothing to show. crazy right? 😁

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.”