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);
}
  • 1
    Is c:OP_clickNotification URL-addressable? – David Reed Feb 1 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. – Thomas Pete Feb 4 at 6:59
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.

  • Thanks for the reply, I'll try this and get back here. – Thomas Pete Feb 5 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! – Thomas Pete Feb 11 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 Feb 11 at 12:41
  • Hi David, Could you please help me out here, I have edited the question. – Thomas Pete Feb 12 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.