Lightning QuickAction (API) without modal

Question

I am attempting to replace JS buttons with quick actions. These button simply call a web service method and alert the result and need no user interaction.

With quick action a modal always seems to appear and this is not desirable.

I am calling the Webservice method in the doInit function and firing a toast event with the results and have no need for the modal popup.

Seems an oversight maybe? But is there a way to accomplish this without the modal to closely mimic the JS button functionality?

Ideally we could show the spinner without the modal

Right now I am simply calling

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

at the end of the doInit but it is not the most ideal in way of a UI to do this IMHO as it flashes the modal on the screen briefly.

Answer 1

I asked in the Lightning Trailblazers org62 group about this, a few months ago, and the response we got was that SFDC understands this usecase but do not have an estimate for delivery yet.

FWIW, we created a custom component with a button that sits on the lightning page, instead of using a quick action. Initially we displayed a spinner inside the quick action modal, so it wasn't completely weird.

Answer 2

Just add the below code in your component so that it doesn't show up the modal when you click on the Quick action button

<aura:html tag="style">
    .slds-backdrop {
    background: rgba(43, 40, 38, 0) !important;  
    }
    .slds-fade-in-open {
    display:none !important;
   }
</aura:html>

Answer 3

I was able to achieve a Quick Action without a modal (and used just a toast) using a LWC with a "headless action" with Summer '21's update. Only works on a record page. See https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_quick_actions.htm&type=5&release=232

js

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

    export default class SampleToastNoModalQuickAction extends LightningElement {
        @api recordId;
        @api invoke() {
           this.showToast();
        }
        // displays the record Id in the toast
        showToast() {
            const event = new ShowToastEvent({
              title: "Notice",
              message: "Testing " + this.recordId,
              messageData: "",
              variant: "warning",
              mode: "pester"
          });
          this.dispatchEvent(event);
        }
    }

js-meta.xml

<?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>Action</actionType>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Answer 4

Yes, there is a way to achieve this. Basically you need to hide the modal window, show the spinner on calling the webservice and show toast message.

1) You need to add a CSS file in the static resource.Having below code. The CSS file will help you over write the app.css style class in the modal.

    .slds-fade-in-open {
    visibility: hidden !important;
   }
.slds-modal__content {
    background-color: transparent;
}
.slds-modal__container{
    background-color: transparent;
}
 .slds-spinner_container{
    background-color: transparent;
    background: transparent;
   }

Reference to add CSS to static resource

2) Add "force:lightningQuickActionWithoutHeader" to your interfaces i.e. implements="...".

3) Add toat message to your controllers.

component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global"
                controller="SubmitChangeRequestController">

        <aura:attribute name="hideSpinner" type="boolean" default="false"/>
        <aura:attribute name="recordId" type="String"/>
        <ltng:require styles="{!$Resource.SubmitCrCss}"/>
        <aura:handler name="init" value="{!this}" action="{!c.doinIt}"/>
        <div class="invisibleClass">
            <aura:if isTrue="{! v.hideSpinner }">
                <div aura:id="spinnerId" class="slds-spinner_container">
                    <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                        <span class="slds-assistive-text">Loading</span>
                        <div class="slds-spinner__dot-a"></div>
                        <div class="slds-spinner__dot-b"></div>
                    </div>
                </div>
        </aura:if>
        </div>

    </aura:component>

Js:

({
    doinIt : function(component, event, helper) {
        component.set("v.hideSpinner",true);
        var recId = component.get("v.recordId");
        var action = component.get("c.updateCR");
        action.setParams({
            recId :recId
        });
        action.setCallback(this, function (response) {
            var retVal = response.getReturnValue();
            if(retVal == 'A'){
                component.set("v.hideSpinner",false);
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    Title:'title',
                    type:'success',
                    message:'message'
                });
                $A.get("e.force:closeQuickAction").fire();
                toastEvent.fire();
                $A.get('e.force:refreshView').fire();
            }else{
                component.set("v.hideSpinner",false);
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    Title:'title',
                    type:'info_alt',
                    message:'Some error occured'
                });
                $A.get("e.force:closeQuickAction").fire();
                toastEvent.fire();
                $A.get('e.force:refreshView').fire();
            }
        });
        $A.enqueueAction(action);
    }
})

Thanks Ranjit

Answer 5

Add this in your code. This removes the modal.

Answer 6

Here is the best solution I could get so far. The style tag will simply hide the modal, while shows the spinner plus it doesn't collapse the browser vertical scrollbar.

<aura:component description="InstallAlarmQAction" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId"access="global">
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<lightning:spinner variant="brand" lass="slds-show backgroundSpinner" size="medium" />

<aura:html tag="style">
    .slds-backdrop {
        background: rgba(43, 40, 38, 0) !important;
    }
    .backgroundSpinner{
        background: rgba(0, 0, 0, 0) !important;
    }
    .modal-body {
        background: rgba(0, 0, 0, 0) !important;
        box-shadow: none !important;
    }
    .closeIcon {
        display:none !important;
    }
    .desktop {
        overflow: visible !important;
    }
</aura:html>

You'll have to use setTimeout to make 'e.force:closeQuickAction' work. If you don't fire it at all, the UI will freeze. Here's the controller:

({
doInit: function (cmp, event, helper) {
    setTimeout(function () {$A.get('e.force:closeQuickAction').fire();}, 1500);
}})

Answer 7

Add this styling on the component.

 <aura:html tag="style">
    .slds-backdrop {
    background: rgba(43, 40, 38, 0) !important;
    visibility: hidden !important;
    }
    .slds-fade-in-open {
    display:none !important;
    }
    .slds-modal {
    display: none;
    visibility: hidden !important;
    }
</aura:html>