Read more>> option for rich text field in SharePoint

One of the most common requirements in customized SharePoint sites is that if there are announcements that are getting displayed then we may want to some lines of text and then show Read more>> option. This is how we implement it.

<xsl:choose>
<xsl:when test="string-length@Body) &gt; 500">
<xsl:variable name="BodyText" select="substring@Body,1,500)"></xsl:variable> <xsl:variable name="BodyContent"> <xsl:call-template name="substring-before-last"> <xsl:with-param name="input" select="$BodyText" /> <xsl:with-param name="substr" select="string' ')" /> </xsl:call-template> </xsl:variable> <xsl:value-of disable-output-escaping="yes" select="concat$BodyContent,' ')" /> <xsl:if test="not@Body = '')"> <xsl:if test="string-length@Body) &gt; 500"> <a href="ViewHeadlines.aspx?ID={@ID}" style="white-space:nowrap" >Read more&gt;&gt;</a> </xsl:if> </xsl:if> </xsl:when> <xsl:otherwise> <xsl:value-of disable-output-escaping="yes" select="@Body" /> </xsl:otherwise> </xsl:choose>

Function:

<xsl:template name="substring-before-last"> <xsl:param name="input" /> <xsl:param name="substr" /> <xsl:if test="$substr and contains$input, $substr)"> <xsl:variable name="temp" select="substring-after$input, $substr)" /> <xsl:value-of disable-output-escaping="yes" select="substring-before$input, $substr)" /> <xsl:if test="contains$temp, $substr)"> <xsl:value-of select="$substr" /> <xsl:call-template name="substring-before-last"> <xsl:with-param name="input" select="$temp" /> <xsl:with-param name="substr" select="$substr" /> </xsl:call-template> </xsl:if> </xsl:if></xsl:template>

This is how the logic works…..
It first checks if the length of the rich text field if greater than 500 characters. If it is greater than 500 characters then it will take the first 500 characters. There is a possibility that the end of 500 characters might be in the middle of a word, so I am again calling a recursive function “substring-before-last” in XSLT which finds the last space in the text and cuts the text to the end of last space. After the end of last space I am appending the Read more>> option.

Problems:

If the rich text contains html elements like anchor tag even those are counted as characters.

Breaking the rich text at 500 characters might result in the middle of the anchor tag or a span or bold(HTML elements), In this case content authors should take care.

If you are copying the text from Word or PDF or any other source, then the styles are carried forwarded and this might result in SharePoint Designer acting cranky like text becoming double automatically etc…. here is an example of this http://blog.thekid.me.uk/archive/2007/02/18/problems-with-sharepoint-designer.aspx

Another way of implementing the same requirement is here
http://mdasblog.wordpress.com/2009/01/20/displaying-the-first-n-words-of-a-long-text-column-with-xsl/

but the problem with this one is that it strips of all HTML formatting.

Playing flash and media files in SharePoint

On our site we had posts(executive messages) getting displayed every week. As a part of this we were storing the title, description, image link(path – this is the link to executive image of who has given the executive message) and video file link(path - we normally upload the video files to the media library and we get the link to video file) in the SharePoint announcements list. Media can be in flash or .wmv format. Requirement is like this.
• There can be video, image and text. In this case when the page loads first image should be displayed then when the user clicks on the image then the image should disappear and video should start playing.
• There can be video and text.
• There can be image and text.
• There can be only text.
• If the text length is more then specified characters then it should get cut of after some specified characters and provide the option of Read more>>

Here is how I have customized XSLT with DataView web part and implemented it.
<script type="text/javascript">

function PlayVideo(photoId, videoId, playerId)
{
document.getElementById(photoId).style.display = "none";
document.getElementById(videoId).style.display = "block";
document.getElementById(playerId).play();
}

function PlayFlashVideo(photoId, videoId, playerId)
{
document.getElementById(photoId).style.display = "none";
document.getElementById(videoId).style.display = "block";
}
</script>

And the output would be like this.