0

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.

7
  • Please explain what are you trying to achieve completely.. what is the use of const newShortcuts? Why are you not passing href to method navigateToComponent(href) Dec 14, 2023 at 12:50
  • @vivekvismayam I am trying to navigate to community page from LWC component when on click the link. newShortcuts is used to pass the list of values to linksShortlist in html. How to pass the href to method navigateToComponent()?
    – blackFire
    Dec 14, 2023 at 12:53
  • 1.Please paste the HTML part also in the question. 2. forms, requests,frame , supplier,invoice-hold-form -these are standard pages in community? Dec 14, 2023 at 12:56
  • @vivekvismayam Already I have posted that. Anyhow, will share here as well. <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>
    – blackFire
    Dec 14, 2023 at 12:58
  • Please confirm on question 2 then Dec 14, 2023 at 13:00

2 Answers 2

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");
        });
    }
}
1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .