Creating a Drop Down Navigation Menu in SharePoint Using JavaScript

Slalom Consulting—Dennis Jackson

Dennis Jackson is a Slalom Consultant and Architect in our Dallas Portals & Collaboration Practice. He has over 15 years’ experience using databases and the web creating corporate intranets, call center applications, content management platforms, e-commerce, and self-service sites for Fortune 500 clients.

The Case
The built in navigation for SharePoint in general can take some getting used to. In 2010 it is much better, but there are some occasions where a client may want something that is different than the way that SharePoint wants to do it. In this case the client was asking for a drop down menu where a user could pick from “any of the team team sites” and “just go there”.

And if you were in a team site, then list the other ones.

But we have a preference in our practice for using out-of-the-box SharePoint first, and avoiding customizations if possible. So the approach that we ended up going with was client side JavaScript (JS) using the content editor web part to host the script.

The Plan
There are a few main parts of the JS that needed to be ironed out.

  • First, communicating with SharePoint to get a list of all the webs that were under this site.
  • Second, iterating over the results and appending them to a select drop down box with the needed data and labels.
  • Third, recognizing the dropdown changes and routing the user appropriately.

Part 1: communicating with SharePoint to get a list of all the webs that were under this site.
For the purpose of this, we are going to assume all the sites we are interested in a subwebs under this site “/collaboration/KeyWordsDemo” and the home navigation needs to go back to there.

The first thing we need to do is get the context we want, grab the sp.web that represents it, and then use that to get a list of the subsites.

We create an async call, and add handlers for success and failure responses.

function RetriveSites()

                {

                currentcontext = new SP.ClientContext(‘/collaboration/KeyWordsDemo’);   

/* to get the current context use this instead -à.get_current();*/ 

 /*more info http://msdn.microsoft.com/en-us/library/ee658863.aspx*/

                currentweb = currentcontext.get_web();

                this.subsites = currentweb.get_webs();

                currentcontext.load(this.subsites);

                currentcontext.executeQueryAsync(

                                Function.createDelegate(this, this.ExecuteOnSuccess),

                                Function.createDelegate(this, this.ExecuteOnFailure));

                }

 

}

Additionally, we need to wait to ensure that the sp.js file has finished loading before trying this, otherwise we can get unexpected results and errors.

ExecuteOrDelayUntilScriptLoaded(RetriveSites,’sp.js’);

Part 2: iterating over the results and appending them to a select drop down box with the needed data and labels.
Setting up the HTML is the first thing we need to add to the content editor web part. We create the base drop down and put in the default instruction entry and home page link, we also put in a place holder for the eventual navigation handler called navNow():

<select id=”teamsiteSelect” onchange=”navNow();”>

                <option value=”#”>Select Team Site…</option>

                <option value=”/collaboration/KeyWordsDemo”>Home</option>

</select>

From there we put in the handler for the successful query of the webs, you will notice we are using some straight forward JQuery to find and append the option to the drop down. We are putting the site title as the text label for each option, and storing the relative server URL as the value for the option:

function ExecuteOnSuccess(sender, args) {

                var subs =”;

                var Siteenum = this.subsites.getEnumerator();

                while (Siteenum.moveNext())

                                {

                                var Site = Siteenum.get_current();

                                $(‘#teamsiteSelect’).append( $(‘<option></option>’).val(Site.get_serverRelativeUrl).html(Site.get_title));

                                }

 

                }

We also have a stub of an error handler, which you can flesh out as you need.

function ExecuteOnFailure(sender, args) {

                //alert(“error”);

}

Part 3: recognizing the dropdown changes and routing the user appropriately.
At this point we should have the script that will wait on sp.js to load, call back to the parent site, get a list of sub webs and populate a drop down with them.

We have the onchange event looking for a navNow method. So let’s create that.

function navNow()

                {                                                                                                                               

                destination=$(‘#teamsiteSelect’).val();

                window.location.href = destination;

                }

Again we make use of a nice Jquery feature to make this easier—.val() which makes pulling out the relative server URL a pretty trivial line of code.

Once we have that we just do a standard location.href set and send the user to the new site.

Part 4: Adding it to SharePoint
Now go to the page you want to add this drop down, add a content editor webpart, and paste in your HTML and JS.

Make sure you have JQuery on your site and that it is either called in the CEWP or in the page already. Same thing for the sp.js file.

You should now be able to see all the sites that are there, and quickly navigate to them by selecting them from a dropdown.

Have fun.

One Response to Creating a Drop Down Navigation Menu in SharePoint Using JavaScript

  1. The post posted was really informative and helpful.
    You folks are doing a fantastic job. Keep going.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 129 other followers

%d bloggers like this: