1

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);
    });

enter image description here

How can I change the tab name to something else?

4
  • At what point does this code run? On init? Sep 19, 2018 at 11:00
  • 1
    you should look at your browser console for errors. of there are some, add them here please
    – Uwe Heim
    Sep 19, 2018 at 11:12
  • @JohnTowers yes, on init Sep 19, 2018 at 11:47
  • @UweHeim , I don't see any errors in the console Sep 19, 2018 at 11:48

2 Answers 2

0

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);
      });
  }
});
1

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);
    });
5
  • For what it's worth, I believe this is a timing issue. getFocusedTabInfo() should return the tab information for whatever tab or subtab is focused - not necessarily the parent tab. It seems as though the component is being initialized before the subtab is actually in focus, so the tab info being returned is for the primary tab instead of the subtab. Sep 19, 2018 at 12:52
  • @JohnTowers, any thoughts on how can the timing be handled? Sep 20, 2018 at 13:42
  • I think so. Since you're opening this tab from another component, I assume you're using the openSubtab() method. That returns a promise with the subtab id, so you could handle that promise in your calling component and set the subtab title from there. Sep 20, 2018 at 15:21
  • @JohnTowers I'm not using openSubtab(). I'm using navigateToComponent. Refer releasenotes.docs.salesforce.com/en-us/winter17/release-notes/… Sep 21, 2018 at 6:57
  • Thanks for the clarification. Based on that information, I've added an answer with code samples. Sep 21, 2018 at 10:25

You must log in to answer this question.

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