13

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.

  • 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. – Christian Carter Apr 17 '17 at 23:09
13

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.

| improve this answer | |
  • Yea I have the spinner to but most times it is so quick all you see it the modal appearing and disappearing. Oh well – Eric Apr 18 '17 at 22:37
3

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>
| improve this answer | |
  • This may work but would also hide the spinner which may be needed at times – Eric Oct 11 '18 at 16:23
0

Add this in your code. This removes the modal.

enter image description here

| improve this answer | |
  • 5
    Doesn't work. Please provide copyable code instead of screenshots. – Robert Sösemann Aug 22 '17 at 10:04
0

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);
}})
| improve this answer | |
0

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>
| improve this answer | |
0

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.