Opening a Lightning Component in a tab in Lightning Community

Question

I am trying to open a Lightning component with a record id in new page / full screen from a Quick Action. Since, the component opens in a small popup, I used the approach mentioned here

How to open lightning component tab from lightning quick action instead of lightning modal?

to use a navigator component in between that will redirect to original component.

This works great in internal Salesforce Org. However, it is not working in community.

As per Salesforce Support, the lightning component Force:navigateToComponent is depreciated and doesn't work in Community.

I have been asked to use lightning:isUrlAddressable , however it does not support state whereas I require the record Id.

Based on the release note: https://releasenotes.docs.salesforce.com/en-us/summer19/release-notes/rn_networks_navigationenhancements.htm

Salesforce suggests to use comm__namedPage however there isn't enough documentation. How can I open a Lightning Component in full screen within Salesforce and in Community with Record Id from Quick Action?

Answer 1

So answering my own question.

Below is the response I received from Tier 3:

lightning:navigation is supported in Communities however the page reference type for standard__component is not supported. So currently you can't navigate to a lightning component in Communities using lightning:navigation .

Unfortunately force:navigateToComponent isn't supported in Communities either .

support for the standard__component page reference will be added to Communities in the next release(safe harbor).

The only navigation component that is currently supported in Communities is force:navigateToURL. One possible solution you could try: 1. Create a new page (timesheetline) in the community and place the target component here 2. Create a lightning component with a custom button that navigates to the above page via force:navigateToURL 3. Place the button somewhere in the object detail page for the community.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" >
 <lightning:button variant="Neutral" label="Navigate" title="Navigate" onclick="{! c.navigate }"/>
</aura:component>

And the controller:

({
    navigate : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
        var urlEvent = $A.get("e.force:navigateToURL");
        var recId = window.location.href.split("/").pop();
        urlEvent.setParams({
            "url": '/timesheetline?id='+recId
        });
        urlEvent.fire();
    }
})

The component to which we will be navigated will have controller as:

doInit: function(component, event, helper) {
        var oId;
        var urlOfPage = window.location.href;
        if(urlOfPage.indexOf("timesheetline") > -1){
            var parameterName = 'id';
            parameterName = parameterName.replace(/[\[\]]/g, "\\$&");
            var regularExpression = new RegExp("[?&]" + parameterName + "(=([^&#]*)|&|#|$)"),results = regularExpression.exec(urlOfPage);
            oId = decodeURIComponent(results[2].replace(/\+/g, " "));
            if (oId != null) {
                component.set("v.timeSheetHeaderId", oId);
            }
        }
    }