Add Quick Launch Navigation Item In SharePoint 2016 And Office 365 Using JavaScript Object Model

SharePoint Quick Launch is one of the navigation facilities, which helps to quickly go to the most frequently used destinations. Quick Launch can contain the links to the lists, libraries and sub sites. Usually the quick launch appears to the left of the site page. We can add, remove and edit the links, present in this section. It is also called current navigation, as it is used to navigate between the elements of the current site. In order to customize the quick launch publishing, feature has to be enabled in the site.

site

Quick Launch can be configured by going to the site settings -> Navigation.

Navigation

In this article, we will see, how to add the quick launch navigation programmatically, using JavaScript Object Model.

Internal Implementation

  • Add the reference to jQuery file.
    1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
    2. <script language="javascript" type="text/javascript">  
  • Within Document ready function, call SP.SOD.executeFunc, so as to load the on demand script SP.js . Call the main starting point function say: addNavigation.
    1. SP.SOD.executeFunc('sp.js''SP.ClientContext', addNavigation);  
  • Instantiate the client context and get the Web instance.
    1. var clientContext = new SP.ClientContext();  
    2. var oWeb = clientContext.get_web();  
  • Create Quick Launch node object, using NavigationNodeCreationInformation Object.
    1. oQuickLaunchColl =oWeb.get_navigation().get_quickLaunch();   
    2.   
    3. //Create a navigation node using NavigationCreationInformation  
    4. var oNavigation = new SP.NavigationNodeCreationInformation();  
    5. oNavigation.set_title("Employee Master List");  
    6. oNavigation.set_url("/sites/playground/Lists/Employees/AllItems.aspx");  
    7. oQuickLaunchColl.add(oNavigation);  
  • Load the client context and execute the batch.
    1. clientContext.load(oQuickLaunchColl);  
    2. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  

Full Code

The full code to add quick launch navigation items is given below:

  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2. <script language="javascript" type="text/javascript">  
  3.     $(document).ready(function() {  
  4.         SP.SOD.executeFunc('sp.js''SP.ClientContext', addNavigation);  
  5.     });  
  6.     var oQuickLaunchColl;  
  7.   
  8.     function addNavigation() {  
  9.         //Get client context and web object  
  10.         var clientContext = new SP.ClientContext();  
  11.         var oWeb = clientContext.get_web();  
  12.         //Get quick launch object and add the navigation   
  13.         oQuickLaunchColl = oWeb.get_navigation().get_quickLaunch();  
  14.         //Create a navigation node using NavigationCreationInformation  
  15.         var oNavigation = new SP.NavigationNodeCreationInformation();  
  16.         oNavigation.set_title("Employee Master List");  
  17.         oNavigation.set_url("/sites/playground/Lists/Employees/AllItems.aspx");  
  18.         oQuickLaunchColl.add(oNavigation);  
  19.         //Load the client context and execute the batch  
  20.         clientContext.load(oQuickLaunchColl);  
  21.         clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
  22.     }  
  23.   
  24.     function QuerySuccess() {  
  25.         //Get the item count of navigation nodes and loop through it  
  26.         var itemCount = oQuickLaunchColl.get_count();  
  27.         console.log("The navigation node details are:");  
  28.         for (var i = 0; i < itemCount; i++) {  
  29.             var title = oQuickLaunchColl.get_item(i).get_title();  
  30.             console.log(title);  
  31.         }  
  32.     }  
  33.   
  34.     function QueryFailure(sender, args) {  
  35.         console.log('Request failed' + args.get_message());  
  36.     }  
  37. </script>  
Let’s see, how we can implement it in SharePoint. Save the scripts, shown above, to a text file and upload it to Site Assets library.

 

  • Go to the edit settings of SharePoint page and click Web part from Insert tab.

    Web part

  • Add Content Editor Web part.

    Web part

  • Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.

    editor

Output

Thus, the link to ‘Employee Master List’ has been added to the left navigation Quick Launch, using JavaScript Object Model.

Output

Summary

We have seen, how to add a quick launch navigation node item to SharePoint, using JavaScript object model. This has been tested in both SharePoint 2016 and Office 365.

Up Next
    Ebook Download
    View all
    Learn
    View all