3

I built a flow which is wrapped in Aura compoenent, the componenet is attached to a Global Action.

On default, when I click on the global action, the component opens "Minimized" in the Utility Bar, If I click on the 'Maximize' button it opens it in a modal.

I would like to reverse it, so that when I click on the global action, it automatically opens the aura component 'Maximized' meaning in modal mode.

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

    <aura:handler name="init" value="{!this}" action="{!c.init} "/>
    <lightning:flow aura:id="flowData" onstatuschange="{!c.handleStatusChange}" />
</aura:component>

({
    init : function (component) {
        // Find the component whose aura:id is "flowData"
        var flow = component.find("flowData");
        // In that component, start your flow. Reference the flow's API Name.
        flow.startFlow("Create_Admin_Ticket");
    },
    handleStatusChange : function (component, event) {
        if(event.getParam("status") === "FINISHED") {
        // Close the action panel
            var dismissActionPanel = $A.get("e.force:closeQuickAction");
            dismissActionPanel.fire();            
        }
     }
})

Can someone point me in the right direction? Couldn't find anything in the documentation.

0

Oh man, was this a tricky one! I believe that I have figured it out by using a couple of hacks. You will need to split your logic into two Aura Components:

Aura Component 1:

Using API version 39 in order to disable Locker Service. This will allow you to access the DOM outside of your component and click the Maximize button using Javascript.

However, you cannot embed your Flow here because <lightning:flow> is only available after API version 41. The Flow will live in another component TestAuraComponentInner which you will call from here.

TestAuraComponent.cmp-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>39.0</apiVersion>
    <description>Blah blah</description>
</AuraDefinitionBundle>

TestAuraComponent.cmp

<aura:component implements="force:lightningQuickAction" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.init} "/>
    <c:TestAuraComponentInner/>
</aura:component>

TestAuraComponentController.js

({
    init : function (component) {
        var maximizeButton = document.querySelector('[title="Maximize"]');

        if (maximizeButton) {
            maximizeButton.click();
        }
    }
})

Aura Component 2:

Where your Flow is embedded. Needs to use API version 41 or higher.

TestAuraComponentInner.cmp

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init} "/>
    <lightning:flow aura:id="testFlow" />
</aura:component>

TestAuraComponentInnerController.js

({
    init : function (component) {
        var flow = component.find("testFlow");
        flow.startFlow("Test_Flow");
    }
})
| improve this answer | |
  • First of, thank you for trying to resolve this. I set the inner component to API 49 and the base component to API 39 as instructed, but when I start the flow from the global action menu I get the following error: Error while creating component for lightning component quick action [Failed to initialize a component [Maximum call stack size exceeded]] --- new Aura.externalLibraries()@static.lightning.force.com/cs196/auraFW/javascript/… {anonymous}()@static.lightning.force.com/cs196/auraFW/javas/… – Json Sep 19 at 22:03
  • You know what? I tested this with a very small Flow (it only had one screen) and I was able to make it work. I think the Global Action plus the multiple Aura components plus a more complex Flow is causing the system to hit some sort of undocumented limit. – Arepa Slayer Sep 21 at 1:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.