Are you looking for a way to open a lightning component in a new tab/window on detail page button click?
By 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.
- We will need the tab name for the URL which we are going to use for the button. You need to add select that lightning component here and it should implements force:appHostable interface.
2. Create a New Button
- Create a Detail Page button with “Display in new window” behaviour.
- Button or Link URL
/lightning/n/tab_name
tab_name is the Tab name (API Name) which we created in the previous step. Additionally, you can add parameters to the URL. For example – Case record Id
/lightning/n/New_Case?id={!Case.Id} New_Case - Tab Name - 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.
- Implement lightning:isUrlAddressable interface to the Lightning component to get access to the current page state
- Added an event handler which will be fired when the component gets loaded.
https://gist.github.com/sfcure/764b7459afa7af4d5a6d57c65c31c071
https://gist.github.com/sfcure/764b7459afa7af4d5a6d57c65c31c071#file-samplecompcontroller-js
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.
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
By Naveen Sharma
June 25, 2018one.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
By Naveen Sharma
November 27, 2018Yes, one.app will always be same. You can also try the new format.
By Naveen Sharma
June 25, 2018Hi 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.
By Naveen Sharma
June 26, 2018one.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.
By Naveen Sharma
August 16, 2018Hi 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.
By Naveen Sharma
August 18, 2018What do you mean by new tab have a blank name? Can you please post some screenshots?
By Naveen Sharma
February 19, 2019Hi Naval it appears like this
By Naveen Sharma
February 19, 2019Was a solution found to blank tab name ?
By Naveen Sharma
June 25, 2020While opening new tab, tab name is not showing
after clicking button , new tab is opening and tab name is displaying as Loading…, not any tab name is displayed.
Kindly post any solution
By Naveen Sharma
August 17, 2018Is there a way to dynamically close the tab, let’s say upon a user clicking a “cancel” button?
By Naveen Sharma
August 18, 2018I don’t think so it’s possible. Try to use window.close() on cancel button click event and see if that works.
By Naveen Sharma
September 19, 2018Hi 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”)
By Naveen Sharma
October 27, 2018Hi 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!
By Naveen Sharma
December 17, 2018Hi, Thanks for the Article. It helped a lot though !
One thing I would like to highlight is , In Chrome it is not opening New tab , instead using the same tab to navigate to the desired component.
Secondly, the back button of the browser doesn’t work, i.e. it removes the history of the same or keeps redirecting to the same component again and again.
I really wanted it to open a new browser tab but unfortunately , after following the above steps correctly , it doesn’t work.
Thanks in advance for the solution.
By Naveen Sharma
July 2, 2019Hello,
Lightning Component (must implement lightning:isUrlAddressable). https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation_page_definitions.htm
By Naveen Sharma
December 2, 2019As of Spring ’19 you now must add a namespace prefix: https://releasenotes.docs.salesforce.com/en-us/spring19/release-notes/rn_forcecom_general_namespace_prefix_cruc_reminder.htm
By Naveen Sharma
May 15, 2020Hello Naval,
Thanks for sharing,
I am having bit different scenario where its not working for me.
I am creating detail page url button and from which I am redirecting to component like
/lightning/cmp/testcmp?cid={!contact.Id}
when I open component I am getting undefined for cid.
Please help me for this.
By Naveen Sharma
June 15, 2020In general the “default” namespace is indicated by c__, so I expect the correct way to do this — if you’re manually building the url — is to prefix each of you’re parameters with c__ and they won’t get stripped.
By Naveen Sharma
June 15, 2020Hi Naval,
Useful Post. I have similar requirement and hence I have done the steps mentioned above. First two steps are working fine however I want to pass Id of he record and hence followed 3rd step however I am not able to get the Id in the lightning component.
When I click the button, I see the Id in the URL but when the new component loads the Id is removed from URL and hence I get null recordId in the doInit() method.
Please suggest.
By Naveen Sharma
June 15, 2020In general the “default” namespace is indicated by c__, so I expect the correct way to do this — if you’re manually building the url — is to prefix each of you’re parameters with c__ and they won’t get stripped.
By Naveen Sharma
June 15, 2020Hi Naval,
Thanks for the quick reply. However I didn’t understand where exactly we should append the namespace “c__” ?
The Button is created for Case and URL mentioned is :
/lightning/n/Clone?id={!Case.Id}
where Clone is the tab name.
It opens the Clone tab and appends the Case record Id, however as the component loads the record Id gets stripped.
So when the button is clicked the URL shows as :
https://xxxxxxx/lightning/n/Clone?id=500xxxxxxxxxx
But when the component loads and doInit method is called and the id is stripped from URL.
By Naveen Sharma
June 15, 2020Your URL should be like this –
lightning/n/Clone?c__id={!Case.Id}
By Naveen Sharma
June 15, 2020Hi Naval,
Thankyou so much. It is working.
By Naveen Sharma
June 26, 2020Hi,
This is working for me with c__id and using same in Aura component. But With this approach it is not opening the new tab in Chrome but it is making a new tab in Lightning only. any suggestions how to open a new tab rather than like a record in lightning tab.
Thanks!
By Naveen Sharma
July 3, 2020perfectly Worked, Thank you so much 🙂
By Naveen Sharma
July 3, 2020Perfectly Worked, thank you so much Naval.
By Naveen Sharma
August 17, 2020Hi Naval
I came across this and was hoping you could help me.
I cannot figure out how to add this ‘open new tab’ option that Console Classic has https://a.cl.ly/GGuRRYXA to Lightning Console https://a.cl.ly/bLuRRE66
I am not a developer so I am needing admin friendly steps in Developer Console.
Thanks
Heather