ADD, RETRIEVE & REMOVE THE NAVIGATION NODE USING JSOM

Introduction:

 Navigation Bar provides us 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,

1.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.

2.For retrieve=”Show Navigations Names”(Function Name->checkNavNames())->

Here I am retrieving the navigation collection of Top navigation.

3.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 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.

Successfully Deleted the navigation node.

Key Words:

1. Get, Add & Delete navigation of SharePoint online using JSOM.
2. Add, Get and remove navigation with JSOM
3. using jsom Add,Get and remove navigation node of sharepoint online