5/15/2013

Adding a scrolling list of messages to SharePoint

 

Tested in SP2010, SP2013, Office 365 2013 and should work in SP2007.

I have not offered up a cool SharePoint trick for a while… so here's one that takes a list and turns it into a scrolling "marquee" list like this one:

Release B.2 of the CRM system has been released!

Bugs have been found in B.2, please revert to B.1!

The "Dealing with procrastination" meeting has been rescheduled

Get Started with Microsoft SharePoint Foundation!

This uses the <MARQUEE> tag that may not work in every browser. But according to this page it works in at least these browsers: Chrome 1+, Firefox 7+, Internet Explorer 2, Opera 6+ and Safari 1+.

The code to do this was copied from one of my older tricks "SharePoint: Convert a Links list to a Dropdown list" with only two updates: change the dropdown list to a MARQUEE and to delay load the code so it will also work in SharePoint 2013.

The example below uses an Announcements list, but should work with any list as long as the view displays the "Title (linked to item with edit menu)" column.

How to get the ID of the web part…

The web part's ID has a name something like WebPartWPQ3. To find it:

  1. Use the browser's View, View Source or View Page Source option to display the HTML of the page
  2. Search for a slash followed by the name of the web part:  "/Announcements"
  3. Either read down from what you found looking for something like 'id="WebPartWPQ3"' (the number may be different)  Note: you are not looking for WebPartTitleWPQ3 or other similar names!
  4. Copy everything inside of the quotes, including any extra spaces or periods! Note that 2010 will include the list's name and the list's description while 2007 will only have the list's name.
      summary="Announcements Use this list to track upcoming events, status updates or other team news."

Steps:

  1. Create your Announcements list and add your announcements
  2. Add the announcement list’s web part to the page
  3. Find the name of the web part (see "How to get the ID of the web part" above)
  4. Create a Notepad file:
    1. Copy and paste the JavaScript code from below
    2. Edit the JavaScript to change the line with var LinkList = document.getElementById("WebPartWPQ5") and change "WebPartWPQ5" to your web part name found in step 3 above
    3. Customize the <marquee> tag to set any desired options (see: http://msdn.microsoft.com/en-us/library/aa259539(v=VS.60).aspx)
  5. Upload the Notepad file to a library ("Site Assets" is a good choice)
  6. Right-click the newly uploaded file and select Copy Shortcut (to get the URL to the file)
  7. Add a Content Editor Web Part (CEWP) to the page with the announcements web part, just under the announcements web part
  8. Modify the CEWP and
    1. set its title to whatever you like ("Site News!") (or set its Chrome to none to hide the title)
    2. paste the URL you copied in step 6 into the Content List box
    3. Click OK
  9. Save the page and test it!

Notes:

  • You can customize the <marquee> tag by changing its attributes or wrap it other HTML such as a DIV with a border or background.
  • <marquee> may not work in every browser, but will fall back to list a list of links if it is not supported.
  • There are four lines that start with "MyMarquee.innerHTML", but only one of them is not commented out ("//"). You can uncomment any one of these:
    • text only
    • text with hyperlinks
    • text with hyperlinks that open in a new window
    • text with hyperlinks that open in a SP 2010 style dialog box

 

The Code:

<!-- the MARQUEE tag for the items -->
<!-- customize as needed! –>
<marquee id="TTN_marquee" direction="up" height=48 scrollamount="1"></marquee>


<script type="text/javascript">
// CEWP trick from techtrainingnotes.blogspot.com! 
// http://techtrainingnotes.blogspot.com/2013/05/adding-scrolling-list-of-messages-to.html

// Change the web part name here!!! 
var TTNLinkListName = "WebPartWPQ3";



function TTNgetSPversion()
{  // returns 12 for 2007, 14 for 2010 and 15 for 2013
  var SPversion = "12"; 
  try { SPversion = SP.ClientSchemaVersions.currentVersion.substring(0,2) } 
  catch (e) {}
  return SPversion;
}

function TTNinEditMode()
{
    var editmode="";
    // test for wiki page mode
    try { editmode = document.getElementById("_wikiPageMode").value } 
    catch (e) {}
    if (editmode=="")
    {
      // test for web part page mode
      try { editmode=document.getElementById("MSOSPWebPartManager_DisplayModeName").value } 
      catch (e) {}
    }
    if (editmode=="Edit" || editmode=="Design")
      return true;
    else
      return false;
}

function TTNlist2marquee()
{
  var TTNLinkList = document.getElementById(TTNLinkListName);
  var spVersion = TTNgetSPversion();
  var editmode = TTNinEditMode();

  // hide the list, but only if not in edit mode
  if (TTNLinkList)
  {

    // are we in edit mode?
    var displaymode = "";
    if ( !editmode )
    {
       displaymode = "none";
    }

    // hide the list web part (based on SP version)
    if ( spVersion = 12 ) 
    {
      // 2007 code here
      TTNLinkList.parentNode.parentNode.parentNode.style.display=displaymode;
    }
    else
    {
      // 2010 and 2013 code here
      TTNLinkList.style.display=displaymode;
    }  

    
    //Copy all of the links from the list to the MARQUEE
    var MyMarquee = document.getElementById("TTN_marquee");

    var links = TTNLinkList.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)
          { 
            // text only version of the marquee (no links)
            //MyMarquee.innerHTML += links[i].innerHTML + "<br>"; 

            // version with hyperlinks
            MyMarquee.innerHTML += "<a href='" + links[i].href + "'>" + links[i].innerHTML + "</a><br><br>";

            // open the link in a new window
            //MyMarquee.innerHTML += "<a href='" + links[i].href + "' target='newwin'>" + links[i].innerHTML + "</a><br><br>";

            // open the link in a SP 2010 dialog box
            //MyMarquee.innerHTML += "<a href='JavaScript:var options=SP.UI.$create_DialogOptions();options.url=\"" + links[i].href + "&IsDlg=1\";options.height = 400;void(SP.UI.ModalDialog.showModalDialog(options))'>" + links[i].innerHTML + "</a><br><br>";

          }
      }
    }
  }
  else
  {
    alert("Marquee list named '" + TTNLinkListName + "' not found");
  }

}

try {
  // for 2010 and 2013
  ExecuteOrDelayUntilScriptLoaded( TTNlist2marquee, "sp.js" );
}
catch (e) {
  // for 2007
  _spBodyOnLoadFunctionNames.push('TTNlist2marquee');
}

</script>
 
 
.

27 comments:

LA said...

Hello, I am trying to implement this code. The word 'announcements' is not found in the code to replace.

Mike Smith said...

LA,

Thanks for the heads up. The steps have been updated.

Mike

LA said...

Mike,

Thanks for the rapid response. The list is not scrolling yet and IE is giving me an error that linklistsummaryname is undefined.

Thank you.

Mike Smith said...

LA,

What kind of list web part are you working with? Did you find the web part ID? It should look something like WebPartWPQ5.

Which version of SharePoint are you using?

Mike

LA said...

Mike,

I am using 2010. I did find the part which is WebPartWPQ2.

The type of list is an announcements list as I am recreatting your solution on the site before adjusting it for the list I want to use.

Thank you,

LA

scott deel said...

Mike,

I am trying to implement this on SP2013. I'm not getting any errors but no returns on the marquee. It's just blank and I have some test items in a standard announcements list and using a CQWP on another page to display the list.

Mike Smith said...

LA and Scott,

I have updated the script. Please try it and let me know if you have problems. (There were some issues with a single script for three versions of SharePoint.)

Mike

scott deel said...

I am still unable to get any returns plus this line commented out the entire script until I realized the error:

If I were to hardcode just for SP2013 what would I need to remove? It almost seems like it is hiding the marquee for some reason. I can see the title of the CEWP and the CQWP for the List disappears so it's semi working I think, just not displaying.

Mike Smith said...

Scott,

I missed that you are using the CQWP. It generates different HTML than then normal list web parts. I'll check to see what has to be changed for the CQWP to work.

Mike

Ben Oster said...

This marquee is great, thanks! I did have one question though, I've decided why have one when two could be twice as great! Whenever I add the second marquee either they both stop hiding their lists or the first marquee scrolls the second marquee's list. I'm using the appropriate webpart name for each. Thoughts?

Mike Smith said...

Ben,

Each marquee will need its own ID and you will need to include the JavaScript twice each with their own list and marquee IDs.

Mike

Ben Oster said...

Thanks Mike, but even after renaming the Marquee's and making sure that they are referencing the correct WebPart they are still only scrolling one of the two lists? I know that I'm missing something in the naming schema, but if I change the Marquee name and everywhere it appears that should work correct?

Ben

Annalisa said...

Hello Mike, great post!I think I have a problem as the webpart is not working. I see only the Announcement webpart and below the CEWP title with a blank body.
Morever when I add the TXT URL and I go for "Test the link" it gives an error with line 108 _spBodyOnLoadFunctionNames.push('TTNlist2marquee')undefined

Rebecca Nevin said...

Hi Mike,

I am trying to replicate your instruction in SP2013. My id is WebPartWPQ4. Everything goes well until I try to save the link to the .txt in the CEWP. It freezes my content on the whole page and does not show any marquee. I cannot even edit the other content and have to delete the entire page. Two observations: A) when I try to open the txt. file with the script after I've uploaded it, it displays as blank. I have to download it to see the contents. B) Step 4 in how to find the ID mentions copying the text within the quotes after summary, but then you never say where to use that information. Any help would be appreciated.

Anonymous said...

What should the extension of the file be?

Mike Smith said...


Anonymous,

Anything you like... .txt would work, but I usually name it .html so it is easy to open in SharePoint Designer.

Mike

Asaf said...

Hey Mike,
I have the same problem Rebecca is having.
When I try to apply/test link or clicking OK after putting the link to the txt file in the CEWP edit menu, the whole page freezes and I can't even edit the page again (I've found some workarounds to revert it though).
Anyway this is really weird as it seems to work for some people.
Any idea?

Mike Smith said...

Rebecca and Asaf,

The "summary" name goes here: var TTNLinkListName = "WebPartWPQ3";

If you have issues after saving your changes, just edit the Notepad file and delete all of the contents and save it back to the library. (I.e., no JavaScript to cause a problem.) You can then try again to debug the issue.

Most likely, there is an error in the JavaScript, and once there is an error no other JavaScript will run on the page. Check for mismatched quotes, brackets, etc.

One quick test for JS errors is to add an alert("script loaded") at the end of the script. (Just before the </script>)

Anonymous said...

Hello,

had the same problem as Rebecca and Asaf

Delete:



From the script, and it will probably work.

Question:
I cant get "Custom List" to work with it. Any ideas?

Sebastian Anderson said...

Hello Mike,

I have a question regarding what is beeing displayed in the list when scrolling
I can only get the "title" of the list to be displayed in the scrolling list.
Is there any possibility to get the body of the list item displayed instead or also?

Regards
Sebastian

Mike Smith said...

Sebastian,

Not with just a quick edit, but everything is possible with JavaScript! The example above is easy as it just finds all of the "A" tags (the title links).

Let me think about it...

Mike

Mike Smith said...


Question:
I cant get "Custom List" to work with it. Any ideas?

It should work as long as the view used in the list web part displays "Title (linked to item with edit menu)" or "YourColumnName (linked to item with edit menu)".

Mike

SamK said...

Hi Mike,

I used your solution to create a Links dropdown and its work perfect..thanks! and now I want to add the scrolling Marquee solution on the same page. However, each time I tried to add the new code, it will delete my dropdown webpart. Is possible to use booth solutions on the same page? if yes what I am doing wrong? The Dropdown works fine by itself except when I added "ToList.options.length = 0;" to eliminate the Links duplication problem on page edit.

Mike Smith said...

SamK,

At first glance, I don't see any conflicts between the two code samples. Do watch out for web part names. They change as you add new web parts. I.e. "WebPartWPQ5" could get changed to "WebPartWPQ6".

Mike

SamK said...

Hey Mike, I forgot to mention this error message that I am getting when I paste the .txt file url on the CEWP Content Link: "Link list named'Links Use the ....(your list summary name here!)...'not found

I think LA was referring to the same error that I am getting. Or is error referring to the dropdown script which was for Links? Note: I have the dropdown solution on the same page.

oranges said...

I also got the same error as Rebecca, Asaf, and anonymous. It appears that the closing -> comment early in the script does not work, and there is a hidden character there preventing a correction. After deleting that entire line, I got the script to run.

However, once it reaches TTNLinkList.getElementsByTagName("A"), it fails to return any items and length is zero, even though there are A tags in the list.

Anonymous said...

@oranges
I had the same problem, it's related to the sequence / speed, the page is loaded. It could happen that the Java script is loaded before the list it gets its data from is there. I asked a programmer and he simply added a timeout to the ExecuteOrDelayUntilScriptLoaded line:
// for 2010 and 2013
ExecuteOrDelayUntilScriptLoaded( function() { setTimeout(TTNlist2marquee, 250); }, "sp.js" );
After this, the list is displayed in our system (SP 2013).
Hope, this helps.

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.