Workaround - Increase Width of a Specific LWC Quick Action Modal Salesforce | LWC Stack ☁️⚡️

 Few months back I have created a video on how you may use Lightning Web Component Quick Action in Salesforce.

Link : https://youtu.be/VGMjc8nWE3M

After that I created a blog on increasing the width of that Quick Action Modal by overriding the standard CSS.

Link : https://www.salesforcebolt.com/2021/08/increase-size-width-of-lightning-web.html

That's working as expected, the only problem is with overriding css is that once it's loaded it will override other similar css also in the org.

For example if you are having 3 LWC Quick Actions in your org and one of them is having the custom css overriding functionality in it. So once you will open that Quick Action, it will load the css and the remaining 2 QA will also have the same css.


To avoid this issue and use custom css in a specific LWC Quick Action I have created this workaround. To do that we will create a custom LWC with modal header, body and footer and then embed it in an Aura Component.

And then the Aura Component will contain the custom css for that specific modal.

Please follow below code : 


QuickActionLWCWidth.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <header class="slds-modal__header">
    <h2 id="modalheading" class="slds-modal__title slds-hyphenate">
      I am header
    </h2>
  </header>
  <p>I am body content</p>
  <footer class="slds-modal__footer">
    <lightning-button
      variant="neutral"
      label="Cancel"
      onclick={closeAction}
    ></lightning-button>
    <lightning-button
      variant="Brand"
      label="Save"
      onclick={handleSave}
    ></lightning-button>
  </footer>
</template>


QuickActionLWCWidth.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { LightningElement, api } from "lwc";

export default class QuickActionLWCWidth extends LightningElement {
  @api recordId;
  closeAction() {
    const closeModalEvent = new CustomEvent("modalclose");
    this.dispatchEvent(closeModalEvent);
  }
  handleSave() {
    const closeModalEvent = new CustomEvent("modalclose");
    this.dispatchEvent(closeModalEvent);
  }
}


QuickActionLWCWidth.js-metaxml

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>


QuickActionLWCWidthAura.cmp

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<aura:component
  implements="force:lightningQuickActionWithoutHeader,force:hasRecordId"
>
  <aura:html tag="style">
    .cuf-content { padding: 0 0rem !important; } .slds-p-around--medium {
    padding: 0rem !important; } .slds-modal__content{ height:unset !important;
    max-height:unset !important; } .slds-modal__container{ max-width:80rem
    !important; width:80% !important; }
  </aura:html>
  <aura:attribute name="recordId" type="Id"></aura:attribute>
  <c:quickActionLWCWidth
    tracker="aura"
    recordId="{!v.recordId}"
    onmodalclose="{!c.handleClose}"
  ></c:quickActionLWCWidth>
</aura:component>


QuickActionLWCWidthAuraController.js

1
2
3
4
5
6
({
  handleClose: function (component, event, helper) {
    $A.get("e.force:refreshView").fire();
    $A.get("e.force:closeQuickAction").fire();
  }
});


Output



Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Post a Comment

2 Comments

  1. What is the purpose of tracker="aura"

    ReplyDelete
    Replies
    1. It can be used as any other @api parameter when you have to perform separate actions if a component is getting called inside an AURA.

      Delete