2

I'm wrapping an LWC within an aura component. The aura component will be called from a global action. By default, this opens the docked composer at the bottom of the screen. My aura component is intended to force the component to open in a full page and then close the docked composer.

In standard navigation apps, this works fine. In console apps, I'm seeing an infinite init occuring at the aura level. Specifically, I'm seeing the UID parameter infinitely increment. I have to close the browser tab or risk crashing the browser.

  • I removed the LWC component but am still observing the infinite reloading on init.
  • The same behavior happens when I use the workspace API
  • I tried gating this behind a variable (initExecuted) and moving these actions to helpers, but no success.
  • I did humor setting up a lightning component tab, but there is not a way to close the tab out when the form on the LWC is completed. This later causes some caching issues I'm still trying to solve for, which I'm assuming has something to do with the way the page is pushing from the docked composer to a full page.

I'm trying to narrow down why this is occurring as what my options are to still use the global action and push to the larger page. Ideally, I would just open the LWC from the global action, but that's not supported currently. My guess after looking at salesforce documentation & several stack exchange articles is that the workspace api & navigation services weren't intended for init? I'm not able to confirm this.

Can someone confirm why this is happening and what other options are there while keeping the global action (mandatory requirement).

MyAuraComponent.html:

<aura:component implements="flexipage:availableForAllPageTypes, force:lightningQuickActionWithoutHeader, lightning:isUrlAddressable" access="global" >
    <lightning:workspaceAPI aura:id="workspace"/>
    <lightning:navigation aura:id="navService"/>

    <aura:attribute name="pageReference" type="Object"/>
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="initExecuted" type="Boolean" default="false"/>
        
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />

    Open page!
    
</aura:component>

MyAuraComponent.js

    doinit : function (component, event, helper) {
        console.log('*** Aura init');
        var initExecuted = component.get("v.initExecuted");

        if(!initExecuted) {
            component.set("v.initExecuted", true);

            var pageRef = {
                type: 'standard__component',
                attributes: {
                    componentName: 'c__MyAuraComponent'
                }
            }
            
            component.set("v.pageReference", pageRef);

            var navService = component.find("navService");
            navService.navigate(pageRef);
            
        }
    }
2
  • Maybe you could try navigating to a tab rather than the component? Given you are in this component... seems things could get weird. Commented Jan 5, 2023 at 23:15
  • I tried that. The problem is there’s no way to close that tab once the user is done with the form. Reopening the form is cached with all the old values too so I’m not able to clear the state. Best I could do was display a message asking the user to close the tab, which I think is lazy coding. Happy to be enlightened if there is a way to close the tab in standard apps, that would be less of a headache. Commented Jan 5, 2023 at 23:20

1 Answer 1

1

Putting this out there in case it helps someone. I was able to stop the infinite refreshing by introducing another aura component. Would love to get someone's take on why the infinite refreshing/init was occurring with one aura component.

  • AuraGlobalAction - aura component is assigned to the global action. Redirects to Aura Wrapper.
  • AuraWrapper - contains my LWC child component and all functions in there. Does not have an init.

AuraGlobalAction.cmp

<aura:component implements="flexipage:availableForAllPageTypes, force:lightningQuickActionWithoutHeader, lightning:isUrlAddressable" access="global" >
    <lightning:workspaceAPI aura:id="workspace"/>
    <lightning:navigation aura:id="navService"/>

    <aura:attribute name="pageReference" type="Object"/>
        
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
</aura:component>   

AuraGlobalAction.js

({
    doinit : function (component) {
        console.log('*** Aura init');

        var pageRef = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__AuraWrapper'
            }
        }
        
        component.set("v.pageReference", pageRef);

        var workspaceAPI = component.find('workspace');
        var navService = component.find("navService");
        
        console.log('*** Aura checking isConsole');
        workspaceAPI.isConsoleNavigation().then(function(isConsole) {
            console.log('** Aura isConsole: ' + JSON.stringify(isConsole));
            if(isConsole) {
                workspaceAPI.openTab({ pageReference: pageRef, focus: true })
                .then(function(response) {
                    workspaceAPI.getTabInfo({ tabId: response });                   
                    workspaceAPI.setTabLabel({ tabId: response, label: 'New Record'});
                    workspaceAPI.setTabIcon({ tabId: response, icon: "custom:custom71" });                  
                }).catch(function(error) {
                    console.log('*** Workspace API Error: ' + error);                   
                });
            }
            else {
                navService.navigate(pageRef, false);
            }               
        })
        .then(function() {
            window.setTimeout($A.getCallback(function()  {
                console.log('*** Aura closing docked composer');
                $A.get("e.force:closeQuickAction").fire();
            }), 500);       
        }); 
        
    }
})

AuraWrapper.cmp

<aura:component implements="flexipage:availableForAllPageTypes, lightning:isUrlAddressable" access="global" >
    <c:myLWC aura:id="myLWC" onLWCEvent="{!c.myFunction}"></c:myLWC>
</aura:component>   

AuraWrapper.js

({
    myFunction: function(component, event) {
        //some logic
    }
})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .