There are a few web parts out there that will automatically scroll through your lists. These are pretty and work well. They will slowly scroll through your lists like a news ticker. My issue with these is that my primary customers are police officers, and very rarely do they want to slowly read through a list. Most of my police department customers' roll call lists have dozens of items, all active and all urgent (it being roll call and all). They didn't want to wait slowly during roll call at the beginning of their shift to read through the items. Also, they wanted all of the items to show on the home page, or at least easily accessible, and always the high priorities should be on top. As you can see, an automatic scrolling web part would've been useless.
My solution was to basically setup their roll call list to a set height and then allow them to scroll through it themselves. For whatever reason the web part properties Height doesn't work for me, does it for you? Using SharePoint Designer (SPD), we can achieve this setup in about 5 minutes. Using my development site, you'll see my announcement list is long and pushing the page down.
Open the site in SharePoint Designer. Copy the page before making any modifications. Right click the web part and select Convert to XSLT Data View. You will then notice your web part is broken into multiple elements.
Also, you may notice that the Body of the item has been removed. I'm not sure why that happens but that's okay, we add it later using a different method.
Next, switch SPD to Split view, to view the code above the design view page. (the option is in the lower left of the window.)
Click on an item in the design view, say the first announcement. Above the code view is a path of tags, similar to the following:
Looking at this line, starting on the right, read it from right to left and find the second <TABLE> tag, the first one might look like <TABLE#-.ms-summarycus..>. Click the <TABLE> tag and the code for the table will be selected in the code view. With any luck, you should see the following selected.
The key here is the <xsl:otherwise> tag right before your selected <TABLE> tag. Click there and insert the following:
<div style="height: 250px;overflow:auto">
When you do, the closing </div> tag will appear, delete that, we'll add it later. You should now have something like:
Next, we add the closing </div> tag. Scroll down in the code about 90-100 lines, depending on your list and fields selected. Look for this:
Right after the second </TABLE> you want to put in </div>. You should now having something like:
Click in the design view half and SPD will recompile the page and you should see the list in it's entirity. SPD doesn't recognize the height style. As long as you're not getting an XSLT error you should be all set to save and test in Internet Explorer.
My list now has a scroll bar allowing users to view it all on this same page.
Now lets add the body in there. The issue with the body is that we only want to show 250 characters, and when we clip it short we are also clipping off possible closing HTML tags in the body. For example, a rich text body might contain <div>This is a test body...</div>. Say we clip it off before the closing </div> tag we'll have an open <div> tag which that breaks the page, pretty good at that too. So in the XSL code for the web part we need to remove the HTML tags before showing the body. Thanks to Vincent for his post on how to strip out HTML tags http://blog.thekid.me.uk/archive/2007/05/17/stripping-html-tags-when-using-xslt.aspx.
Back in SPD, scroll up above where you added the <div style="height: 250px;overflow:auto"> and look for a <xsl:template name="dvt_1">. Above this tag should be a </xsl:template> tag. We are going to insert the following code right between these two:
<xsl:template name="removeHtmlTags">
<xsl:param name="html"/>
<xsl:choose>
<xsl:when test="contains($html, '<')">
<xsl:value-of select="substring-before($html, '<')"/>
<!-- Recurse through HTML -->
<xsl:call-template name="removeHtmlTags">
<xsl:with-param name="html" select="substring-after($html, '>')"/>
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$html"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
so now you should have something like:
Next, click in the design view on a user's name after the "by" in one of the announcements. Code view should highlight the associated <xsl:value-of> tag. This <xsl:value-of> tag is inside of an <xsl:choose> tag. Step outside of this tag, below the selected line. Add the following after the </xsl:choose> and before the </TD> tag.
<xsl:variable name="pureText">
<xsl:call-template name="removeHtmlTags">
<xsl:with-param name="html" select="@Body" />
</xsl:call-template>
</xsl:variable>
<div class="blogText">
<xsl:value-of select="substring($pureText, 0, 250)" />...<br/>
</div>
You should have something like this:
Click the design view and you'll see your comments. Save the file and you'll have the comments in SharePoint. Check it out!
That should do it! Let me know what you think or if you have questions!