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?

  • At what point does this code run? On init? – John Towers Sep 19 '18 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 '18 at 11:12
  • @JohnTowers yes, on init – Prateeksha Singh Sep 19 '18 at 11:47
  • @UweHeim , I don't see any errors in the console – Prateeksha Singh Sep 19 '18 at 11:48
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);
    });
  • 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. – John Towers Sep 19 '18 at 12:52
  • @JohnTowers, any thoughts on how can the timing be handled? – Prateeksha Singh Sep 20 '18 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. – John Towers Sep 20 '18 at 15:21
  • @JohnTowers I'm not using openSubtab(). I'm using navigateToComponent. Refer releasenotes.docs.salesforce.com/en-us/winter17/release-notes/… – Prateeksha Singh Sep 21 '18 at 6:57
  • Thanks for the clarification. Based on that information, I've added an answer with code samples. – John Towers Sep 21 '18 at 10:25

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.