[SalesForce] Open lightning component in new browser tab

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);
}

Best Answer

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.

Related Topic