Launching Lightning Component as Quick Action

We know that Lightning Component is a modern framework for building single-page applications and building apps independently in Salesforce. In the recent Winter ’17 release from Salesforce, the Lightning Experience has offered a way to use lightning component from an action.

Salesforce Quick Actions

We know that Lightning Component is a modern framework for building single-page applications and building apps independently in Salesforce. In the recent Winter ’17 release from Salesforce, the Lightning Experience has offered a way to use lightning component from an action.  Custom buttons are out of the game these days and actions plays a vital role in the lightning world. In this article,  let’s see how to launch lightning component as a quick action.

Why Quick Action? 

Security is one of the major concerns in cloud to be taken care of. Since JavaScript has many security challenges and most of the custom buttons are developed using JavaScript, it is not supported in Lightning. Hence, we go for quick action.

Steps to set lightning component as quick action: 

1) Log into Salesforce instance and click your name at the top right corner and click Developer Console.

On Developer Console, click Files [Symbol] New [Symbol] Lightning Component

Salesforce Lightining Component

2) Create a Sample Lightning Component as follows:

This component allows you to quickly find the square of a number.


<aura: component implements="force:lightningQuickAction"> 

  <ui:inputNumber label="Enter the number" aura:id="num1"/>  

      <br/> ,m. 

    <ui:button label="Click here" press="{!c.clickhere}"/> 


force:lightningQuickAction interface enables the lightning component to be used as a custom action in Lightning Experience and Salesforce1.

3) Followed by the Controller where the actual work is done.



    clickhere: function (component, event, helper) { 

        // Get the values from the form 

        var a = component.find("num1").get("v.value"); 


       // Display the Answer in a "toast" status message 

        var resultsToast = $A.get("e.force:showToast"); 


            "title": "Answer: " , 

            "message": "Square of the number is: " + (a * a) + "." 

        }); ; 


        // Close the action panel 

        var dismissActionPanel = $A.get("e.force:closeQuickAction"); ; 



In the above controller, the result of the calculation is shown using force:showToast event. It is an easy way to show the message at the top of the screen in Lightning Experience and Salesforce1.

3) Now click on Setup Home [Symbol]Object and Fields [Symbol]Object Manager [Symbol] Account

Salesforce Quick Actions

4) In the Account page,  click on Page Layout.

5) In the account page layout, drag the lightning component in Salesforce1 and Lightning Experience Actions Section.

6) Now open a record in Accounts and click  in the top right corner of the record page. Choose the lightning component action that was added in the page layout.

Lightning Component Actions in Salesforce

7) The following window will appear:

Enter the number to find square of a number.

8) The result will be displayed as follows


Lightning Experience has increasingly offers more and more ways to customize. Since JavaScript buttons cannot address solutions for every imaginable use case, quick action is a powerful feature which comes as an update to winter’17 release.

Reference link:

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.