Add, Retrieve And Remove The Navigation Node Using JSOM

In this blog, here I have discussed about how to edit and delete the navigation node using JSOM. Here also, I have provided the code through which we can manipulate the navigation link, also discussed the 3 buttons and their corresponding functions.

Introduction

 

Navigation Bar provides us with  the infrastructure to add different navigation link options in a site. We can provide the navigation links within "Top Navigation" and "Quick Launch Navigation".

 

Here, I am providing the code through which we can manipulate the navigation links both in Top navigation & Quick Launch navigation. I have added two navigation nodes; i.e., TeamSiteNavigation,TopNavigation.

 

I have used 3 buttons and their corresponding functions. Here, I am sharing the functionalities and their respective functions below.

 

For add="Add Navigation"(Function Name->addNavNode() )->

 

First, I have got the current context and web. Then I got the navigation collection of top navigation Bar. You can also get the Quick Launch by using "get_quickLaunch();"

 

Then I set properties for a new navigation node & created node as the last node in the collection.

 

For retrieve="Show Navigations Names"(Function Name->checkNavNames())->

 

Here I am retrieving the navigation collection of top navigation.

 

For remove="Remove Navigation"(FunctionName->removeNavNode())->

 

Here I am removing the navigation from the navigation collection, which I have provided in the text box.

< script type = "text/javascript"
language = "javascript" >
    var navNodes = [{
        Name: "TeamSiteNavigation",
        url: "/sites/TeamSite",
        fromExternal: false
    }, {
        Name: "TopNavigation",
        url: "http://www.google.com",
        fromExternal: true
    }];
var oNavNodeColl = null;
var nodeCreationInfo = null;

function addNavNode() {
    var ctx = new SP.ClientContext.get_current();
    if (ctx != undefined && ctx != null) {
        var oWeb = ctx.get_web();
        this.oNavNodeColl = oWeb.get_navigation().get_topNavigationBar();
        for (var i = 0; i < navNodes.length; i++) {
            var navObj = navNodes[i];
            var nodeTitle = navObj.Name;
            var navNodeUrl = navObj.url;
            var navFromExternal = navObj.fromExternal;
            this.nodeCreationInfo = new SP.NavigationNodeCreationInformation();
            nodeCreationInfo.set_title(nodeTitle);
            nodeCreationInfo.set_url(navNodeUrl);
            nodeCreationInfo.set_isExternal(navFromExternal);
            nodeCreationInfo.set_asLastNode(true);
            this.oNavNodeColl.add(nodeCreationInfo);
        }
        ctx.load(this.oNavNodeColl);
        ctx.executeQueryAsync(function() {
            alert("successfully added")
        }, function(sender, args) {
            alert('Request failed. ' + args.get_messege() + '\n' + args.get_stackTrace());
        });
    }
}

function checkNavNames() {
    var ctx = SP.ClientContext.get_current();
    var oWeb = ctx.get_web();
    var oNavNodeColl = oWeb.get_navigation();
    var nodeColl = oNavNodeColl.get_topNavigationBar();
    ctx.load(oNavNodeColl);
    ctx.load(nodeColl, 'Include(Title,Children.Include(Title,Children))');
    ctx.executeQueryAsync(function() {
        var navNodeEnumerator = nodeColl.getEnumerator();
        var nodeNames = "";
        while (navNodeEnumerator.moveNext()) {
            var oNavNode = navNodeEnumerator.get_current();
            nodeNames = nodeNames + '\n' + oNavNode.get_title();
        }
        alert(nodeNames);
    }, function(sender, args) {
        alert('Request failed. ' + args.get_messege() + '\n' + args.get_stackTrace());
    });
}

function removeNavNode() {
    var navName = document.getElementById("Textbox").value;
    var ctx = SP.ClientContext.get_current();
    var oWeb = ctx.get_web();
    var oNavNodeColl = oWeb.get_navigation();
    var nodeColl = oNavNodeColl.get_topNavigationBar();
    ctx.load(oNavNodeColl);
    ctx.load(nodeColl, 'Include(Title,Children.Include(Title,Children))');
    ctx.executeQueryAsync(function() {
        var navNodeEnumerator = nodeColl.getEnumerator();
        var nodeNames = "";
        while (navNodeEnumerator.moveNext()) {
            var oNavNode = navNodeEnumerator.get_current();
            nodeNames = oNavNode.get_title();
            if (nodeNames == navName) {
                oNavNode.deleteObject();
                ctx.executeQueryAsync(function() {
                    alert("successfully deleted");
                }, function(sender, args) {
                    alert('Request failed. ' + args.get_messege() + '\n' + args.get_stackTrace());
                });
            }
        }
    }, function(sender, args) {
        alert('Request failed. ' + args.get_messege() + '\n' + args.get_stackTrace());
    });
} < /script>
< input id = "addButton"
    type = "button"
    value = "Add Navigation"
    onclick = "addNavNode()" / >< br / >< div style = "marginTop:20px;" > & nbsp < /div>< input id = "checkButton"
    type = "button"
    value = "Show Navigations Names"
    onclick = "checkNavNames()" / >< br / >< div style = "marginTop:20px;" > & nbsp < /div>< label > Enter navigation name to delete < /label>< input id = "Textbox"
    type = "text" / >< input id = "removeButton"
    type = "button"
    value = "Remove Navigation"
onclick = "removeNavNode()" >

Follow the below instructions and refer to the corresponding image to perform the Operation,

 

Click on Add Navigation,

 

 

 

After adding the node,

 

 

Click on Show Navigations Names,

 

 

Now we can check Navigation name in the alertbox,

 

 

Give the navigation node which you want to delete.

 

 

I've successfully deleted the navigation node.