function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sagar Vavale 4Sagar Vavale 4 

How to open Lightning component in new tab or window

I have linked my lightning component with Quick action button,
but width of that pop-up has fixed width, my requirement is I want full screen to be acquire by that component.
through mew window or new tab,
How should I achieve this
NagendraNagendra (Salesforce Developers) 
Hi Sagar,

You can manage to open the lightning component in as a tab instead of the popup by using a small component which will redirect to the main component.

You can use the force:navigateToComponent event on init to navigate to your main component.

For more information may I suggest you please check with below link from the community which will help you to put forward in right direction. Hope this helps.

Thanks,
Nagendra
ChellappaChellappa

Sagar,
By doing this approach, the COmponent is opening in the same tab. Can we open it in a new tab?

Thanks,
Chellappa
shalini sharma 24shalini sharma 24
Hi,

Did you find the solution for this? I too have a similar requirement where on the click of button i am redirection to the new lightning component using e.force:navigateToComponent. But i want this new component to open in a new window.
hemasri Konduru 10hemasri Konduru 10
Hi Shalini,

I have a similar requiremnt to open the lightning component in a new tab, tried with e.force:navigateToComponent(redirecting to the same modal popup). Could you share me your approach/solution if you have the same? Many thanks in advance

Thanks,
Hemasri
Navaprasad Reddy AndeNavaprasad Reddy Ande

Hi Sagar,

You can do this way, 
Button component :

<aura:component description="ButtonCmp">
  <!-- Attributes -->
  <aura:attribute name="pageReference" type="Object"/>

  <!--URL Navigation -->
  <lightning:navigation aura:id="navService"/>

  <!-- Handlers -->
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

  <!--Body-->
  <lightning:button onclick="{!c.handleClick}" label="Click to Open in new window"/>
</aura:component>

Controller : 
({
    doInit: function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__TargetCmp',
                pageName: 'Test'
            }
        };
        component.set("v.pageReference", pageReference);
    },

    handleClick: function(component, event, helper) {
        const navService = component.find('navService');
        const pageReference = component.get('v.pageReference');
        const handleUrl = (url) => {
            window.open(url);
        };
        const handleError = (error) => {
            console.log(error);
        };
        navService.generateUrl(pageReference).then(handleUrl, handleError);
    }
})

Target Component: 
<aura:component description="TargetCmp">
  
</aura:component>
Please select as best answer if this solves your issue.
Mohita KalraMohita Kalra
Hi @Navprasad , Could you please advise how can I be on the same page and but open my other component in a new tab ?
Manjunath S 85Manjunath S 85
Hi @Mohita,

Did you get any solution for this?
Mark RootMark Root
Here are two Action Button Lightning Component solutions to either open a pop-up window or new browser tab with a Visualforce Page (or whatever URL you want to redirect to):

Lightning Component: 
<aura:component implements="force:lightningQuickAction,force:hasRecordId" access="global">
	<aura:handler name="init" action="{!c.openPage}" value="{!this}" />
</aura:component>
Controller (to open pop-up window): 
({
    openPage : function(component,event){
    	var w = 1020;
    	var h = screen.height-120;
    	var left = (screen.width/2)-(w/2);
    	var top = 0;
        var recordId = component.get('v.recordId');
        //Open Pop-up Window with Visualforce Page
    	window.open('/apex/YOUR_VISUALFORCE_PAGE?id='+recordId, 'Sales Contract', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
        //Close Action Button Modal
        $A.get('e.force:closeQuickAction').fire();
    }
})
Controller (to open new browser tab): 
({
    openPage : function(component,event){
        var recordId = component.get('v.recordId');
        //Open New Browser Tab with Visualforce Page
        window.open('/apex/YOUR_VISUALFORCE_PAGE?id='+recordId,'_blank');
        //Close Action Button Modal
        $A.get('e.force:closeQuickAction').fire();
    }
})