Experience Cloud – How to Create Dynamic URL Using NavigationMixin.navigate

experience-cloudlightningnavigationnavigationmixin.navigate

So I am trying to do some practice projects on Experience Cloud, I have two questions:

  1. How should I write proper navigation within NavigationMixin.Navigate, so type should be standard_webPage but in attributes how should I give URL with the id to navigate dynamically?
  2. From the builder of Experience Cloud, how should I create the new page so its URL name will be dynamic and not static?

Here is my Navigation:

this[NavigationMixin.Navigate]({
    type: 'standard__webPage',
    attributes: {
        url: `https://urlName/iWantIdToBeHere`
    }
})

I was googling about dynamic navigation and read on several pages for example: https://www.sfdcpoint.com/salesforce/navigation-service-in-lwc/ but still could not get answer

Best Answer

From the question, it seems you're trying to send a parameter via URL to a community page and trying to retrieve the same. It can be done in below steps -

  1. Create a community page where you want to navigate and put the LWC component to receive the URL parameters
  2. Use the community page name in your source component, from which you want to redirect. It can be achieved via below code -
this[NavigationMixin.Navigate]({
    type: 'comm__namedPage',
    attributes: {
        pageName: 'target_page_name', //replace this by page name created in step #1
        recordId: this.recordId
    }, 
    state : stateObj
});
  1. At the receiving end, write this below code which will help you to fetch the parameter from URL.
//Generic method to give the URL parameter value
getUrlParamValue(url, key) {
        return new URL(url).searchParams.get(key);
}

//Getting URL parameter here.
//Assume - Parameter Name is "Id"
const idFromURL = this.getUrlParamValue(window.location.href, 'Id');
console.log('ID from URL :' + idFromURL);
Related Topic