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.



Quick Launch can be configured by going to the site settings -> 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.
  

  <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <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.
  

  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', addNavigation);

• Instantiate the client context and get the Web instance.
  

  var clientContext = new SP.ClientContext();
  var oWeb = clientContext.get_web();

• Create Quick Launch node object, using NavigationNodeCreationInformation Object.
  

  oQuickLaunchColl =oWeb.get_navigation().get_quickLaunch();
  
  //Create a navigation node using NavigationCreationInformation
  var oNavigation = new SP.NavigationNodeCreationInformation();
  oNavigation.set_title("Employee Master List");
  oNavigation.set_url("/sites/playground/Lists/Employees/AllItems.aspx");
  oQuickLaunchColl.add(oNavigation);

• Load the client context and execute the batch.
  

  clientContext.load(oQuickLaunchColl);
  clientContext.executeQueryAsync(QuerySuccess, QueryFailure);

Full Code

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

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', addNavigation);
    });
    var oQuickLaunchColl;

    function addNavigation() {
        //Get client context and web object
        var clientContext = new SP.ClientContext();
        var oWeb = clientContext.get_web();
        //Get quick launch object and add the navigation
        oQuickLaunchColl = oWeb.get_navigation().get_quickLaunch();
        //Create a navigation node using NavigationCreationInformation
        var oNavigation = new SP.NavigationNodeCreationInformation();
        oNavigation.set_title("Employee Master List");
        oNavigation.set_url("/sites/playground/Lists/Employees/AllItems.aspx");
        oQuickLaunchColl.add(oNavigation);
        //Load the client context and execute the batch
        clientContext.load(oQuickLaunchColl);
        clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
    }

    function QuerySuccess() {
        //Get the item count of navigation nodes and loop through it
        var itemCount = oQuickLaunchColl.get_count();
        console.log("The navigation node details are:");
        for (var i = 0; i < itemCount; i++) {
            var title = oQuickLaunchColl.get_item(i).get_title();
            console.log(title);
        }
    }

    function QueryFailure(sender, args) {
        console.log('Request failed' + args.get_message());
    }
</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.
  
  
  
  
• Add Content Editor Web part.
  
  
  
  
• Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.
  
  
  

Output

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



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.