How to create Quick Action button and add lightning component with custom loading spinner and autolaunch/navigate in Aura:Component Salesforce | Using Lightning Component for Quick Action Button and navigate to custom aura:component page uses of "e.force:navigateToComponent" property in lightning component Salesforce

Hey guys, today in this post we are going to learn about How to create Quick Action Button and add lightning component with custom loading spinner and autolaunch/navigate in Aura:Component Salesforce.

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 display and implement their own controls in the body of the panel, but can’t affect the standard controls.

This interface is a marker interface. A marker interface is a signal to the component’s container to add the interface’s behavior to the component. You don’t need to implement any specific methods or attributes in your component, you simply add the interface name to the component’s implements attribute. To know more details about Lightning Quick Action, Click Here →

👉 Download Free Ebook →

👉 Get Free Course →

Why Should You Attend It?

🎯 If You Are Facing Any Of These 6 Challenges. This Masterclass Is For You.

Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

Files we used to create Quick Action functionality in aura:component →

quickActionAura.cmp	Lightning Component	It is used to create Quick Action functionality in lightning component
quickActionAuraController.js	JavaScript Controller	It is hold Javascript doInit functionality in lightning component.
quickActionAuraHelper.js	JavaScript Helper	It is used to fetch the Contact and Opportunity records based on RecordId in lightning component.
quickActionSpinner.cmp	Lightning Component	It is used to display Loading Spinner in lightning component
quickActionSpinnerController.js	JavaScript Controller	It is hold Javascript doInit function in lightning component.
quickActionSpinnerHelper.js	JavaScript Helper	It is hold e.force:navigateToComponent property to navigate to custom aura:component page
quickActionAuraCtrl.apxc	Apex Class Controller	It is used for get SOQL query to retrieve Contact and Opportunity records based on RecordId

Don’t forget to check out:- How to you make Edit/Save records of Account on edit button click as custom functionality using apex class controller in lightning component Salesforce. Click Here For More Information

Final Output →

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

Find the below steps ▾

Create Lightning Component →

Step 1:- Create Lightning Component : quickActionAura.cmp

From Developer Console >> File >> New >> Lightning Component

quickActionAura.cmp [Lightning Component File]

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

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="conObjList" type="list"/>

    <aura:attribute name="opptyObjList" type="list"/>

```
 
```
```
    <lightning:card> 
```

        <div class="slds-p-around_large">

            <h2 class="slds-text-heading_medium"><lightning:icon iconName="custom:custom87" size="small"/> <strong style="color:#270086; font-size:16px; margin-right:5px;"> How to create lightning quick action in Aura Component [<a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer">View more articles →</a>]</strong></h2>

```
            <br/>
```
```
 
```

            <aura:if isTrue="{!v.conlist.length!=0}">

                <table  class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">

                    <caption><lightning:icon iconName="standard:contact" />

                        Contacts:<b>({!v.conObjList.length})</b></caption>

                    <thead>

```
                        <tr>
```

                            <th>Name</th>

                            <th>FirstName</th>

                            <th>LastName</th>

                            <th>Email</th>

                            <th>Phone</th>

```
                        </tr>
```
```
                    </thead>
```
```
                    <tbody> 
```

                        <aura:iteration items="{!v.conObjList}" var="Items">

```
                            <tr>
```

                                <td>{!Items.Name}</td>

                                <td>{!Items.FirstName}</td>

                                <td>{!Items.LastName}</td>

                                <td>{!Items.Email}</td>

                                <td>{!Items.Phone}</td>

```
                            </tr>
```

                        </aura:iteration>

```
                    </tbody>      
```
```
                </table>
```
```
            </aura:if>
```
```
 
```
```
            <br/><br/><br/>
```

            <aura:if isTrue="{!v.opptyObjList.length!=0}">

                <table  class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">

```
 
```

                    <caption><lightning:icon iconName="standard:opportunity" />

                        Opportunities:<b>({!v.opptyObjList.length})</b></caption>

```
 
```
```
                    <thead>
```
```
                        <tr>
```

                            <th>Name</th>

                            <th>Amount</th>

                            <th>Account Name</th>

                            <th>CloseDate</th>

                            <th>StageName</th>

```
                        </tr>
```
```
                    </thead>
```
```
 
```
```
                    <tbody>
```

                        <aura:iteration items="{!v.opptyObjList}" var="Items">

```
                            <tr>
```

                                <td>{!Items.Name}</td>

                                <td>{!Items.Amount}</td>

                                <td>{!Items.Account.Name}</td>

                                <td>{!Items.CloseDate}</td>

                                <td>{!Items.StageName}</td>

```
                            </tr>
```

                        </aura:iteration>

```
                    </tbody>
```
```
 
```
```
                </table>
```
```
            </aura:if>
```
```
 
```
```
        </div>
```
```
    </lightning:card>   
```
```
 
```
```
</aura:component>
```

Create JavaScript Controller →

Step 2:- Create Lightning Component : quickActionAuraController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

quickActionAuraController.js [JavaScript Controller]

```
    ({
```

	doInit : function(component, event, helper)

```
    {
```

        helper.retrieveConRecord(component,event,helper);

        helper.retrieveOpptRecords(component,event,helper);

```
    },    
```
```
 
```
```
})
```

Create JavaScript Helper →

Step 3:- Create Lightning Component : quickActionAuraHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

quickActionAuraHelper.js [JavaScript Helper File]

```
   ({
```

    retrieveConRecord : function(component,event,helper)

```
    {
```

        var action = component.get("c.conListItem");

```
        action.setParams({
```

            "accountId": component.get("v.recordId")

```
        });
```

        action.setCallback(this, function(response) {

            var state = response.getState();

```
            if(state === "SUCCESS")
```
```
            {
```

                var result = response.getReturnValue();

                component.set("v.conObjList", result);

```
            }
```
```
            else
```
```
            {
```

                console.log('Some error occurred due to fetching the data');

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

    retrieveOpptRecords :function(component,event,helper)

```
    {
```

        var action = component.get("c.oppListItem");

```
        action.setParams({
```

            "accId": component.get("v.recordId")

```
        });
```
```
 
```

        action.setCallback(this, function(response) {

            var state = response.getState();

```
            if(state === "SUCCESS")
```
```
            {
```

                var result = response.getReturnValue();

                component.set("v.opptyObjList", result);

```
 
```
```
            } else {
```

                console.log('Some error occurred due to fetching the data');

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

Create Lightning Component →

Step 4:- Create Lightning Component : quickActionSpinner.cmp

From Developer Console >> File >> New >> Lightning Component

quickActionSpinner.cmp [Lightning Component File]

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

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div class="slds-form--stacked slds-p-around_medium slds-p-bottom--none">

```
        Please wait loading page...
```
```
    </div>
```
```
</aura:component>
```

Create JavaScript Controller →

Step 5:- Create Lightning Component : quickActionSpinnerController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

quickActionSpinnerController.js [JavaScript Controller]

```
   ({
```

    doInit:function(component,event,helper)

```
    {
```

        helper.quickActionHelper(component,event,helper);

```
    },    
```
```
 
```
```
})
```

Create JavaScript Helper →

Step 6:- Create Lightning Component : quickActionSpinnerHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

quickActionSpinnerHelper.js [JavaScript Helper File]

```
  ({
```
```
 
```

    quickActionHelper : function(component, event, helper)

```
    {
```

        var evt = $A.get("e.force:navigateToComponent");

```
        evt.setParams
```
```
        ({
```

            componentDef : "c:quickActionAura",

```
            componentAttributes:
```
```
            {
```

                recordId :component.get("v.recordId")

```
            }
```
```
        });
```
```
        evt.fire();
```
```
    },    
```
```
 
```
```
})
```

Create Apex Class Controller →

Step 7:- Create Apex Class : quickActionAuraCtrl.apxc

From Developer Console >> File >> New >> Apex Class

quickActionAuraCtrl.apxc [Apex Class Controller]

```
    public class quickActionAuraCtrl {
```
```
   @AuraEnabled
```
```
 
```

    public static List<Contact> conListItem(Id accountId)

```
    {
```

        List<Contact> conlist=[SELECT Id, Name, FirstName, LastName, Email, Phone, Description FROM Contact WHERE AccountId = :accountId];

        System.debug('##length of contact ##'+conlist.size());

```
        RETURN conlist;
```
```
    }
```
```
    @AuraEnabled
```

    public static List<Opportunity> oppListItem(Id accId)

```
    {
```

        List<Opportunity> opplist=[SELECT Id, Name, Amount, AccountId, Account.Name, CloseDate, Description, StageName FROM Opportunity WHERE AccountId=:accId];

        System.debug('## length of Opportunity ## '+opplist.size());

```
        RETURN opplist;
```
```
    }
```
```
}
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link – YouTube

FAQ (Frequently Asked Questions)

How do I add Aura components to quick action?

Go to Account >> Select a record >> Click on the actions dropdown >> Select your Quick Action/Lightning Action which have use Lightning Component.

How do you show quick action in lightning?

Select the page layout that you want to add the action to, and then click Edit. Add quick actions to the case page layout. Click Mobile & Lightning Actions. Drag the action into the Salesforce Mobile and Lightning Experience Actions section, and then place the action where you want it to appear.

How do you close quick action in Aura component?

To close a quick action panel, usually in response to completing or canceling the action, run $A. get('e. force:closeQuickAction'). fire();

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Why Should You Attend It?

🎯 If You Are Facing Any Of These 6 Challenges. This Masterclass Is For You.

Files we used to create Quick Action functionality in aura:component →

Create Lightning Component →

quickActionAura.cmp [Lightning Component File]

Create JavaScript Controller →

quickActionAuraController.js [JavaScript Controller]

Create JavaScript Helper →

quickActionAuraHelper.js [JavaScript Helper File]

Create Lightning Component →

quickActionSpinner.cmp [Lightning Component File]

Create JavaScript Controller →

quickActionSpinnerController.js [JavaScript Controller]

Create JavaScript Helper →

quickActionSpinnerHelper.js [JavaScript Helper File]

Create Apex Class Controller →

quickActionAuraCtrl.apxc [Apex Class Controller]

How do I add Aura components to quick action?

How do you show quick action in lightning?

How do you close quick action in Aura component?

Related Topics | You May Also Like

Vijay Kumar

Leave a Comment Cancel reply