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 behaviour. 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

    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}
  • 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('&');
		var paramValue = '';
		for(var i=0; i<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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s