9

I am trying to implement a navigation mechanism for my community

So I am trying to implement the new lightning:navigation component.

This is my component - main:

MARKUP

<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes,force:appHostable,lightning:isUrlAddressable">
    <lightning:navigation aura:id="navService"/>
    <lightning:button variant="base" label="Open page" title="Click to open page with queryString attributes" onclick="{!c.handleClick}"/>
</aura:component>

CONTROLLER

({
    openPage: function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                'componentName': 'c__main'
            },
            state: {
                type: 'open',
                id: 'a1ZW0000001Pc95MAC'
            }
        };
        var navService = component.find("navService");
        navService.navigate(pageReference);
    }
})

When I add this component to lightning experience from the app builder, the navigation happens good and I get the url of the component + the 2 attributes of the queryString.

But when I add this component in my community - a click on the button does not do anything.

QUESTION

Is lightning:navigation supported in Salesforce Communities?

If it is - what am I doing wrong?

14

lightning:navigation is not supported in communities .Take a look at Summer18 release notes here that clearly mentions below

These resources aren’t supported in other containers, such as Lightning Components for Visualforce, Lightning Out, or Communities. This is true even if you access these containers inside Lightning Experience or the Salesforce mobile app.

Update:

With Recent releases it is now supported in lightning communities as well .

10
  • Darn, do you know if it is going to be supported in the near future? Jul 30 '18 at 12:16
  • What are you trying to achieve ? Do you want to navigate between two components in same page or different ? If different then use the developer.salesforce.com/docs/component-library/bundle/… link else you might need to build your own .Not sure on its future roadmap .Thanks Jul 30 '18 at 12:19
  • My whole community is developed with lightning components, also the top ruler. I want to stay on the same page if the page refreshes, and also to easily go to different pages with the querystring Jul 30 '18 at 12:21
  • For different page use forcecommunity:routelink that works .Also releber you can use navigateTourl and navigateToObject events and pass parameters Jul 30 '18 at 12:22
  • forcecommunity:routelink is for pages automatically generated from the provided record ID, and that is not good for me. Would force:navigateToURL work? if so do you know how do I get params from quesryString? Jul 30 '18 at 12:27
4

There's been an update for this since the best answer was posted and it's now possible to navigate around at your heart's content.

Here's how:

On the component:

<!-- exampleComponent.cmp -->
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <lightning:navigation aura:id="navService"/>
    <!-- Your content here -->
    <lightning:button label="Navigate To Page" variant="Neutral" onclick="{!c.completeOrder}" />
</aura:component>

In the controller:

({
    navToPage : function (component, event, helper) {
        // gets the <lightning:navigation> tag on the component
        let navService = component.find("navService");

        // Sets the route to [Org url]/[Community uri]/[pageName]
        let pageReference = {
            type: "comm__namedPage", // community page. See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation_page_definitions.htm
            attributes: {
                pageName: 'home' // pageName must be lower case
            }
        }

        navService.navigate(pageReference);
    }
})

And that's it!

If you'd prefer, there are more options including generating the url on init and saving it in an attribute to use later, or writing the controller code in the helper file instead of directly in the controller, which allows you to more cleanly input a pageName without a giant chunk of code - especially if you want to reuse it.

For more info, see the below links:

lightning:navigation tag:
https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation

Page Reference Types:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation_page_definitions.htm

Cheers Guys! Happy coding!

Dunks

3
  • Thanks @Dunks184 this is very good to know Sep 4 '19 at 8:13
  • Do you happen to know which API this was implemented in? Jun 18 '20 at 14:25
  • 1
    Hi @SteveSchrab, I wasn't able to tag you from my phone the other day so here's the answer again: Hi Steve, I'm pretty sure it was API version 47.0. I think there had just been a release recently when I posted it and we had updated our api version, but I don't think I needed to update the community version. I can't quite remember. Which api version are you hoping to use?
    – Dunks184
    Jun 25 '20 at 1:09

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.