Are you looking for a way to open a lightning component in a new tab/window on detail page button click?

While working on a lightning component development, I found that there is no standard way to open a lighting component in a new tab. You can find the same problem being asked on developer forums.

So, to be honest there is no standard way to achieve this behavior. I used a workaround to get this done in a project. I thought it’s good to share it if someone is looking for a way. I will divide this into 3 simple steps.

1. Create a New Lightning Component Tab

In order to create a new Lightning Component Tab, please follow these steps.

  • Navigate to Setup and then Tabs.
  • Click on New button in Lightning Component Tab section.

pvzyfs0wteqpgztn1grmha

  • We will need the tab name for the URL which we are going to use for the button.
2. Create a New Button
  • Create a Detail Page button with “Display in new window” behaviour.
  • Button or Link URL
    /one/one.app#/n/tab_name
    
    After URL UPDATE Use the following 
    /lightning/n/tab_name
    

    tab_name is the Tab name which we created in the previous step. Additionally, you can add parameters to the URL. For example – Case record Id

    /one/one.app#/n/New_Case?id={!Case.Id}
    
    After URL UPDATE Use the following 
    /lightning/n/New_Case?id={!Case.Id}
  • Add this button to the page layout under Salesforce1 and Lightning Experience Actions from available Salesforce1 and Lightning Actions.
3. Get the passed Id in the URL

Now, here is the tricky part. Above 2 steps are enough if you don’t want to get the Id passed in the parameter. force:hasRecordId doesn’t work in this scenario. In order to get the passed Id or any other parameter, you will have to do some code in the lightning component which is being displayed in the new page. I did the following things to get the URL parameter.

  • Added an event handler which will be fired when the component gets loaded.
Component Code
<aura:attribute name="recordId"
                    type="String"
                    description="ID of the record."/>

<aura:handler name="init"
			  value="this"
			  action="{!c.doInit}"/>
Client-side controller code
doInit : function(component, event, helper) {

	var recordId = helper.getParamValue('New_Case', 'id');
	component.set('v.recordId', recordId);

}
Client-side helper JS code
({
	getParamValue : function( tabName, paramName ) {

		var url = window.location.href;
		var allParams = url.substr(url.indexOf(tabName) + tabName.length+1).split('&amp;amp;amp;');
		var paramValue = '';
		for(var i=0; i&amp;amp;lt;allParams.length; i++) {
			if(allParams[i].split('=')[0] == paramName)
				paramValue = allParams[i].split('=')[1];
		}
		console.log(paramValue);
		return paramValue;
	}
})

That’s all you need to achieve this functionality. Please comment your questions in case of any doubt/clarification.

UPDATE

If you have enabled the “NEW URL FORMAT” update in your org then you will have to update URL in the tab as per new format.

critical_update_screenshot_cptaqo

Difference

Old URL – /one/one.app#/n/tab_name

New URL –  /lightning/n/tab_name

 

Reference

Here’s What You Need To Know About The New URL Format For Lightning

10 thoughts on “Are you looking for a way to open a lightning component in a new tab/window on detail page button click?

  1. one.app in url will always be same? I am using /one/one.app#/n/tab_name link in my lightning component to launch componet tab. But it gives me unidentified page url. Please help

  2. Hi Zen,

    You need to replace “tab_name” in /one/one.app#/n/tab_name with your custom tab’s name.

    If you see the provided example, you will see that I have used New_Case which is the custom tab’s API name.

    • one.app didnt work for me. Had to use “/lightning/n/tab_name” to make it work. Is it right approach?

      Also if I want to use visualforce tab to launch canvas app with parameters in lightning, is it possible.

      Thanks for the article. It is really useful.

  3. Hi Naval,
    Thank for this nice post.

    I have a similar requirement, on click of an action button, i need to open a tab which will have custom lightning components. For this i created a tab for my component, created a button under ‘button and url’, by passing the new tab URL and appending a parameter ‘ID’ in the URL.
    It does opens a new tab on click of action button, but the new tab have a blank name. And if i go to any other tab and come back to this action button tab, the component on it is disappearing.
    I am getting the name when i dont pass any url parameters, but not when i pass a parameter, and disappearing of component is happening anyways.

    Any idea why of this behaviour,. please help with tour inputs.

    • I don’t think so it’s possible. Try to use window.close() on cancel button click event and see if that works.

  4. Hi Naval, thanks for the awesome post, but I guess with recent changes the url format is changed. For eg:

    ‘https://eliteinsurancepartners.lightning.force.com/lightning/r/Opportunity/0061N00000YuV1bQAF/view?ws=%2Flightning%2Fr%2FAccount%2F0011N00001U3HHJQA3%2Fview%3F0.source%3DalohaHeader&0.source=alohaHeader’

    this is the url i received in helper method and my tab name is csg. I am utilizing the new URL format only in formula field as
    HYPERLINK(“/lightning/n/csg?id=”&Id ,”Get Quote”,”_blank”)

    • Hi adivishwak,

      I have tried with the URL format which you have put here. HYPERLINK(“/lightning/n/Order_Clone_With_Products?id=”&Id) and my tab name is ‘Order_Clone_With_Products’. However, on clicking the detail page button, i am navigating to home page instead of my lightning component. Could you please me with it ?

      many thanks in advance!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.