LWC Navigation In Community

Question

I cannot figure out how to navigate to an Object page from an LWC in the Community.

The use case I am attempting is very straight forward. I have a form that I want users to be able to fill out, then upon validation of the form, I want to send them to a confirmation page where I display the values they just typed in.

In my LWC, I have this code:

   createRecord(recordInput)
      .then(preApp => {
        this.appId = preApp.id;
        this.dispatchEvent(
          new ShowToastEvent({
            title: 'Success',
            message: 'New Thing Created',
            variant: 'success',
          }),
        );
        this[NavigationMixin.Navigate]({
          type: 'comm_namedPage',
          attributes: {
            name: 'Page_Name__c' // This is the API name of the Object Page I created
          }
        });
      })
      .catch(error => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: 'Error creating record',
            message: reduceErrors(error).join(', '),
            variant: 'error',
            mode: 'sticky'
          }),
        );
      });

I have also added this to my js-meta.xml file.

<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property
            name="recordId"
            type="String"
            label="Record Id"
            default="{!recordId}" />
        <property
            name="objectApiName"
            type="String"
            label="Object Name"
            default="{!objectApiName}" />    
    </targetConfig>
</targetConfigs>

Essentially, I need to make my LWC context aware (just like in the regular Lightning App Builder), and while this should be as easy as dragging my component to a page and passing along $recordId, nothing in the Community is easy.

Right now the page simply doesn't go anywhere on submission although the record gets created successfully.

Maybe this is the wrong approach? Perhaps I should be using Apex to provide a related list of all the records that the user created in the community?

Answer 1

So, best to just ignore the SF documentation and review their Community eBike demo.

I used the following settings for the NavigationMixin.Navigate:

   this[NavigationMixin.Navigate]({
      type: 'standard__recordPage',
      attributes: {
        recordId: preApp.id,
        objectApiName: OBJECT_NAME.objectApiName,
        actionName: 'view'
      }
    });

In my import statements at the top, I had to import the schema:

import OBJECT_NAME from '@salesforce/schema/Object_Name__c';

This seems to work fine now.