7/17/2009

SharePoint: Convert a Links list to a Dropdown list

 

This article has been updated to include support for both SharePoint 2007 and 2010 and for better multiple browser support.  Click HERE for the updated version.

 

Problem: There is never enough room on your SharePoint home page. So what do you do if you have a long list of vendor links you would like to display on the home page. You would usually use a Links list and add a Links list web part. But it takes up too much space. How about a simple dropdown list?

     image

Solution: Yet another Content Editor Web Part (CEWP) trick!  A CEWP and some JavaScript…

   image

                                  image 

Steps:

  • Create your links list and add your links
  • Add the link list’s web part to the page
  • Add a Content Editor Web Part (CEWP) to the page just under the links list web part
  • Modify the CEWP and set a title then click Source Editor
  • Copy and paste the HTML and JavaScript below
  • Edit the JavaScript to change the word “Links” to the name of your links list web part (title of the web part, not the title of the actual list, although they may be the same)
      if (x(i).summary=="Links")     to
      if (x(i).summary=="Your Links List Title")
  • Exit the edit mode and see if it works

The HTML and JavaScript for the CEWP:

<select name="JumpToList" onchange="javascript:JumpToUrl(this(this.selectedIndex).value)"> <option>Jump to ...</option> </select> <script> // CEWP trick from techtrainingnotes.blogspot.com!

function JumpToUrl(url) { document.location.href = url } //code to hide the links list and populate the select list //Find the link list and hide it var x = document.getElementsByTagName("TABLE") // find all of the Tables var LinkList var i=0; for (i=0;i<x.length;i++) { if (x(i).summary=="Links") { // LinkList = x(i) //hide the links list web part (tables in tables in tables ...) x(i).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none" } } //Copy all of the links from the link list to the select list var ToList = document.all("JumpToList") var links = LinkList.getElementsByTagName("A") // find all of the for (i=0;i<links.length;i++) { ToList.options[ToList.length] = new Option(links(i).innerHTML, links(i).href); } </script>

 

 

.

18 comments:

Anonymous said...

Hi

I m facing problem for using this method . I not able to see anything in dropdown list ..

where all i need to change

Narsinh

Mike Smith said...

Narsinh,

Make sure you modified the line with your web part's name:

if (x(i).summary=="Links")

If you want to see if the script is running add an alert, something like alert("success"), just before the end script tab (/script).

SandyU said...

Very slick, thanks!

Anonymous said...

Hi. What version(s) of SP does this work with?

Mike Smith said...

> Hi. What version(s) of SP does this work with?

2007, both WSS and MOSS

Mike

BuzzKill said...

How would you edit this to launch the links with target=_blank? Love this BTW. What a HUGE space saver and makes things way more organized.

brynirwin said...

I was having problems getting the dropdown to populate from the list, so I double checked the javascript and found that when I pasted the code from this page, the MOSS Source Editor had stripped out all the fomatting, so the "//comments" were breaking all the lines within the function.

Solution: Removed all the comments and all worked exactly as it was supposed to - thought I'd share for anyone else having problems getting it to work.

Sjlomo said...

Hello Mike.
What an improvement! It really looks so much better.
But (there is always a but);
It only shows the links that are displayed on the frontpage, and does not allow you to either see more links or add new ones.

Is there a solution for this?

Thanks

Mike Smith said...

Sjlomo,

> It only shows the links that are displayed on the frontpage, and does not allow you to either see more links or add new ones. Is there a solution for this?

This is just updating the web part for the Links list, so you can still do all of your editing in the Links list itself (click View All Site Content, then the Links list).

You can also just add a direct link to the new item page. It would look something like this:

http://yourserver/sites/yoursite/Lists/Links/NewForm.aspx

Or as HTML (replace the square brackets with angle brackets):

[a href="http://yourserver/sites/yoursite/Lists/Links/NewForm.aspx"]Add new link[/a]

Mike

Unknown said...

This is AWESOME - clears up lots of space for us! Thanks for sharing this tip!

Anonymous said...

Hi

I really found this useful but would like to know how you can change it so that the links open in a different webpart.

Regards
Chris

Mike Smith said...

Chris,

Add a Content Editor Web Part and inside of that add an IFRAME tag and give it an ID. (i.e. ID="linkframe")

Set the height, width and other attributes of the IFRAME as needed.

In the JavaScript code change the line "document.location.href = url" to "document.getElementById('linkframe').src = url"

That's all!

Mike

Anonymous said...

Thank you so much
It works brilliantly!

Chris

Anonymous said...

Hi -

I got it to work without a problem on the first list. On all remaining web parts (attached to different link lists) I get "Please wait while scripts are loaded..." and the other drop downs don't display the links. The link list web part isn't showing, it just isn't pulling them. Any suggestions? It appears it should work multiple times on the same page, correct?

Thanks!!

Mike Smith said...

Anonymous,

Do you want each web part to have it's own drop down list? If so, each will need a uniquely named drop down.

I.e.
<select name="JumpToList1"

<select name="JumpToList2"

<select name="JumpToList3"

The JavaScript will need to be updated to match:

var ToList = document.all("JumpToList1")

var ToList = document.all("JumpToList2")

var ToList = document.all("JumpToList3")

And, either you will only want one copy of the JumpToUrl routine:

function JumpToUrl(url)
{
document.location.href = url
}

or, you will need a unique JumpToUrl for each list. (I would go with just one.)

Mike

Anonymous said...

THANKS MIKE!!! Works great with different drop downs for different web parts. Naturally, now that I have it working the user wants something different but such is life. Thanks so much for your help! I am sure I will use this again! Best, Karen (Anonymous)

Anonymous said...

Hi Mike

I'm using a production to live environment and on live we're getting an access denied error on the links list. Do you know what could be causing this? I have approval turned on but the items are published.

Thank you for posting this. I know it was ages ago but it's just what I needed!

Cheers,
Sophie

Mike Smith said...

Sophie,

Nothing in the code is security sensitive. Where do your links point? Are they pointing back to the dev site? Do the links work when displayed just as a links list web part?

Mike

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.