none
How to create navigation dynamically using react js in SPFX in SharePoint online. RRS feed

  • Question

  • How create the navigation dynamically based on the pageName using react js in SPFX in sharepoint online
    Thursday, October 10, 2019 10:35 AM

All replies

  • Please elaborate your requirement using examples.

    Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    Thursday, October 10, 2019 11:45 AM
  • I want create navigation and it should change based on the page and i will get the information from list.

    Ex:

    If i am in "Parent1" page the navigation similar to below

    Parent1  

              --- child1

                        -- child2

    If i am in "child1" page the navigation similar to below

     child1

                --- child2

                        --- child3

    If i am in "child2" page the navigation similar to below

    child2

                --- child3

                        --- child4

    As mentioned in above the navigation change based on the pagename. Based on the pageName it checks in the list and get 2 levels of child nodes and show.

    It should be dynamically done by using SPFX.

    I developed this by using poweshell script but it will not change based on the pagename.

    Thursday, October 10, 2019 11:52 AM
  • Hi Rajesh,

    If you want to create navigation base on the custom list data, here is a solution for your reference.

    spfx global navigation

    If you want to load data base on pageName, we can add new column in the list, and get data base on the pageName in the solution above.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 11, 2019 3:01 AM
    Moderator
  • Hi Dennis,

    What is max number of levels in the menu navigation?

    Friday, October 11, 2019 4:10 AM
  • Hi Dennis,

    My actual requirement i have a list similar to below.

    When i apply the below powershell script 

    ===============================================================

    $SiteUrl="https://abc.sharepoint.com/sites/def"
    $Username = "kkk@ghh.onmicrosoft.com" 
    $Password = "Password" 
    $listName = "SPList"


    #region Credentials 
    [SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
    [System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
    #endregion Credentials


    Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
    function RetrieveListItemByQuery($parentId2,$file10){  

    $listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
       foreach($listItem1 in $listItems2){  
          if(!$listitem1["isDeletedFromHopex"]){
           $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["Id"]+".aspx"
           $file5= Add-PnPNavigationNode -Title  $listitem1["ShortName"] -Url  $pageUrl -Location "QuickLaunch"  -Parent $file10.Id 
           Write-Host "Title : " $file10.Id
           Write-Host "Title : "$listitem1["ShortName"]
           
           }
           RetrieveListItemByQuery $listItem1["Id"] $file5  
           
        }  
    }  
    Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

    $parentId="11"
    #$listName = "MLVGMSPROCESS"
    $file4=Add-PnPNavigationNode -Title "Processes" -Url $SiteUrl -Location "QuickLaunch"
    $listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
       foreach($listItem in $listItems){ 
         
          $pageUrl=$SiteUrl+"/sitepages/"+$listitem["Id"]+".aspx"
          if(!$listitem["isDeletedFromHopex"]){
          $file3= Add-PnPNavigationNode -Title  $listitem["ShortName"] -Url  $pageUrl -Location "TopNavigationBar"  -Parent $file4.Id
          $childLevel1=$file3
         
          Write-Host "Title : " $file3.Id
           RetrieveListItemByQuery $listItem["Id"] $file3 
           }
              
                
           
           
        }  
     

    ================================================================

    Navigation looks like as similar

    ========================================

    

    ==========================================

     If i change the powershell script as shown in below 

    ===========================================

    $SiteUrl="https://abc.sharepoint.com/sites/def"
    $Username = "kkk@ghh.onmicrosoft.com" 
    $Password = "Password" 
    $listName = "SPList"


    #region Credentials 
    [SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
    [System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
    #endregion Credentials


    Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
    function RetrieveListItemByQuery($parentId2,$file10){  

    $listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
       foreach($listItem1 in $listItems2){  
          if(!$listitem1["isDeletedFromHopex"]){
           $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["Id"]+".aspx"
           $file5= Add-PnPNavigationNode -Title  $listitem1["ShortName"] -Url  $SiteUrl -Location "QuickLaunch"  -Parent $childLevel1.Id 
           Write-Host "Title : " $file10.Id
           Write-Host "Title : "$listitem1["ShortName"]
           
           }
           RetrieveListItemByQuery $listItem1["Id"] $file5  
           
        }  
    }  
    Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

    $parentId="11"
    #$listName = "MLVGMSPROCESS"
    $file4=Add-PnPNavigationNode -Title "Te" -Url $SiteUrl -Location "QuickLaunch"
    $listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
       foreach($listItem in $listItems){ 
         
          $pageUrl=$SiteUrl+"/sitepages/"+$listitem["Id"]+".aspx"
          if(!$listitem["isDeletedFromHopex"]){
          $file3= Add-PnPNavigationNode -Title  $listitem["ShortName"] -Url  $SiteUrl -Location "TopNavigationBar"  -Parent $file4.Id
          $childLevel1=$file3
         
          Write-Host "Title : " $file3.Id
           RetrieveListItemByQuery $listItem["Id"] $file3 
           }
              
                
           
           
        }  
     

    =========================================

    Navigation Looks below:

    ===========================================

    ===========================================

    But how can i get all the sub levels means 

     Under "Mobile" node i need see childnodes of "Android" $ "IOS"

    It should be something the total navigation looks something as shown in below:

    Technologies

                        --- Software

                                                --- SharePoint

                                                                 ---- Office365

                                                                 ---- SP2019

                                                ---- JAVA

                                                ----- Mobile

                                                                  ---- Android

                                                                   ----- IOS

                       --- Marketing

                       ---- Automobile

                                                 --- Car

                                         

    Friday, October 11, 2019 5:27 AM
  • Hi,

    By default, the MaximumDynamicDisplayLevels set to 2.

    We can open the master and find "TopNavigationMenu", then modify MaximumDynamicDisplayLevels set more than 2.

    <SharePoint:AspMenu ID="TopNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&lt;%$Resources:wss,navigation_accesskey%&gt;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="3" SkipLinkText="" />

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 11, 2019 9:51 AM
    Moderator
  • But how can we modify without using SharePoint designer?
    Friday, October 11, 2019 10:03 AM
  • hi Dennis,

    Thanks for your reply.

    I changed my master page as shown in below

    ======================================

    <SharePoint:AspMenu
    id="V4QuickLaunchMenu"
    runat="server"
    EnableViewState="false"
    DataSourceId="QuickLaunchSiteMap"
    UseSimpleRendering="true"
    Orientation="Horizontal"
    StaticDisplayLevels="6"
    DynamicHorizontalOffset="0"
    AdjustForShowStartingNode="true"
    MaximumDynamicDisplayLevels="6"
    StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=47"
    StaticPopoutImageTextFormatString=""
    SkipLinkText=""
    StaticSubMenuIndent="0"
    />

    =========================================

    After uploading that master page i executed the below script

    ==============================================

                                                                                                

    $SiteUrl="https://abc.sharepoint.com/sites/gef"
    $Username = "sdfsd@sdff.onmicrosoft.com" 
    $Password = "Password" 
    $listName = "sampleNavList"
    $childLevel1=""
    $childLevel2=""

    #region Credentials 
    [SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
    [System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
    #endregion Credentials


    #Creating SharePoint Modern Pages by taking reference of Page Template


    Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
    function RetrieveListItemByQuery($parentId2,$file10){  

    $listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
       foreach($listItem1 in $listItems2){  
          if(!$listitem1["isDeletedFromHopex"]){
           $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["ChildId"]+".aspx"
           $file5= Add-PnPNavigationNode -Title  $listitem1["Title"] -Url  $SiteUrl -Location "QuickLaunch"  -Parent $file10.Id 
           Write-Host "Title : " $file10.Id
           Write-Host "Title : "$listitem1["Title"]
           RetrieveListItemByQuery $listItem1["ChildId"] $file5


            #Write-Host "Title : " $listItem1["HexId"]  
            #Write-Host "Title : " $listItem1["ShortName"]  
           }


        }  
    }  
    Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

    $parentId="11"

    $file4=Add-PnPNavigationNode -Title "Technologies" -Url $SiteUrl -Location "QuickLaunch"
    $listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
       foreach($listItem in $listItems){ 

          $pageUrl=$SiteUrl+"/sitepages/"+$listitem["ChildId"]+".aspx"
          if(!$listitem["isDeletedFromHopex"]){
          $file3= Add-PnPNavigationNode -Title  $listitem["Title"] -Url  $SiteUrl -Location "TopNavigationBar"  -Parent $file4.Id
          $childLevel1=$file3

          Write-Host "Title : " $file3.Id
           RetrieveListItemByQuery $listItem["ChildId"] $file3 
           }


            #Write-Host "ParentId : " $parentId




        }  

    =================================

    Navigation menu looks as shown in below

    ===================================

    =======================================================================

    Now i can see only 2 levels but if i "Edit" the navigation manually adding and other node as shown in below

    After clicking the "save" button i can see the navigation as below and it showing as many levels we want

        If i remove the link "t" link and save it shows only 2 levels.

     How can i achieve multiple levels with out adding the another link "t" manually as shown in above

    Friday, October 11, 2019 12:24 PM
  • I am showing the 'N' level of navigation based on the list as shown in below.

    i am running the below script to add the navigation dynamically

    ===============================================

    $SiteUrl="https://abc.sharepoint.com/sites/demo1"
    $Username = "hg@hh.onmicrosoft.com" 
    $Password = "Passord1" 
    $listName = "sampleNavList"
    $childLevel1=""
    $childLevel2=""

    #region Credentials 
    [SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
    [System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
    #endregion Credentials


    #Creating SharePoint Modern Pages by taking reference of Page Template


    Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
    function RetrieveListItemByQuery($parentId2,$file10){  

    $listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
       foreach($listItem1 in $listItems2){  
          if(!$listitem1["isDeletedFromHopex"]){
           $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["ChildId"]+".aspx"
           $file5= Add-PnPNavigationNode -Title  $listitem1["Title"] -Url  $SiteUrl -Location "QuickLaunch"  -Parent $file10.Id 
           Write-Host "Title : " $file10.Id
           Write-Host "Title : "$listitem1["Title"]
           RetrieveListItemByQuery $listItem1["ChildId"] $file5
              
            
            #Write-Host "Title : " $listItem1["HexId"]  
            #Write-Host "Title : " $listItem1["ShortName"]  
           }
             
           
        }  
    }  
    Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

    $parentId="11"

    $file4=Add-PnPNavigationNode -Title "Technologies" -Url $SiteUrl -Location "QuickLaunch"
    $listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
       foreach($listItem in $listItems){ 
         
          $pageUrl=$SiteUrl+"/sitepages/"+$listitem["ChildId"]+".aspx"
          if(!$listitem["isDeletedFromHopex"]){
          $file3= Add-PnPNavigationNode -Title  $listitem["Title"] -Url  $SiteUrl -Location "TopNavigationBar"  -Parent $file4.Id
          $childLevel1=$file3
         
          Write-Host "Title : " $file3.Id
           RetrieveListItemByQuery $listItem["ChildId"] $file3 
           }
              
            
            #Write-Host "ParentId : " $parentId
            
           
           
           
        }  
     

    ===============================================

    After executing the above script the navigation shown below

    ------------------------------------------------------------------------------------------------

    ------------------------------------------------------------------------------------I am not able to get the all the levels but when manually add the new node another link and save i am able to see all the 'N' levels

    -------------------------------------------------------------------------------------------------------

    --------------------------------------------------------------

    -----------------------------------------------------

    ------------------------------------------------------------

    But when i refresh the page the navigation coming back to a shown in below

    -----------------------------------------------------------------------------

    -----------------------------------------------------------------------------

    How can i get all the 'N' level of navigation after refreshing the page also

    Saturday, October 12, 2019 5:36 PM
  • Hi Rajesh,

    We don't need add the another link 't' manually to make the custom navigation works. It seems the cache issue, please close the browser and open the SharePoint site again, and check if it works.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Monday, October 14, 2019 9:59 AM
    Moderator
  • I tried it and open in another system but it still showing only 2 levels of navigation.

    My site is SharePoint modern site.

    Monday, October 14, 2019 10:49 AM
  • Can you please try the same thing on your local SharePoint Modern Site?
    Monday, October 14, 2019 10:49 AM
  • Hi Rajesh,

    It working fine in my SharePoint online test environment.

    Please try to install the latest PnP powershell.

    Install-Module SharePointPnPPowerShellOnline

    https://www.powershellgallery.com/packages/SharePointPnPPowerShellOnline/3.14.1910.0

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, October 15, 2019 9:29 AM
    Moderator
  • Its already installed in my machine.

    Tuesday, October 15, 2019 9:35 AM
  • Hi,

    Your current PnP powershell version is 3.12.1908.1.

    Using command below to install the latest version 3.14.1910.0.

    Install-Module SharePointPnPPowerShellOnline -Force

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, October 15, 2019 9:47 AM
    Moderator
  • I upgraded as mentioned above but still i am not able to get more than 2 levels?

    Any changes i need to do w.r.to SharePoint site any features needs to be activated?

    Is this works in modern site?


    Tuesday, October 15, 2019 10:17 AM
  • Hi Rajesh,

    Did you solve the issue?

    Please try to use the PnP PowerShell below to check if it works in your environment.

    $SiteURL = "https://tenant.sharepoint.com/sites/dennis"
    #Get Credentials to connect
    $Cred = Get-Credential
    Connect-PnPOnline -Url $SiteURL -Credentials $Cred
    $node=Add-PnPNavigationNode -Title "Menu1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External
    $childNode1=Add-PnPNavigationNode -Title "Menu1.1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External -Parent $node.Id
    $childNode1_1=Add-PnPNavigationNode -Title "Menu1.1.1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External -Parent $childNode1.Id
    $childNode1_1_1=Add-PnPNavigationNode -Title "Menu1.1.1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External -Parent $childNode1_1.Id

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 18, 2019 9:06 AM
    Moderator
  • I tried the above script but still i got only 2 levels.

    Did i miss anything?

    Please find the below screenshot:

    Monday, October 21, 2019 9:50 AM
  • Hi Rajesh,

    I change MaximumDynamicDisplayLevels to 5 in my master page using SharePoint designer 2013.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, October 22, 2019 9:48 AM
    Moderator
  • Hi Dennis,

    How we can know current site master page?

    I clicked on site settings --> composed looks --> there i find the current master page as olso.master as shown in below

    --------------------------------------------------------------------------------------------

    ------------------------------------------------------------------------------------------------

    Then i open masterpage gallery : https://ms.sharepoint.com/sites/AC/_catalogs/masterpage/Forms/AllItems.aspx

    there i found oslo.master as shown below:

    ------------------------------------------------------------------------------------------------

    ------------------------------------------------------------------------------------------------

    From there i download the copy of 'oslo.master' to my local and open it 'notepad++' or visual studio and update the data as shown in below:

    -----------------------------------------------------------------------------

    <SharePoint:AspMenu
    id="V4QuickLaunchMenu"
    runat="server"
    EnableViewState="false"
    DataSourceId="QuickLaunchSiteMap"
    UseSimpleRendering="true"
    Orientation="Horizontal"
    StaticDisplayLevels="6"
    DynamicHorizontalOffset="0"
    AdjustForShowStartingNode="true"
    MaximumDynamicDisplayLevels="6"
    StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=47"
    StaticPopoutImageTextFormatString=""
    SkipLinkText=""
    StaticSubMenuIndent="0"
    />

    ------------------------------------------------------------

    I save the file and uploaded to master page gallery  and published the major vesrion but still no change with respect to navigation.

    Did i miss any steps?

    Is it ok or not ok to update the data of .master in 'notepad++' or 'visual studio' ?

    or anyother files i need to modify?

    Wednesday, October 23, 2019 5:28 AM
  • when i open the site in SharePoint designer i didnt see any master page option?

    ------------------------------------------------------------------------------------

    -------------------------------------------------------------------------------------

    After clicking 'How do i customize the site master page' i got the below error

    Wednesday, October 23, 2019 5:43 AM
  • Hi Rajesh,

    Please use site collection administrator to modify it.

    And only change MaximumDynamicDisplayLevels to 5, the StaticDisplayLevels set 2.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, October 23, 2019 7:27 AM
    Moderator