Navigation to community page

Question

html

<template for:each={linksShortlist} for:item="link">
                      <li key={link.label} class="nhsuk-grid-column-one-half">
                        <a href={link.href}>
                            <span>{link.label} </span>
                          <c-nhs-icon icon-name="chevron-right" no-fill class="launchpad-item"></c-nhs-icon>
                        </a>
                      </li>
                    </template>

js

connectedCallback() {
   console.log(Id);
   //const existingLinks = getUserLaunchpadItems();
   const newShortcuts  = [
    { label: 'Forms', href: '/forms', target: '_blank' },
    { label: 'Requests', href: '/requests', target: '_blank' },
    { label: 'Frame', href: '/frame', target: '_blank' },
    { label: 'Payments', href: 'ClientInviteForm__c',  target: '_blank' },
    { label: 'Supplier', href: '/supplier', target: '_blank' },
    { label: 'Invoice Hold Form', href: '/invoice-hold-form', target: '_blank' },
  ];
 // this.linksShortlist  = [...existingLinks, ...newShortcuts ];
 this.linksShortlist = newShortcuts;
  //console.log('value from getUserLaunchpadItems' ,existingLinks);
  console.log('value of shortlinks' ,newShortcuts );
  console.log('combined value',this.linksShortlist);
  this.navigateToComponent();
  }


navigateToComponent(href) 
    {
      //console.log('inside form navigation',href);
      //console.log('href',href);
       const pageReference = {
        type: 'comm__namedPage',
        attributes: {
          name: href,
        },
      };
      this[NavigationMixin.Navigate](pageReference);
      console.log('pageRef',pageReference);
    }

Need navigation to community page when click on the link.

Answer 1

Please try this updated code and see if the same is working. in JS you will have to change href attribute under constant newShortcuts to API name of specific pages. for eg if API name for 'Forms' page is forms__c the you have to use that as href.

HTML: `

    <li key={link.label} class="nhsuk-grid-column-one-half">
        <a data-id={link.label} onclick={linkClicked}>
            <span>{link.label} </span>
            <c-nhs-icon icon-name="chevron-right" no-fill class="launchpad-item"></c-nhs-icon>
        </a>
    </li>
</template>

`

JS:

import { LightningElement } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

export default class NavigationCommunityTest extends  NavigationMixin(LightningElement) {

    linksShortlist;

    connectedCallback() {

        //console.log(Id);

        //const existingLinks = getUserLaunchpadItems();

        const newShortcuts  = [

         { label: 'Forms', href: 'forms__c', target: '_blank' },

         { label: 'Requests', href: 'requests__c', target: '_blank' }, 

         { label: 'Frame', href: 'frame__c', target: '_blank' },

         { label: 'Payments', href: 'ClientInviteForm__c',  target: '_blank' },

         { label: 'Supplier', href: 'supplier__c', target: '_blank' },

         { label: 'Invoice Hold Form', href: 'invoice-hold-form__c', target: '_blank' },

       ];

      // this.linksShortlist  = [...existingLinks, ...newShortcuts ];

      this.linksShortlist = newShortcuts;

       //console.log('value from getUserLaunchpadItems' ,existingLinks);

       console.log('value of shortlinks' ,newShortcuts );

       console.log('combined value',this.linksShortlist);

       
       }
     
       linkClicked(event){
        console.log(event);
        console.log('clicked ' ,event.currentTarget.dataset.id );
        let linkSelected=this.linksShortlist.find(link=>link.label==event.currentTarget.dataset.id);
        console.log(linkSelected.href);

        this.navigateToComponent(linkSelected.href );
       }
     navigateToComponent(href) 
         {
           //console.log('inside form navigation',href);
           //console.log('href',href);
           this[NavigationMixin.GenerateUrl]({
            type: 'comm__namedPage',
            attributes: {
                name: href,
            }
        }).then(url => {
            window.open(url, "_blank");
        });
    }
}

Answer 2

You can follow this blog - https://medium.com/@mukulmahawariya11/navigation-in-salesforce-communities-ad6838488166

Using links to navigate is not a recommended approach as the path to pages varies between sandbox and production. Try following the blog. It will generate the links dynamically and navigate the user.