You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Launching Lightning Component as Quick Action


By: Santhosh

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.

<!--component--> 

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

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

      <br/> ,m. 

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

</aura:component>

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.

/*Controller.js*/

({ 

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

        resultsToast.setParams({ 

            "title": "Answer: " , 

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

        }); 

        resultsToast.fire(); 

      

        // Close the action panel 

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

        dismissActionPanel.fire(); 

    } 


}) 

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

 

Conclusion: 

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: https://andyinthecloud.com/winter17-using-a-lightning-component-from-an-action/