3

Does anyone know how to remove the standard modal from the quick action ?

I tried to put that line in the init method but with no success:

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

Any idea?

My Controller:

    ({
    doInit : function(component, event, helper) {

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

        var action = component.get("c.getRecordTypeId");
        action.setParams({
            accountId : component.get("v.recordId")
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var recordTypeId = response.getReturnValue();

                var createRecordEvent = $A.get("e.force:createRecord");
                createRecordEvent.setParams({
                    "entityApiName": "Opportunity",
                    "recordTypeId" : recordTypeId,
                    "defaultFieldValues": {
                        'AccountId' : component.get("v.recordId")
                    }
                });
                createRecordEvent.fire();
            } else if(state === "ERROR"){
                console.log('Error: ' + JSON.stringify(response.error));
            } else {
                console.log('Unknown problem, state: '+ state + ', error: ' + JSON.stringify(response.error));
            }
        });

        $A.enqueueAction(action);
    }
})
2

What you all need is implement one interface in component i.e. force:lightningQuickActionWithoutHeader.

Components that implement the force:lightningQuickActionWithoutHeader interface display in a panel without additional controls and are expected to provide a complete user interface for the action.

When used as actions, components that implement the force:lightningQuickAction interface display in a panel with standard action controls, such as a Cancel button. These components can also display and implement their own controls but should be prepared for events from the standard controls.

And in your controller, you can use this var dismissActionPanel = $A.get("e.force:closeQuickAction"); dismissActionPanel.fire();

({
    doInit : function(component, event, helper) {
        var action = component.get("c.cloneOpportunity");
        var opp = component.get("v.recordId");
        action.setParams({
                "OppId" : component.get("v.recordId")
                });
        action.setCallback(this,function(data){
           var clonedRecordId = data.getReturnValue();        
             helper.navigate(component);
            var dismissActionPanel = $A.get("e.force:closeQuickAction");
             dismissActionPanel.fire();

        });
 $A.enqueueAction(action);
 }
})

Note:-

When used as actions, components that implement the force:lightningQuickAction interface display in a panel with standard action controls, such as a Cancel button. These components can also display and implement their own controls, but should be prepared for events from the standard controls.

Components that implement the force:lightningQuickActionWithoutHeader interface display in a panel without additional controls and are expected to provide a complete user interface for the action.

These interfaces are mutually exclusive. That is, components can implement either the force:lightningQuickAction interface or the force:lightningQuickActionWithoutHeader interface, but not both. This should make sense; a component can’t both present standard user interface elements and not present standard user interface elements.

Reference:-

  1. https://releasenotes.docs.salesforce.com/en-us/winter17/release-notes/rn_lightning_component_actions.htm
  2. https://developer.salesforce.com/docs/atlas.en-us.204.0.lightning.meta/lightning/components_using_lex_s1_config_action.htm

Update:-

try this:- you were using $A.get("e.force:closeQuickAction") not on the right place

({
    doInit : function(component, event, helper) {

        var action = component.get("c.getRecordTypeId");
        action.setParams({
            accountId : component.get("v.recordId")
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var recordTypeId = response.getReturnValue();
                helper.navigate(component);
                var dismissActionPanel = $A.get("e.force:closeQuickAction");
                dismissActionPanel.fire();
            }
            else if(state === "ERROR"){
                console.log('Error: ' + JSON.stringify(response.error));
            }
                else {
                console.log('Unknown problem, state: '+ state + ', error: ' + JSON.stringify(response.error));
            }
        });

        $A.enqueueAction(action);
    }
})

Helper class:-

({
    navigate : function(component, optyId) {
        var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
            "recordId": component.get("v.recordId"),
            "entityApiName": "Opportunity",
            "defaultFieldValues": {
                'AccountId' : component.get("v.recordId")
            }
        });      
        createRecordEvent.fire();
    }
})
  • Thanks but it still opens the modal just with no header .. is there a way to remove the whole modal ? – osos9 Aug 30 '18 at 10:04
  • I have edited my response with controller code – sanket kumar Aug 30 '18 at 10:07
  • As I said in my original post, I already implemented $A.get("e.force:closeQuickAction").fire(); and the modal is still opened. – osos9 Aug 30 '18 at 11:24
  • @osos9 can you post a screenshot and if possible code snippet ? it is working for me. I have implemented the same in my Org. I am able to kill the modal . – sanket kumar Aug 30 '18 at 11:29
  • 2
    @osos9 try with my updated answer. Tell me if you still face any problem. refresh your page 2-3 times before checking. – sanket kumar Aug 30 '18 at 11:52
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" class="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); }})

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