Andy in the Cloud

From BBC Basic to Force.com and beyond…

Winter’17: Using a Lightning Component from an Action

29 Comments

Screen Shot 2016-08-21 at 17.19.18Back in 2013 i wrote a blog post with a very similar name, How To: Call Apex code from a Custom Button. It continues to gather a significant number of hits. Its a common task as its good to first consider extending the Salesforce UI’s before building your own. The Custom Button approach actually still works very well in Lightning Experience and still for now has some benefits. However Lightning Experience is increasingly offering more and more ways to be customised, Home Page, Record Detail and now Actions!

Visualforce and Standard Controllers have long since been the main stay for implementing Custom Buttons. However for any of those that have tried it, you’ll know that Visualforce pages need some work to adopt the new Lightning Design System style. So what if we could link a natively built and styled custom Lightning UI with a button?

Well in Winter’17 we can! Custom Buttons are out in the Lightning world, what are hip and trendy these days are Actions, as i mentioned in my Platform Action post, Actions are fast becoming the future! Or in this case Lightning Component Actions.

Force.com IDE and Lightning Components

Screen Shot 2016-08-21 at 15.10.07.pngI have also used this as a chance to get familiar with the recently announce Force.com IDE Beta, which supports editing Lightning Components. It worked quite well, the wizard creates the basic files of a component include template controller and helper files.

The auto complete also worked quite well in the component editor. There is also quite a neat outline view. To create a design file (not actually needed here) i had to create this as a simple text file in Eclipse and be sure to name it after my component with .design on the end. After this the IDE seemed to pick it up just fine, though it found it does not save with the other component files as i would have expected.

Screen Shot 2016-08-21 at 18.33.54

Creating an Lightning Component Action

As with the Record, Tab and Home pages, a new interface, force:lightningQuickAction, has been added to the platform to indicate that your component supports Actions. I used the sample in the Salesforce documentation to get me started and it works quite well. The following is the component markup, i’ll cover the controller code later in this post.

<aura:component implements="force:lightningQuickAction">
<!-- Stupidly simple addition -->
<ui:inputNumber aura:id="num1"/> +
<ui:inputNumber aura:id="num2"/>
<ui:button label="Add" press="{!c.clickAdd}"/>
</aura:component>

What was not immediately apparent to me once i had uploaded the code, was that i still needed to create an Action under Setup for object i wanted my action to be associated with. I chose Account for this, the following shows the New Action page i completed. It automatically detected my Lightning Component, nice!

Screen Shot 2016-08-21 at 17.21.49

I then found My Action under the Layout Editor, which was also a little odd since i have become so used to finding my components in Lightning App Builder. I guess though the distinction is record level vs page level and hence the Layout Editor was chosen, plus existing actions are managed through layouts.

Screen Shot 2016-08-21 at 18.21.10.png

Once i updated the Layout,  My Action then appeared under the actions drop down (as shown at the top of this blog). As you can see below the component is wrapped in a popup with a system provided Cancel button. I chose to use the force:lightningQuickAction interface as per the docs. The force:lightningQuickActionWithoutHeader hides the Header and Cancel button shown, though popup close X button is still shown.

Screen Shot 2016-08-22 at 00.55.06

The Component Controller code for the sample component shows how you can programatically close the popup and deliver a user message via the toast component. I enjoyed learning about this while I looked at this sample. Extra credit to the documentation author here!

({
clickAdd: function(component, event, helper) {

// Get the values from the form
var n1 = component.find("num1").get("v.value");
var n2 = component.find("num2").get("v.value");

// Display the total in a "toast" status message
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Quick Add: " + n1 + " + " + n2,
"message": "The total is: " + (n1 + n2) + "."
});
resultsToast.fire();

// Close the action panel
var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();
}
})

Firing the toast event created in the above sample looks like this…

Screen Shot 2016-08-21 at 18.23.20

Context is everything…

The force:hasRecordId interface can be used to determine which record the user is looking at. Simply add it to your component like so…

<aura:component
implements="force:lightningQuickAction,force:hasRecordId">
Record Id is {!v.recordId}
</aura:component>

Note: I have it on good authority, that contrary to some samples and articles the you do NOT need to define the recordId property via aura:attribute.

Summary

In short i am really getting quite excited by the amount of places Lightning Components are starting to popup in, not just more places within Lightning Experience, but Salesforce1 Mobile, Communities and even Lightning Outlook. Join me at my Dreamforce 2016 session where we will also be looking at Lightning Out: Components on any Platform, featuring Google App Addins.

29 thoughts on “Winter’17: Using a Lightning Component from an Action

  1. I don’t know if you’ve had a chance to look, but there is an awesome plugin for Intellij called Illuminated Cloud that has full Lightning Support. I’ve been having a blast using it to build Lightning Components.

  2. Pingback: Unlocking the Lightning Experience Utility Bar | Andy in the Cloud

  3. Pingback: Lightning Components for admins! – My Salesforce adventure

  4. Hi Andy,

    I’m going through and creating a tutorial for my team, and I’m also finding it a bit odd how you can’t add the lightning quick action from the “Edit Page” link. Seems less than intuitive.

    I also found it a bit frustrating that only Lightning Components are allowed to be quick actions, not applications. This means you have to fire component level events rather than application level events, for instance.

    The more you know… 🙂

    – James / dancinllama

  5. Hi Andy,

    I just started poking around with Quick Action components, and I’m coming across the same frustrations you did. When I first tried adding a quick action in LEX, my first thought was to edit the page. Turns out that instead, you have to go back to the Object Manager, Edit the Account page layout, and add the action. The admin experience just seems off to me.

    Also, did you notice how if you create a lightning component from the dev console, you have the option for a app component versus community component, versus lightning page component, but it appears that quick actions were left off this list? Interesting 🙂

  6. Just thought I’d correct that event comment – you CAN fire application events from a component – it says it “Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.” Here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application_fire.htm

  7. Hi Andy,

    I am displaying multiple toast messages in different situations on the same component.
    Is there any way to do some functionality upon closing of specific toast message.

  8. Hi Andy,

    I read “The force:lightningQuickActionWithoutHeader hides the Header and Cancel button shown, though popup close X button is still shown.” in your blog and tried to implement it. I am able to hide the cancel button but the close X button is not appearing. Below is my code of the component. Can you please guide.

    +

  9. Pingback: Undertanding how your App Experience fits into Lightning Experience | Andy in the Cloud

  10. Hey everyone,

    I just wrote an action to let our sales users create a case when they see that an account’s information needs to be updated. Business rules dictate that sales reps can’t create or edit account information on their own…and it looks like that’s a problem for including my custom action on the Account detail page: Users need create permissions on the object to display object-specific actions! Has anyone come up with a creative way to work around this? I don’t want to mess with preventing Account creation after the fact in a trigger, and I don’t see an easy way to remove the “new” button/link globally in Lightning Experience.

    Thanks!

  11. I want to use a quick action to call some server-side code only. Is there a way to have an action fire from a button that doesn’t launch the modal box on the page?

    • Not as far as i know. Your alternative is to place a Lightning Component (with your button in it) on the Record Lightning Page using the Lightning App Builder. You can still get the record Id in the same way described in this blog. You will need to implement the applicable interface, see the Lightning Developers Guide for the correct one for you needs. Hope this helps!

  12. Hi Andrew, Have you tried adding this component to Global Actions? I’m interested in knowing if the global action panel closed automatically after the processing. It did not work for me on global action but worked fine on record specific quick action. Here is a veryyy simple component that I created to test that.

    ({
    closeQuickAction: function(component,event,helper){
    $A.get(“e.force:closeQuickAction”).fire();
    }
    })

  13. Hi Andy,
    Getting a pop up for quick actions is okay but is there any way to increase the size of pop up window?
    Thanks
    Aruna

  14. Andy,
    Is it necessary to give data-label to tags in slds table (or) is it for developer convenience?
    Thanks
    Aruna

  15. Is it possible to add this component with it functionality dynamically using meta data ?

    • Yes should be possible via metatdada API

      • I would like to add a button in Lightning Experience dynamically.

        I already did it manualy by doing two things : the first is the creation of the aura component (Logic and Style of the action) , and the second is the adding lightning Action wich is linked to this component.

        I need to add the linked lightning Action dynamically. The aura component will be imported into my org(not dynamically).

        Can you show me an example about create a lightning Action on an Object and link it to my aura component ?
        I would like to use the metatdada API to adding the lightning Action on an Object wich will be linked to my component .
        Thanks

  16. Hi Andy!

    I’m wondering if there’s a way to indicate the size/width of the container that will be displayed. I have a component that could use more space, honestly, and the platform serves the component in a popup that has only 640px of width. How can I increase this size?

    • Funny you should ask, i have just been looking for a way to do this. After an hour of searching the net and docs i concluded its not possible.

  17. Pingback: Showing a context sensitive pop-up in Classic & Lightning Experience detail pages – My Salesforce adventure

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s