12/29/2010

SharePoint: Convert a Links list to a Dropdown list (updated!)

 

This is an updated version of an older blog article. The updates include support for both SharePoint 2007 and 2010 and for better multiple browser support.

Updated again to include a Content Query Web Part (CQWP) example.

 

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:

  1. Create your links list and add your links
  2. Add the link list’s web part to the page
  3. Add a Content Editor Web Part (CEWP) to the page just under the links list web part
  4. Modify the CEWP and set its title (or set its Chrome to none to hide the title)
  5. Click Source Editor and then copy and paste the HTML and JavaScript from below
  6. 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")
    The best way to confirm this name is to right-click the web part page and search for "summary=" and copy and paste the name
  7. Exit the edit mode and test it

 

The Code:

<!-- the dropdown list for the link items -->
<select name="JumpToList" id="JumpToList"
    onchange="javascript:JumpToUrl(JumpToList.options[JumpToList.selectedIndex].value)">
  <option>Jump to ...</option>
</select>

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 

var linksListSummaryName = "Links Use the … (your list summary name here!) …"

function JumpToUrl(url)
{
    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 == linksListSummaryName)
  {
    //
    LinkList = x[i];

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (LinkList)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("JumpToList");

  var links = LinkList.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {
    if (links[i].onfocus)
    {
      if (links[i].onfocus.toString().indexOf("OnLink(this)") > -1)
        { ToList.options[ToList.length] = new Option(links[i].innerHTML, links[i].href); }
    }
  }
}
else
{
  alert("Link list named '" + linksListSummaryName + "' not found")
}
</script>

 

Want to add a new “Add New Link” link?

Add the following just after the </select> tag in the code above (your the URL to your list!).

<br>
<a href="http://yourserver/sites/yoursite/Lists/Links/NewForm.aspx">Add new link</a>

 

Dropdown list for a Content Query Web Part.

While the approach is similar to a links list, the HTML generated by a CQWP is a bit different. Below is the code for a CQWP.

Steps:

  1. Create your CQWP
  2. Add the CQWP to the page
  3. Optional: Modify the CQWP and set it’s Chrome to none
  4. Add a Content Editor Web Part (CEWP) to the page just under the CQWP
  5. Modify the CEWP and set its title (or set its Chrome to none to hide the title)
  6. Click Source Editor and then copy and paste the HTML and JavaScript from below (note that there is a 2007 and a 2010 version)
  7. Edit the JavaScript to change the “linksListSummaryName = ” value to the name of your CQWP (view the source of the page and search for the web part’s name) 
  8. Exit the edit mode and test it

 

The Code – 2007 version:

<!-- the dropdown list for the link items -->
<select name="JumpToList" id="JumpToList"
    onchange="javascript:JumpToUrl(JumpToList.options[JumpToList.selectedIndex].value)">
  <option>Jump to ...</option>
</select>

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 
// for a CQWP


// copy the following from the "<td title="Content Query Web Part - ..."  line in the page's HTML
var linksListSummaryName = "Content Query Web Part - Use to display a dynamic view of content from your site on a web page"

function JumpToUrl(url)
{
    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].childNodes[0].childNodes[0].childNodes[0].title == linksListSummaryName)
  {
    LinkList = x[i].parentNode.parentNode.nextSibling;

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (LinkList)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("JumpToList");

  var links = LinkList.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {

    if (links[i].href.indexOf("CopyUtil.aspx")>0)
    {
      ToList.options[ToList.length] = new Option(links[i].innerHTML, links[i].href);
    }
  }
}
else
{
  alert("Link list named '" + linksListSummaryName + "' not found")
}
</script>

 

The Code – 2010 version:

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 
// for a CQWP


// copy the following from the "<td title="Content Query Web Part - ..."  line in the page's HTML
var linksListSummaryName = "Content Query - Displays a dynamic view of content from your site."

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

//code to hide the links list and populate the select list

//Find the CQEW and hide it
var x = document.getElementsByTagName("TD") // find all of the Tables 
var LinkList;
var i=0;
for ( i=0; i<x.length; i++ ) 
{
  if (x[i].title == linksListSummaryName)
  {
    LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling;

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (LinkList)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("JumpToList");

  var links = LinkList.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {

    if (links[i].href.indexOf("CopyUtil.aspx")>0)
    {
      ToList.options[ToList.length] = new Option(links[i].innerHTML, links[i].href);
    }
  }
}
else
{
  alert("Link list named '" + linksListSummaryName + "' not found")
}
</script>

.

89 comments:

Olly said...

Thanks for this Mike, it's fantastic. I'm trying (and failing) to add two or more links lists and dropdowns to a page - any ideas? I don't know java so have no idea how achievable this might be. I've given each list a unique name and amended the code accordingly. The list of links furthest up the page still works, but subsequent ones don't populate with links.

Any held greatly appreciated.

Thanks, Olly

Olly said...

Mike - I posted a comment an hour or so ago - I managed to find a solution to having two or more drop downs on a page - replacing JumpToURL and JumpToList in the code (2 instances of each) with e.g. JumpTo2ndList and JumpTo2ndURL. Seems to work ... ! Olly

ONEOFDWAGS said...

Mike,

I am wondering why the list will only pick up 20 of the links and put them in the dropdown. I have 22 links in my list, but the remaining two get left out. Is this a SP style thing?

~Alex

Mike Smith said...

ONEOFDWAGS,

Check the view being used by the web part and you probably find that it has an item limit of 20.

Edit the web part and click the modify link under view dropdown list.

Mike

Mark said...

Great job. Works great. Couple questions. 1. Will choices in drop down be security trimmed, ie if person doesnt have rights to view a list in drop down will they be able to see that link? 2 Is there anyway to change the default width of the dropdown box? Again, great job.

Mike Smith said...

Mark,

1. Will choices in drop down be security trimmed, ie if person doesnt have rights to view a list in drop down will they be able to see that link?

The JavaScript just reads from a web part, so yes the items in the list are security trimmed. The user will not see anything in the dropdown that they could not also see directly from the links list. But that's only true for the links list items. If you add a link to the list to some other site or list, the links list does not know about permissions to the link destination.


2 Is there anyway to change the default width of the dropdown box?

Sure. The <SELECT> tag is plain HTML can be styled using CSS.

Mike

Anonymous said...

This was a lifesaver- even a newbie like me was able to figure it out. BUT- I need to make the links open in new tabs/windows. Can you be a bit more specific about how to modify the code you provided to enable that behavior? Thanks again!

Mike Smith said...

To "open in new window" replace

location.href = url;

with

window.open(url,'mywindow','toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes')

Mike

Anonymous said...

Thanks!! You are teh awesome.

Anonymous said...

Excellent post, but I wonder how I can display the resulting page in the same page. Thanks

Mike Smith said...

Anonymous,

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

<iframe id="linkframe"></iframe>

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"

Mike

Anonymous said...

Thanks, works perfect

Anonymous said...

Hi Mike,

I've change the "location.href = url" to "document.getElementById('linkframe').src = url

and added the iframe just like you said. The iframe is working, but the script doesnt seem to work once I've added that line of code. Do you know why?

Thanks in advanced.

Anonymous said...

hi mike I did some more searching and used another method and it seems to work.

Window.frames[iframename].location=URL

Hope that helps. This works on SP2010

Mike Smith said...

Anonymous,

Interesting... I just set up the example in SP 2010 and it worked just fine. Which browser are you testing with? My test worked with FireFox, IE 7 and IE 8.

Mike

Anonymous said...

My department is using ie7

SharePoint Ranger said...

I like this but I can't get it to work :(. I named the 'Links' web Part "Helpful Links", still didn't work. I notice that if you use the 'Add Color, Borders and Fonts (http://techtrainingnotes.blogspot.com/2010/10/sharepoint-add-colors-borders-and-fonts.html) they don't work together. I lose the color on the 'Links'

Mike Smith said...

SharePoint Ranger,

> I named the 'Links' web Part "Helpful Links"

Take a look at "ID’ing your Web Part" here: http://techtrainingnotes.blogspot.com/2010/10/sharepoint-add-colors-borders-and-fonts.html

> they don't work together
The code above hides the Links list and therefore hides the colors. The dropdown is a normal HTML <SELECT> tag and can have it's own styles:

<select name="JumpToList" id="JumpToList" style="yourstyleshere" ...

SELECT is not styled consistently across all browsers. Do a web search on "HTML SELECT CSS".

Mike

meliskey said...

Mike, is there a way to make this work on a content query webpart tht is querying a link list? I need a links list limited by Audience and the content query was the only way I could find.

Mike Smith said...

meliskey,

Yes, but I don't have a sample for you. The basic steps would be the same: hide the CQWP and copy the data from the CQWP into the dropdown list.

Mike

meliskey said...

Mike, I am having a hard time identifing the CQWP. The "TABLE / summary" atribute is not available for a CQWP and I have not been able to find any unique identifier for the CQWP, so it keeps hiding all the webparts.

Mike Smith said...

meliskey,

I have added a sample using the CQWP to the article above.

Mike

meliskey said...

Mike, thank you for the CQWP code. unfortunatly it is still not working for me. I copied the code and modified the linksListSummaryName. I noticed a reference to CopyUtil.aspx could that be the problem? also I am on 2007.

Mike Smith said...

meliskey,

What is the query? What are you rolling up? documents? announcements?

Is there an error message? Or just nothing in the dropdown list?

Mike

meliskey said...

Mike, No error, just a blank drop down and the CQWP does not disapear. I am using a links list with Target Audiences. To get the Target Audiences to work and the links to show I had to use a CQWP and modify the CommonViewFields property and ItemStyle.xsl as shown http://www.sharepoint-tips.com/2007/01/teach-content-query-web-part-how-to.html. Then I have attempted to use your solution. It worked great on the OOB links list web part. I can send you the webparts and list if you would like.

Anonymous said...

Mike,
This is exactly what I have been looking for but I can not get it to work. I keep getting a "Link list named 'blah blah blah' not found" error. I did a summary search on my linklist source and the summary is correct. I have only changed the linksListSummaryName variable to == "ERPortalLinks" which is the name and summary name of my links list. Is there any other code I need to add to get this to work. What is the "getElementsByTagName("TABLE")? Does this need to be changed?

Mike Smith said...

Anonymous,

Did you place the Content Editor Web Part below the list web part?

Mike

Jon B said...

Thank you Mike, this is a great post - clearly written and easy to follow, however, I have a question... I have multiple (2 or 3) drop down boxes I wish to show side by side above a Document Library - they currently show in a column, 1 under the other - any thoughts on how I could achieve this 'side by side' affect in the same WebPart Zone? (due to various reasons, I am not permitted to edit page in SharePoint Designer).

Thanks for any advice.
Jon B

Mike Smith said...

Jon B,

Just put all three dropdown list (<select>) tags at the top, give each a unique name ("JumpToList1", "JumpToList2", etc) and add three copies of the JavaScript code, each customized to your list and dropdown names. (or better... put the code in a function and call it with two parameters, linksListSummaryName and jumpToListName)

Mike

SP_Go said...

Hi Mike, can we have a similar solution to have teh links on webpart page and tehn convert teh page to dropdown?

Mike Smith said...

SP_Go,

I'm not sure I understand your question. Tell me a bit more.

Mike

Giles said...

Hi Mike,

Excellent solution - was stuck until someone pointed me to this!

1 problem I am facing though, I want to place the same drop down linked to the same links list 5 times on the page at certain intervals, similar to another requirement posted earlier by Olly, the top web part will collect all the links (so 1 per web part) and the ones further down will not populate. Any clues or advice you can offer most appreciated!

Mike Smith said...

Giles,

Create multiple dropdown lists, each with its own ID (2, 3, etc)

<select name="JumpToList" id="JumpToList" ...

<select name="JumpToList2" id="JumpToList2" ...

<select name="JumpToList3" id="JumpToList3" ...


Create multiple variable for these lists:

var ToList = document.getElementById("JumpToList");

var ToList2 = document.getElementById("JumpToList2");

var ToList3 = document.getElementById("JumpToList3");


Then in the code duplicate the line that adds options to the dropdowns once for each dropdown:

ToList.options[ToList.length] = new Option(links[i].innerHTML, links[i].href);
ToList2.options[ToList.length] = new Option(links[i].innerHTML, links[i].href);
ToList3.options[ToList.length] = new Option(links[i].innerHTML, links[i].href);

etc...

Mike

Pacer said...

I love this - one question when a user picks the same option twice in a row without going to a different selection first (I know, I know), nothing happens. Is there a way in the javascript to set the link back to the Jump To... selection? My users are incapable of choosing something else or hitting the refresh button!

Mike Smith said...

Pacer,

As the code redirects them to another page, how are you users getting back to the page? Just the back button? If so, then JavaScript will not run on the return to the page.

So, let's try reseting it before the redriect by adding "JumpToList.selectedIndex = 0".


function JumpToUrl(url)
{
JumpToList.selectedIndex = 0
location.href = url;
}

Mike

Bob said...

Ok, getting this to work is driving me nuts, mostly because everyone else had absolutely no problem..

So it seems the code has changed and the directions are not correct.

I now see a line that says: var linksListSummaryName="Links Use the ... (your list summary name here!) ..." I'm guessing that I should only be replacing the "Links Use the ... (your list summary name here!)..." with my link list title.

so I did that but it does not work. I created a links list "formlinks" and placed it above the cewp. I then replaced the all the text between the quotes in the above statement with "FormLinks" but the script says it cant find it.

totally did not get the 'search on summary=' part of your directions. I went to the site pages library, right clicked on my page "home.aspx" but there is no search on the right click menu... totally lost me there

So I'm sure the solution is simple and once someone tells me, i'll turn a bit red...

please help

Mike Smith said...

Bob,

The most likely problem is getting to the correct web part name. If you are using 2010, it may be adding an extra space after the list name.

In any case, display the page with the links list web part. Use your browser's View Source option to display the HTML on the page and search for your links list name.

Go here (http://techtrainingnotes.blogspot.com/2010/10/sharepoint-add-colors-borders-and-fonts.html) to see an example of how to find the name/ID. Scroll down to "ID’ing your Web Part".

Mike

Bob said...

wow! I lost a little hair. I am using 2010. Put the space in after the list name and Wa-La! Thank you for both your help on this and for writing a very needed function!

-Bob

bsieloff said...

I'm using on 2010, and I have found that when I change something on the page that the link drop down list is on, the drop down list doubles...
ie: drop down list (reflecting link list)

red
blue
green

update page drop down doubles

red
blue
green
red
blue
green

I have to delete the CEWP and recreate with a differnt name for the drop down entries to go back to normal.

kind of a pain if I update something else on the page. Any ideas as why this would happen?

Mike Smith said...

Right after the line that retrieves the dropdow:

var ToList = document.getElementById("JumpToList");

Add this line:

ToList.options.length = 0;

Let me know if this does not work for you.

Mike

Anonymous said...

Thank you SO much!! Absolutely perfect!

Anonymous said...

Hi Mike,

in SP2010 I'm using the CQWP connected to a Link List approach.

With Item Style set to 'Title Only'
Fields to display set to:
Link: URL [Custom Columns];
Title: Notes;

The drop down fails to populate, but if I remove the URL [Custom Columns]; from the Link 'field to display' the drop down populates but does not contain the required link to be redirected to.

Any thoughts?

Much Appreciated

Mike Smith said...

Anonymous,

The article above is only for a links list. It was not designed for or tested against the data returned by a CQWP. As the HTML returned is different it would require some tweaking of the JavaScript code. I'll add it to my "to do" list to take a look, but it may take a while.

Mike

Tony said...

Hey Mike - the code can't get past if (links[i].href.indexOf("CopyUtil.aspx")>0). When I exclude that statement, it populates the list but includes spaces between each link and adds the 'Add a new link'. Any suggestions?

Mike Smith said...

Tony,

Are you working with a Links list or a Content Query Web Part list? The "CopyUtil.aspx" version of the code is only for the CQWP.

Mike

Unknown said...

This is some what along the lines I am looking for, I need to create a jump menu to a bunch of different web parts on the page. I am trying to use book marks to allow me to just to the top of each web part. But I am having issues in getting them to work. Any help would urgnently be appreicated. Oh and its for Sharepoint 2010

Mike Smith said...

Unknown,

Adding bookmarks could be done using Content Editor Web Parts (CEWP). Add one in front of the of the web parts you want to scroll to and edit in HTML mode to add the anchor tags <a name="Tasks"></a>

Then you could create the links list per above. But, it would be easier to just add a CEWP at the top of the page with a simple HTML dropdown list (<SELECT>) with the anchor link URLs.

Mike

Supermike said...

This provides the exact functionality I'm looking for. I also have a requirement to group the links (internal/external) with a separator between categories. Can this be done with the list or through the CQWP?

Juli said...

I am not seeing an 'Source Editor button' in the CEWP. I have tried putting the script in the only 2 available places but one is looking for a link and the other is just content.

Neither seems to work for me.

I am sure it is something simple that I am missing. Any help will be greatly appreciated.


SharePoint 2010

Mike Smith said...

Juli,

The 2010 CEWP does not have that button. See here for options:
http://techtrainingnotes.blogspot.com/2012/02/sharepoint-how-to-add-javascript-to.html

Mike

Juli said...

Ok, I got that far and I see that it has displayed the drop down now, but it is not populating it nor did it hide the links list. Is there only one place in the script that is necessary to change to my link list id?

Juli said...

Alternatively do you know of any way to take this links list and populate it as a dropdown in the global navigation bar?

Juli said...

I got it figured out and it is displaying correctly now. I am still interested to know however if this can somehow be added to the Global Navigation bar.

Juli said...

Ok, one other question. I didn't see where anyone else asked this. How do you cause the items in the dropdown list to display in alphabetical order rather than in ID create order?

Mike Smith said...

Juli,

> How do you cause the items in the dropdown list to display in alphabetical order

The dropdown is just being loaded from the links list web part. Edit the view on that web part to sort on any column. You might even add a column called "Sort Order" and enter numbers (1,2,3...) and sort the view on that column.

> I am still interested to know however if this can somehow be added to the Global Navigation bar.

Anything can be done with the right CSS and/or JavaScript. But...
Out of the box: no
Using the above code: no

In my book I have an example of adding a list of links as a dropdown, but that was for SP 2007. I could never get it to look just right in SP 2010.

You can turn on the publishing features for the site and then go to Site Actions, Site Settings, Navigation and hand enter items for a dropdown in the menu. But I don't know of any way, outside of custom C# code, to connect Navigation to a list.

Mike

Juli said...

I have sorted the view (default view) to display the items alphabetically but in the actual dropdown it does NOT display them alphabetically.

Infopath dropdowns do this also. You have to link to a specific view that is sorted alphabetically to show them in alpha order. It doesn't not work with the default view.

TMG said...

Hi Mike

SP2010 Enterprise Ed.

I added a simple Links list called BM. I then added this list BM as a webpart called BM.
Added CE WP.
Added your code.
Changed the line to:
var linksListSummaryName = "BM"
Saved.
I still get "Link list named 'BM' not found".
Any ideas what I might be doing wrong?

Brian

Mike Smith said...

TMG,

The name may include a dash, an extra space or the full description of the list.

The best way to confirm this name is to right-click the web part page, select View Source and search for "summary=" and copy and paste the name.

Mike

TMG said...

Fair play Mike - it was an extra space.

I did read the earlier comment re: extra spaces but it never triggered until I read it again this morning. The space does not appear anywhere else - just in the generated HTML (via View Source).

Thanks again for the code & the fix.

Brian
(Don't know why I am showing as 'TMG'!)

j4ym4n said...

I have been trying to get this to work and finally realized I was using the wrong web part. The "html form webpart" is the proper item. I however am now connected to the links list and the list disappears with nothing populating in the drop down...even the drop down is invisible, only shows the title bar.

Ideas?

Mike Smith said...

j4ym4n,

The fact that the list disappeared means that the JavaScript ran to at least the line with 'display="none"'. Two possibilities:

- You can configured the CEWP to be hidden

- There is a problem with the "<select" HTML.

Mike

Alessandro said...

Thanks for the great POST. I was able to make it works but, after I select an option from the drop down menu, the link is launched on a new page but the dropdown is not going back to the default value but seems frozen at the previously selected value. IS there a way to resolve this?
Thank a lot, Alessandro

DawnNix said...

Hi Mike,
This post has helped me so much. Thank you! I need to take this in a little different direction, create a dynamic drop down list from a custom list and when a value is selected from the drop down list, that value is used as the filter value for the other web parts on the page. I've been trying to play around with the code you provided but I have been unsuccessful. Right now, I am manually adding options to the drop down list but this is not scaleable ... I'd love to be able to have the drop down list populate dynamically. Any help would be greatly appreciated!
Dawn

Mike Smith said...

Dawn,

There are a number of ways to do what you want, most involving web services calls via JavaScript, but some just using SharePoint Designer and data bound controls. Take a look at what's been done with cascading dropdowns for ideas. Do a web search on "SharePoint cascading dropdown lists". Also look at reloading the page (link back to the same page) with an added query string. (http://techtrainingnotes.blogspot.com/2012/03/sharepoint-search-filter-or-sort-lists.html)

Mike

Bill Dewey said...

Mike, superb solution, wish I had found this years ago! I am using SP2010 and had the same issue described with the list items duplicating, so I added your fix:
ToList.options.length = 0;
This did wonders in removing the duplicate bits, but it also killed the initial "Jump To..." entry, which is OK. The problem is that the first entry in the list is no longer usable, other links are. For example, my list has a link to MSN and an internal page called Annual Schedule. Without this "fix" the list is:
Jump To ...
MSN
Annual Schedule

In this case selecting either MSN or Annual Schedule goes to the correct link. With the "Fix in Place" the dropdown only displays:
MSN
Annual Schedule

In this case MSN does nothing.

Thanks in advance, I will keep playing and will update if I find a solution.

Bill Dewey said...

Mike, I did find a "work around" to my issue, I just created a dummy item in the list, titled it "Go To ...." and then added a sort field. Works well, and very simple to do. Something I can easily train our users to do. Now off to see if I can add another column and make the "Open in New Window" optional by link.

Thanks again!

Steve Mena said...

HI Mike,

Great post, one question. Everytime I save the page, the list duplicates. In other words, I have 4 links in my dropdown. Then I edit the page (anywhere), and when I save, the dropdown shows 8 links (4 repeated). If I save again, the list shows 12 links, and so on.

Is there a line in the code I can change to stop it from duplicating the list?

Steve Mena said...

HI Mike,

Great post, one question. Everytime I save the page, the list duplicates. In other words, I have 4 links in my dropdown. Then I edit the page (anywhere), and when I save, the dropdown shows 8 links (4 repeated). If I save again, the list shows 12 links, and so on.

Is there a line in the code I can change to stop it from duplicating the list?

Mike Smith said...

Steve,

While your users would never see the extra items being added, you will while editing. In any case the following change is a good idea.

Just after this line:

var ToList = document.getElementById("JumpToList");

Add:

ToList.options.length = 0;

Mike

William said...

Dear Mike:

Thank you for this tip. I had been using it successfully for nearly a year. A few weeks ago my company migrated from SharePoint 2007 to 2010. Now I get the "Link list 'Foo' not found message Anonymous mentioned.

Yes, the CEWP is immediately below the link list. I re-created the CEWP but I got the same error dialogue box.

Also, I created an new link list and modified the CEWP script to refer to that list but no joy.

Our corporate Sharepoint support was kind enough to suppress the error dialogue box from appearing every time the web page was opened but they don't support "unofficial code."

I don't think the problem can be attributed to change to SharePoint 2010 but that's when it broke.

Any suggestions for troubleshoot will be greatly appreciated!

Cheers,
William

Mike Smith said...

William,

> A few weeks ago my company migrated from SharePoint 2007 to 2010.

It all depends on how they did the migration. The fact that you got the "list not found" means that the name of the list has changed.

In SharePoint 2007, the summary name is usually just the list’s name: "My Links List".

In SharePoint 2010, the summary name is usually the list’s name PLUS the list’s description. For example the default for Shared Documents is: "My Links List Here are links to vendors." (including the period). If you don't have a description you will probably find that the summary name includes an extra space at the end: "My Links List ".

To find the correct name use your browser’s View Source option to display the HTML of the page and search for “summary=”

Display the page with the links list web part, use the browser's View Source option and search for "summary=" and copy the name that's there. (there may be more than one "summary=" on the page.

Mike

William said...

Dear Mike,

Thank you so much for the help!

The problem was the trailing space. . .

Cheers,
William

Joanne said...

Hi Mike,

I got the drop down list to work... kind of.

I've created the CQWP and gotten it to connect to the CEWP. The problem I run into now is the with the CQWP. Under the presentation tab where it asks for the Links, if I use the URL[Custom Columns]; like it says to use, my links disappear completely from the drop box, but if I leave the links box blank, the names in the drop box show up but the links take me to the folder. What do I have to name the URL?

Thanks for your help in advance.

Joanne said...

Hi again Mike,

Never mind I figured it out! :o)

sandy said...

Hi Mike,

I am trying to use the link list and CEWP method for sharepoint 2007.And i created a link list and copied your code and used in CEWP and followed the same process as you said but still it is saying link list not found when iam trying to save the page.Can you tell me the problem where i might have done the mistake?

Thanks in advanced.

Mike Smith said...

Sandy,

The issue is almost always the wrong "summary" name. Display the page with the links list web part, use the browser's View Source option and search for "summary=" and copy the name that's there. (there may be more than one "summary=" on the page. Make sure copy the entire name, i.e. everthing between the quotes.

Mike

Anonymous said...

Hi Mike - I'm using the CEWB version in 2010 and it is working ok as a dropdown. But what is the format required of my links list? Is it a Custom List that uses a URL field? Is it a custom list that just lists the default title field and a cleartext field called URL? I just don't know what type of custom links list I need to create to get the values to properly launch as links in the pulldown.

--Brian

sandy said...

Hi Mike,
Now i got the drop down after doing some small changes.But now i am facing one more problem regarding reset process. I selected an option which navigated me to the page, then I choose back in the browser and it did not reset the value. I could not select it again to navigate to the same page.Could you please give me some solution regarding this.

Thanks in advanced.

Mike Smith said...

> "But what is the format required of my links list"

A "Links List" list! It's an out of the box list type that has the URL as the first column of the list.

Mike

Mike Smith said...

Sandy,

See if my response to Pacer (November 3, 2011) will work.

Mike

sandy said...

Hi Mike,
I tried that but it is not working to me.

Josh said...

Excited to find this - any chance the code will be updated to work with SP2013?

THANKS!!!
Josh

Mike Smith said...

Josh,

Yes, I'm slowly updating these "tricks" to 2013. 2013 changes both the HTML and how/when the lists are loaded, so changes will generally be needed.

Mike

Bart van D said...

Mike you're a genius man. Thanks for all your sharing with us!

I'm looking for a solution like DawnNix, a dynamic cascaded drop down menu where I can choose A, B based on A, C based on B, if necessary with a submit button. These choices based on existing SharePoint (MOSS 2007) lists.
For example a list Car Makes, list Models and list Engines. I already builded this with javascript but it doesn't work dynamically. Each time if there's a new car make or a new model if have to add a hyperlink row in the javascript manually to get it to work. If I forget to do this then the users just don't get the actual information.
I want to get this working automatically when adding new information to a list. So when I make a selection in drop down menu C I jump immidiately to the right page.

(Sorry for my bad English).

Tineke said...

Hi Mike,
This is a very handy post, thanks!
I am trying to convert a CQWP to a dropdown list in SharePoint 2013. As you mentioned in response to previous posts, the html for the CQWP in 2013 is different. Any chance you have updated scripts available for 2013?
Thanks!

Patrick Connor said...

I am still having problems having this render the drop down list properly - it shows with no entries.

What (and where) would specifically be changed if the URL list is named "testlist ". I have the appropriate CEWP and list webpart.

Mike Smith said...

Patrick,

The URL for your list and its name are not necessarily related. The value in the summary attribute may be the list name, possibly followed by a space and possibly followed by the text of the list's description. (depends on the version of SharePoint)

The best way to confirm this name is to right-click the web part page and search the HTML for "summary=" and copy and paste the name listed there.

"summary=" will only be found in list web parts and will not be found in other web parts such as the Content Query Web Part.

Mike

Alexandre Rousseau said...

Hi Mike,

Thanks for your time and your work, you rocks !!

I'm trying to do the same, but with a document library. Is it possible?

Alex.

Alexandre Rousseau said...

Hi Mike,

I did it with a document library, it works but with 2 problems...

1. It shows some html part code between the options in the dropdown menu (IMG title=....)
2. When a folder is in the menu, the url go to the same page

Have you got an idea so solve thoses problems? I'm so close to do it...

Thanks a lot.

Alex.

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.