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?

  

 

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

  

                  

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>

.