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