Tag Archives: Quick Action

Increase Salesforce Lightning Quick Action Modal Width

Lightning Component:

<!--demo.cmp-->
<aura:component implements="force:lightningQuickAction">
    <!--style to incraee width-->
    <aura:html tag="style">
        .slds-modal__container{
        max-width: 80rem !important;
        width:80% !important;
        }
    </aura:html>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <div class="slds-text-heading_medium slds-align_absolute-center">
            Welcome to Biswajeet Samal's Blog
        </div>
    </div>
    <!--Component End-->
</aura:component>

Auto Close Salesforce Ligthning QuickAction Modal

Lightning Component:

<!--demo.cmp-->
<aura:component implements="force:lightningQuickActionWithoutHeader">
    <aura:html tag="style">
        .cuf-content {
        padding: 0 0rem !important;
        }
        .slds-p-around--medium {
        padding: 0rem !important;
        }       
        .slds-modal__content{
        overflow-y:hidden !important;
        height:unset !important;
        max-height:unset !important;
        }
    </aura:html>
    
    <!--Handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <div class="slds-text-heading_medium slds-align_absolute-center">
            Loading...
        </div>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event, helper) {
        //Write your code to execute, before close the quick action modal
    },
    
    doneRendering: function(cmp, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    }
})

Invoke Flow From Lightning Component With Input Variables

Using lightning:flow component, we can invoke a flow in Lightning runtime. This component requires API version 41.0 and later. Here is an example to delete all Contact records from an Account using a flow.

Here I’ve created a flow and the flow is invoked by a lightning component, and that lightning component is configured with a QuickAction on Account object.

1. Go to Setup | Quick Find – Search Flows | New Flow

2. Create a variable as “AccountId”

3. Create a sObject Collection Variable as “CollectionOfContacts”

4. Create a Fast Lookup to get Contacts with Account Id

5. Create a Decision to check Account has contacts.

6. Default Outcome in Decision

7. Create Fast Delete to delete Contacts

8. Set the Fast Lookup as a starting element, indicated by the green down arrow. Then, connect the flow element “Fast Lookup” to “Decision” and “Decision” to “Fast Delete”.

9. Create a Lightning Component to invoke the flow.

Lightning component:

<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId">
    
    <!--Custom Styles for Modal Header and Footer--> 
    <aura:html tag="style">
        .cuf-content {
        padding: 0 0rem !important;
        }
        .slds-p-around--medium {
        padding: 0rem !important;
        }       
        .slds-modal__content{
        overflow-y:hidden !important;
        height:unset !important;
        max-height:unset !important;
        }
    </aura:html>
    
    <!--Declare Attributes--> 
    <aura:attribute name="hasError" type="Boolean" default="false"/>
    
    <!--Modal Header-->  
    <div class="modal-header slds-modal__header slds-size_1-of-1">
        <h4 class="title slds-text-heading--medium">Delete Contacts</h4>
    </div>
    <!--End Modal Header-->  
    
    <!--Modal Body-->   
    <div class="slds-modal__content slds-p-around--x-small slds-align_absolute-center slds-size_1-of-1 slds-is-relative">
        <form class="slds-form--stacked">
            <aura:if isTrue="{!!v.hasError}">
                <div class="slds-align_absolute-center">
                    Do you want to delete all contacts?
                </div>
                <aura:set attribute="else">
                    <div>
                        <div class="slds-text-color_error">Error on Contact record deletion.
                            Please forward following error message to your admin:</div>
                    </div>
                </aura:set>
            </aura:if>
            <div>
                <!--Lightning Flow Attribute-->
                <lightning:flow aura:id="deleteContactFlow" onstatuschange="{!c.statusChange}"/>
            </div>
        </form> 
    </div>
    <!--End of Modal Body--> 
    
    <!--Modal Footer-->
    <div class="modal-footer slds-modal__footer slds-size_1-of-1">
        <lightning:button variant="Brand" class="slds-button" label="Confirm" onclick="{!c.handleConfirm}"/>
        <lightning:button variant="Neutral" class="slds-button" label="Cancel" onclick="{!c.handleClose}"/>
    </div>
    <!--End of Modal Footer-->
</aura:component>

Lightning JS Controller:

({
    //Confirm 
    handleConfirm : function(component, event, helper) {
        //Find lightning flow from component
        var flow = component.find("deleteContactFlow");
        //Put input variable values
        var inputVariables = [
            {
                name : "AccountId",
                type : "String",
                value : component.get("v.recordId")
            }
        ];
        //Reference flow's Unique Name
        flow.startFlow("Delete_Contact_From_Account", inputVariables);
    },
    
    //Close the quick action
    handleClose : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    },
    
    //Flow Status Change
    statusChange : function (component, event, helper) {
        //Check Flow Status
        if (event.getParam('status') === "FINISHED_SCREEN" || event.getParam('status') === "FINISHED") {
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                title: "Success!",
                message: "Contacts deleted successfully!",
                type: "success"
            });
            toastEvent.fire();
            $A.get("e.force:closeQuickAction").fire();
            $A.get('e.force:refreshView').fire();
        } else if (event.getParam('status') === "ERROR") {
            component.set("v.hasError", true);
        }
    }
})

10. Configure above created lightning component on Account object Quick Action.

11. Add created quick action on Account object page layout.

12. Here is the quick action to delete all contacts.

Close Lightning Quick Action Modal

Lightning Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction">
    <lightning:button variant="brand" type="button" label="Cancel" title="Cancel" onclick="{!c.handleCancel}"/> 
</aura:component>

Lightning JS Controller:

({
    handleCancel : function(component, event, helper) {
        //to close the quick action modal 
        $A.get("e.force:closeQuickAction").fire();
    },
})

Lightning Quick Action API

A lightning:quickActionAPI component allows to access methods for programmatically controlling quick actions on record pages. It is supported in Lightning Experience only.

We can reuse the existing quick action functionalities from different places. To access the methods, create an instance of the lightning:quickActionAPI component inside your Lightning component or page.

Example:
Here I’ve created a Quick Action to update Case object Status field.

Here is the lightning component to invoke above created quick action programmatically.
Lightning Component:

<aura:component implements="flexipage:availableForRecordHome,force:lightningQuickAction,flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Declare Quick Action API-->
    <lightning:quickActionAPI aura:id="qaAPI" />
    
    <div class="slds-m-around--xx-large">
        <lightning:button label="Update Status to Working" onclick="{!c.handleStatusWorking}"/>
        <lightning:button label="Update Status to Escalated" onclick="{!c.handleStatusEscalated}"/>          
    </div>
</aura:component>

Lightning Component JS Controller:

({
    handleStatusWorking : function(component, event, helper) {
        var actionAPI = component.find("qaAPI");
        //Assign Quick Action field values
        var fields = {Status: {value: "Working"}};
        //Quick Action with target field values
        var args = {actionName: "Case.Update_Case_Status", entityName: "Case", targetFields: fields};
        actionAPI.setActionFieldValues(args).then(function(){
            actionAPI.invokeAction(args);
        }).catch(function(e){
            console.error(e.errors);
        });
    },
    
    handleStatusEscalated : function(component, event, helper) {
        var actionAPI = component.find("qaAPI");
        //Assign Quick Action field values
        var fields = {Status: {value: "Escalated"}};
        //Quick Action with target field values
        var args = {actionName: "Case.Update_Case_Status", entityName: "Case", targetFields: fields};
        actionAPI.setActionFieldValues(args).then(function(){
            actionAPI.invokeAction(args);
        }).catch(function(e){
            console.error(e.errors);
        });
    }
})