4

Is it possible for a Lightning component to open a new tab (primary or sub) in LEX Console that would contain another flexipage?

Example: I have a Lightning component that is a summary view as a side bar of a Case for example, and I want to create a button/link that would open the full details view as a SubTab. This details view is another Lightning component.

Is that possible with the WorkspaceAPI for example?

I was trying to create two page variations of the Case Result Page, one with the side bar component, another with the full details component. But I do not know how to open/navigate to the second page.

Edit: I am trying to use this API if that was not clear in the original question https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/sforce_api_console_methods_lightning_tabs.htm

So for example I would have something like this in my Controller:

openTab : function(component, event, helper) {
    var workspaceAPI = component.find("workspace");
    workspaceAPI.openTab({
        url: "what is the url that goes here?",        
        focus: true
    }).then( () => {
        // Do something
    }).catch(function(error) {
        console.log(error);
    });
}
  • What have you tried so far? Did you try to implement a custom Lightning component with lightning button which would call standard "window.open" javascript method? – Patlatus Mar 8 '18 at 11:17
  • 1
    Well yes I've done that but I do not know how to get the specific URL for a different page variation in lightning. All I have is a URL that looks like this: /one/one.app#/sObject/[ID]/view. So it does not look like there is anything specific about the page variation in the URL. (I'll update the question) – Etienne Rocheleau Mar 8 '18 at 16:00
1

As of 3-19-18, the best supported way to accomplish opening a Lightning Component programatically as a workspace or subtab is using the navigateToComponent event: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_navigateToComponent.htm

When invoked from a record page, it will open the LC as a subtab. When invoked from another context such as from a Utility, hover, or List, it will open the LC as a workspace tab. There is not a way to force it to be a subtab of a specific workspace.

When the Summer '18 release goes live June '18, a new capability is planned which improves upon this event in several ways:

  1. It will have a readable URL for custom LC's
  2. The URL will be usable in openSubtab() JS API
  3. It will have a mechanism to conditionally dedupe or open a new subtab.
  4. It will have an additional security layer

We haven't determined a name for the feature yet, but it will be the successor to navigateToComponent and we will recommend using it exclusively as we look at longer term options to retire use of navigateToComponent.

  • That sounds like exactly what I need to do (the planned feature). Glad to know it's on the roadmap. Is the feature currently in beta/pilot that I could test? I will try to use the navigateToComponent in the mean time. Do you know if the opened component (because it's a subtab) will still be in the context of a record? (AKA would the force:hasRecordId work normally with this?) – Etienne Rocheleau Mar 19 '18 at 17:57
  • There is not a beta for testing. Release Notes should be live by May 1st so that you can see the syntax and test on PreRelease. Subtab records do not retain record context such as force:hasRecordId. Feel free to email me with your use case to talk more jkucera at salesforce – John Kucera Mar 23 '18 at 19:04
0

Worth Pointing out that as of Summer '18 force:navigateToComponent has been deprecated.

Migrate to lightning:isUrlAddressable from force:navigateToComponent

The pageReference JavaScript object represents a URL for a page. You can use a pageReference instead of parsing or creating a URL directly.

These navigation resources are supported only in Lightning Experience and the Salesforce mobile app. They’re not supported in other containers, such as Lightning Components for Visualforce, Lightning Out, or Communities.

Use the following resources to simplify navigation across your apps

lightning:navigation

To navigate to a page or component, use the navigate() method in lightning:navigation. This approach is a substitute for a navigateTo* event, and both are supported.

lightning:isUrlAddressable

To enable a component to navigate directly via a URL, add the lightning:isUrlAddressable interface to your component.

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.