New lightning component opened from another, but tab shoes "Loading..."

Question

I'm opening a lightning component from another. It opens in a new tab inthe same workspace, as expected. But the tab name of this new component shows "Loading..." with the loading icon.

I've tried getting the active tab id and setting its label by the following code. But with this, the parent tab label changes, and NOT the one in which my 2nd lightning component is open.

 var workspaceAPI = component.find("workspace");
    console.log("workspaceAPI: " + workspaceAPI);
    workspaceAPI.getFocusedTabInfo().then(function(response) {
        var focusedTabId = response.tabId;
        workspaceAPI.setTabLabel({
            tabId: focusedTabId,
            label: "My Label"
        });
    })
    .catch(function(error) {
        console.log(error);
    });

How can I change the tab name to something else?

Answer 1

Given the clarification in comments I'm providing an alternative answer that uses lightning:isUrlAddressable and lightning:navigation since force:navigateToComponent is deprecated.

Your target component should implement the lightning:isUrlAddressable interface. This allows you to navigate to it through a URL and will give you access to the underlying pageReference so you can access parameters.

This will ensure that your calling component has control over how the new component opens and will give you access to the Id for the created tab so you can set the label appropriately.

cmp_target

This is the target component that you can navigate to from another component. On init, the controller accesses v.pageReference which is provided by the lightning:isUrlAddressable interface. It reads a url parameter from the pageReference and sets it as the value of a component attribute.

cmp_target.cmp

<aura:component implements="lightning:isUrlAddressable">
     <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="param1" type="String"></aura:attribute>
    {!v.param1}
</aura:component>

cmp_targetController.js

({
    init : function(component, event, helper) {
        var pageReference = component.get("v.pageReference");
        var param1 = pageReference.state.c__param1;
        component.set("v.param1", param1);
    }
})

cmp_source

This is an example of how to navigate to the target component from within another component. It uses the workspaceAPI to handle console navigation and navigates on a button click.

cmp_source.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:navigation aura:id="navService"/>
    <lightning:workspaceAPI aura:id="workspace" />
    <lightning:button label="Trigger nav" onclick="{!c.triggerNav}"/>
</aura:component>

cmp_targetController.js

({
  triggerNav: function(component, event, helper) {
    //initialize the service components
    var workspaceAPI = component.find("workspace");
    var navService = component.find("navService");

    // set the pageReference object used to navigate to the component. Include any parameters in the state key.
    var pageReference = {
      type: "standard__component",
      attributes: {
        componentName: "c__cmp_target"
      },
      state: {
        c__param1: "Test"
      }
    };

    // handles checking for console and standard navigation and then navigating to the component appropriately
    workspaceAPI
      .isConsoleNavigation()
      .then(function(isConsole) {
        if (isConsole) {
          //  // in a console app - generate a URL and then open a subtab of the currently focused parent tab
          navService.generateUrl(pageReference).then(function(cmpURL) {
            workspaceAPI
              .getEnclosingTabId()
              .then(function(tabId) {
                return workspaceAPI.openSubtab({
                  parentTabId: tabId,
                  url: cmpURL,
                  focus: true
                });
              })
              .then(function(subTabId) {
                // the subtab has been created, use the Id to set the label
                workspaceAPI.setTabLabel({
                  tabId: subTabId,
                  label: "My Label"
                });
              });
          });
        } else {
          // this is standard navigation, use the navigate method to open the component
          navService.navigate(pageReference, false);
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  }
});

Answer 2

I solved this problem by tweaking the same code that I mentioned in my question.

I realized that response.tabId returns the id of the parent tab. If you print the response on the console, you'll see that tab in question is actually a subtab. So I retrieved the id of this subtab and then set the icon and label. Here is the complete code.

var workspaceAPI = component.find("workspace");
    workspaceAPI.getFocusedTabInfo().then(function(response) {
        console.log('response: ' + JSON.stringify(response));
        var focusedTabId = response.subtabs[0].tabId;
        console.log('focusTabId '+focusTabId);
        workspaceAPI.setTabLabel({
            tabId: focusedTabId,
            label: "Focused Tab"
        });
        workspaceAPI.setTabIcon({
            tabId: focusedTabId,
            icon: "standard:timesheet",
            iconAlt: "Focused Tab"
        });
    })
    .catch(function(error) {
        console.log(error);
    });