How to increase the width of Quick Action and call the LWC from Quick Action?

Problem Statement: In many projects, I got the requirement to call the Lightning Web Component from Quick Action, but the width of that Lightning Web Component is almost 80% of the screen. How can you accomplish this?

Solution: We all know how to invoke Lightning Web Component from Lightning Aura Component which can be associated with the Quick Action in Salesforce Lightning Experience. Now, if we will open any Quick Action settings, we can update the height of the standard quick action modal as per business requirement, but what we will do if we have to increase the width of the standard quick action modal. Here is the solution.

If we will try to use standard slds class such as “slds-modal_container“, we can increase the width of the standard quick action modal, but in this case, other modals such as Edit or any other quick action will be affected. So, we should not consider this approach.

First, we will try to hide the Standard Quick Action Modal and at the same time we will invoke the Lightning Web Component using lightning:overlayLibrary with attaching the standard cssClass as “slds-modal_large“.

We will describe this with an easy example. Let’s say, we want to show a greeting message from a Quick Action on the Lease Record Detail Page.

Step 1: We will create two components such as Aura Component and Lightning Web Component. First, we will create a Lightning Web Component named “greeting” in which will show the greeting message such as

greeting.html

<template>
    <lightning-card title="Welcome My Friends">
        <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small"> 
                
<div class="contentClass">                   
                    I hope you are doing well.
                </div>

            </lightning-layout-item>
        </lightning-layout>      
    </lightning-card>
</template>

we don’t need to write anything in js or xml file. Because we will call this component from the Aura Component which will be associated with the Quick Action in Salesforce Lightning.

Step 2: Create a Lightning Aura Component named “showMessage” which will be associated with the Quick Action.

showMessage.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader"> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    <lightning:overlayLibrary aura:id="overlayLib"/>
</aura:component>

If you see, we have used standard lightning:overlayLibrary to open a modal when the user will click on Quick Action.

showMessageController.js

({
    doInit : function(component, event, helper) {        
        var modalBody;
        
        setTimeout(()=>{  
            // Priority -> 1 || Please check if it will not work, consider Priority 2.
                //$A.get("e.force:closeQuickAction").fire(); 
        
            //Priority -> 2
                var stdModal = document.getElementsByClassName("uiModal forceModal");    
                stdModal.forEach(function(a, b) {
                $A.util.addClass(a, "slds-hide");
                });        
        },10);  
    
        $A.createComponent("c:greeting", {},
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                component.find('overlayLib').showCustomModal({
                    header: "Greeting Message",
                    body: modalBody,
                    showCloseButton: true,
                    cssClass: "slds-modal_large",
                    closeCallback: function() {                       
                    }
                })
            }
        });  
    }                
})

Now, we will discuss about two operations such as setTimeOut() and $A.createComponent() used in doInit() method.

setTimeOut(): We are hiding the standard quick action modal by applyting “slds-hide” class to the standard quick action modal class in 10ms. However, please try this standard quick action closure function

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

first, if it will not work then use the “slds-hide” class to the standard quick action modal class as the second approach.

$A.createComponent(): We are calling our “greeting” component using this function with lightning:overlayLibrary. We have set the cssClass as “slds-modal_large” to increase the width of the modal in where Lightning Web Component will be invoked.

Step 3: Now, we will attach this Lightning Aura Component to the Quick Action of Lead Object(for example).

Quick Action: Show Message

Place this Quick Action into the Lead Page Layout.

Result: Open the Lead record and click on “Show Message” quick action, you can see the greeting Lightning Web Component Modal window on the detail page as per the following image. Actually, when it’s opened, in backend standard quick action modal is disappeared.

Thanks for your time!!

35,342 total views, 15 views today