Call Custom Object Quick Action from Lightning Component

Question

We're in transition from classic to lightning and are working to update several of our javascript buttons over into lightning components, quick actions, etc.

I have one javascript button that calls a visualforce page that launches a flow. If I convert this over to a quick action, I like how it displays as a model popup within the page instead of opening in a new tab. My beef is the placement of the action as it's collapsed where the standard buttons show.

To help keep these visible, I have created a custom button panel (lightning component) to highlight some of our most frequently used custom actions. My challenge is that I'm having trouble calling that quick action from my custom button panel.

Here's my Custom Object Action:

Here's my component code:

    <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader,lightning:isUrlAddressable" >
    <lightning:workspaceAPI aura:id="workspace"/>
    <lightning:quickActionAPI aura:id="quickActionAPI"/>

    <!--Used to store data within an aura component-->
    <aura:attribute name="helpTicket" type="Object"/>
    <aura:attribute name="helpTicketRecord" type="Help_Ticket__c" default="{'sObjectType': 'Account'}"/> 

    <force:recordData aura:Id="recordData" recordId="{!v.recordId}" fields="['Account__c', 'OwnerId']"
                      targetRecord="{!v.helpTicket}" targetFields="{!v.helpTicketRecord}" mode="EDIT"/>

    <div>
        <lightning:button variant="brand" class="paylocity-orange" label="Accept" onclick="{!c.acceptHelpTicket}"/>
        <lightning:button variant="brand" class="paylocity-orange" label="Close Help Ticket" onclick="{!c.closeHelpTicket}"/>        
    </div>
</aura:component>

Here's the controller code I thought for sure would work:

closeHelpTicket : function(component, event, helper) {        
    var actionAPI = component.find("quickActionAPI");
    var fields = {Id: {value: component.get("v.recordId")}};
    var args = {actionName: "Help_Ticket__c.Close_Help_Ticket_3", entityName: "Help_Ticket__c", targetFields: fields};
    actionAPI.setActionFieldValues(args).then(function(result) {
        actionAPI.invokeAction(args);
        console.log('closeHelpTicket action called');
        //Action selected; show data and set field values
    }).catch(function(e) {
        if(e.errors) {
            console.log(e.errors);
        }
    });
}

Here's what I'm seeing from the console after I click the button from the console component.

What am I missing?

Answer 1

You can't call a quick action if you don't have that Quick Action added to the page -layout.

You have to put that quickAction on the page -layout for the quickActionAPI to open it.

Src: How to fire global action from a Lightning Component

Answer 2

In this code , the fields defined in the force:recordData is not the correct way. Check the code below: Component:->

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="caseRecord" type="sObject"/>
    <aura:attribute name="recordError" type="String"/>

     <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      fields="Id, Status"                
                      targetFields="{!v.caseRecord}"
                      targetError="{!v.recordError}"
                      />

</aura:component>

Also check the controller code below:

Controller:->

({
    callRescheduleCaseAction : function( cmp, event, helper ) {
        var actionAPI = cmp.find("quickActionAPI");
        var fields = { relatedTo : { Id : "recordId" } };
        var args = { actionName : "Case.Reschedule_Kit", 
                     entityName : "Case",
                     targetFields : fields };
        actionAPI.setActionFieldValues(args).then(function() {
            actionAPI.invokeAction(args);
        }).catch(function(e) {
            console.error(e.errors);
        });
    }

})

Let me know if you have any further questions on this.