0

Can we open a lightning component in a new browser window or tab.

Basically I have a component where I open a component in a modal on click of a link. is it possible to open that component in new browser tab/window?

<b>{!v.userName}</b> Check on status by clicking <a class="link" onclick="{!c.modals}">here</a>.<br/>

opened modal :-

<aura:if isTrue="{!v.showModal}">
            <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" 
                     aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"><h4>{!v.notification.Name}</h4></h2>  
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <div class="slds-wrap slds-m-around_medium">

                                <label><strong>Title</strong></label>
                                <div>{!v.notification.Name}</div>

                            <aura:if isTrue="{!v.notificationType =='Product Addition to Forecast'}">
                            <c:OP_BirthNotification/>
                                <aura:set attribute="else">    
                                <c:OP_clickNotification/> 
                                </aura:set>
                            </aura:if>
                        </div> 
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick="{!c.closeModal}">Close</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>

is That OP_clickNotification could be opened in new tab?

EDIT:- I have Tried to generate the URL but it just gives undefined in console. I took the same example as given in the salesforce documentation :-

The component:-

    <aura:component implements="force:hasRecordId,force:appHostable" 
                description="c:hello component">
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <aura:attribute name="url" type="String"/>
    <lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component>

Controller:-

init : function(component, event, helper) {
    var pageReference = {
        type: 'standard__component',
        attributes: {
            componentName: 'c__helloTarget',
        },
        state: {
            "c__firstname": "John"
        }
    };
    component.set("v.pageReference", pageReference);
 },
 handleClick: function(component, event, helper) {
     debugger;
    var navService = component.find("navService");
    var pageReference = component.get("v.pageReference");
    event.preventDefault();
    navService.generateUrl(pageReference)
        .then($A.getCallback(function(url) {
            component.set("v.url", url ? url : defaultUrl);
        }), $A.getCallback(function(error) {
            component.set("v.url", defaultUrl);
        }));
     var url = component.get("v.url");
     console.log(url);
}
2
  • 1
    Is c:OP_clickNotification URL-addressable?
    – David Reed
    Commented Feb 1, 2019 at 14:25
  • I don't know what is URL-addressable, but if you are asking that whether it shows different URL when component opens then no. It just shows same URL i have for my app. Commented Feb 4, 2019 at 6:59

3 Answers 3

2

Your component, the one you wish to open in a new window, needs to implement the lightning:isUrlAddressable interface. That will allow it to be targeted by a URL (that doesn't include an opaque encoded payload) and receive its state through URL parameters.

Then, your dispatching component will need to declare a <lightning:navigation> service component.

    <lightning:navigation aura:id="navService"/>

In your controller, you'll construct a page reference, which you can pass to the navService's public methods generateUrl() and navigate() to, respectively, obtain a URL to navigate to your other component or directly invoke the navigation. Your page reference will include

"type": "standard__component",
"attributes": {
    "componentName": "c__MyOtherComponent"   
},   

to define it as a reference to that component.

There are detailed examples available in the Lightning Component Library pages linked above, as well as in the Lightning Components Developer Guide.

4
  • Thanks for the reply, I'll try this and get back here. Commented Feb 5, 2019 at 12:48
  • Ok, I have applied the solution, but it doesn't open in new browser window. And how can i obtain the URL to navigate to my other component. Thanks! Commented Feb 11, 2019 at 12:40
  • As above, you can obtain the URL by calling generateUrl(). You can then programmatically open a new window if you wish.
    – David Reed
    Commented Feb 11, 2019 at 12:41
  • Hi David, Could you please help me out here, I have edited the question. Commented Feb 12, 2019 at 11:34
0

As an option, you can make your Lightning Component acceptable for Lightning Tab. In aura you should implement interface "force:appHostable" In LWC you should include lightning__Tab into targets. Then create a Lightning Tab for that Component and open url for it in  a new browser tab by adding attribute target="_blank" to the url.

0

Here are two additional Quick 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();
    }
})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .