using lightning component for quick action button -- w3web.net

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

2,103 views

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 →

 

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

 

 

Final Output →

quick action with custom loading in lightning -- w3web.net

 

Other related post that would you like to learn in Salesforce

 
quick action with custom loading in lightning -- w3web.net
 

  • 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]

 

Create JavaScript Controller →

Step 2:- Create Lightning Component : quickActionAuraController.js

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

quickActionAuraController.js [JavaScript Controller]

 

Create JavaScript Helper →

Step 3:- Create Lightning Component : quickActionAuraHelper.js

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

quickActionAuraHelper.js [JavaScript Helper File]

 

Create Lightning Component →

Step 4:- Create Lightning Component : quickActionSpinner.cmp

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

quickActionSpinner.cmp [Lightning Component File]

 

Create JavaScript Controller →

Step 5:- Create Lightning Component : quickActionSpinnerController.js

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

quickActionSpinnerController.js [JavaScript Controller]

 

Create JavaScript Helper →

Step 6:- Create Lightning Component : quickActionSpinnerHelper.js

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

quickActionSpinnerHelper.js [JavaScript Helper File]

 

Create Apex Class Controller →

Step 7:- Create Apex Class : quickActionAuraCtrl.apxc

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

quickActionAuraCtrl.apxc [Apex Class Controller]

 
quick action with custom loading in lightning -- w3web.net
 

Further post that would you like to learn in Salesforce

 


 

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();

Related Topics | You May Also Like

  • Your reaction of the article ▾
 

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

Leave a Comment