Wednesday, July 15, 2009

Client side validation for rich text field in SharePoint

I have faced lot of problem in validating a rich text box in SharePoint through JavaScript. Problem is that it does not recognize the text present in the rich text box.

Here is the solution for validating the rich text box.

function validateComments()
{
//debugger;
var Comment = getTagFromIdentifierAndTitle('textarea','TextField','Comment');
var docEditor=RTE_GetEditorDocument(Comment.id);
if (null==docEditor)
return;
strHtml=docEditor.body.innerHTML;
//alert(strHtml);
if(strHtml !="" && strHtml !="
")
{
return true;
}
else
{
alert('Please enter your comment in the box above');
return false;
}
return true;
}

Wednesday, June 17, 2009

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.




Monday, May 18, 2009

Override font tag

We had a problem where the content owners were selecting font size from the rich html editor and deploying their content, where as the standard font size across the SharePoint portal was 11px. Problem is when we select font sizes from the html editors it does not allows them to select in pixels, instead they have to select font sizes from 1 through 7. Now the challenge is that we have in map font sizes in to pixels like this.

Font size 1 = 10px
Font size 2 = 11px
Font size 3 = 12px
Font size 4 = 14px
And so on….

I have goggled for some time and got the solution. Here are few links that helped me.
http://www.webmasterworld.com/css/3642874.htm

http://www.ozzu.com/programming-forum/how-override-the-font-tag-with-t74514.html

http://codingforums.com/showthread.php?t=18876

http://www.acquestech.com/2009/01/overriding-inline-css/

http://css-tricks.com/override-inline-styles-with-css/

After looking in to this links I have got two solutions, one which works only for IE
<style type="text/css">
/* For IE*/
font
{
font-size:expression(setFontags(this.currentStyle.fontSize));
}
</style>

<script type="text/javascript">
function setFontags(x)
{
var y={1:9,2:11,3:12,4:14,5:24,6:32,7:48};
return y[x]+'px';
}

</script>

Other which works for IE and Firefox. But the problem with this one is there will be a small flicker to map the font sizes since we had written it in JavaScript.

<script type="text/javascript">
window.onload = function()
{
//debugger;
// Get the (note depreciated) FONT elements
var fonts = document.getElementsByTagName('font');

// Loop through them
for(var i=0; i<fonts.length; i++)
{
// Moz / Opera
// We don't check for removeNamedItem explicitly
// because for some strange reason IE7 acts like the method exists
// but doesn't provide the functionality or return reference to it in a "for prop in" loop.
// Opera supports both methods of monitoring events,
// Opera also makes the text smaller than it should be if we use the same method IE uses
// so we check for the Moz method of monitoring events
// which is known not to work in IE
if( fonts.item(i).addEventListener )
{
//fonts.item(i).attributes.removeNamedItem('size');
if(fonts.item(i).size == 1)
{
fonts.item(i).style.fontSize = "10px";
}
else if(fonts.item(i).size == 2)
{
fonts.item(i).style.fontSize = "11px";
}
else if(fonts.item(i).size == 3)
{
fonts.item(i).style.fontSize = "12px";
}
else if(fonts.item(i).size == 4)
{
fonts.item(i).style.fontSize = "14px";
}
}
// This is how IE7 does it
else
{
if(fonts.item(i).size != "")
{
if(fonts.item(i).size == 1)
{
fonts.item(i).style.fontSize = "10px";
}
else if(fonts.item(i).size == 2)
{
fonts.item(i).style.fontSize = "11px";
}
else if(fonts.item(i).size == 3)
{
fonts.item(i).style.fontSize = "12px";
}
else if(fonts.item(i).size == 4)
{
fonts.item(i).style.fontSize = "14px";
}
}
}
}
}
</script>

Thursday, April 23, 2009

Plotting Location maps from a SharePoint List using Virtual earth map control and SharePoint Designer

There was a requirement where I have to plot the office locations of my client in SharePoint using SharePoint Designer from a SharePoint List. I have googled around for some time and found couple of interesting articles which helped me a lot to plot the maps.

http://blogs.msdn.com/sharepointdesigner/archive/2007/05/23/plotting-your-data-using-virtual-earth.aspx

http://geocoder.us/demo.cgi

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/15/how-to-integrate-virtual-earth-maps-with-a-sharepoint-list.aspx

http://www.wssdemo.com/Blog/archive/2008/09/05/sharepoint-virtual-earth-web-part-without-deploying-any-server-code.aspx

http://blogs.msdn.com/sharepointdesigner/archive/2008/12/05/creating-restful-mashups-using-spd-2007-part-1.aspx

http://msdn.microsoft.com/en-us/library/bb259691.aspx

Thursday, February 19, 2009

Sort a Data View Web Part based on QueryString

There was a requirement where I have to sort a data view webpart on multiple parameters like date, size and LOB. Initially I thought of having three different pages for sorting, but that is very bad idea. So thought of implementing it with the concept of query string.

I want to use the sort option provided by data view web part and provide SortField as query string parameter. After thinking for a while and providing multiple hit and trials I have succeeded. Below is the expression for sorting using query string.

@*[name()= $SortField]

We write this in the edit sort expression.

And in the URL….

http://ServerName/Lists/Deals/LOB.aspx?LOB=All&SortField=Deal_x0020_Date



Thursday, February 12, 2009

Apply multiple conditions to filter data in Data View web part

I was wondering if there is a way to filter the data present in data view web part by applying multiple conditions like this

If((@ApprovalStatus = 'Approved') and (@LOB = $Param1 or $Param1 = 'All'))

After thinking for sometime, I got an idea to add XSLT filtering instead of applying filter criteria available.



So I have checked the checkbox “Add XSLT filtering”, clicked on edit and added the following XSLT like this:

[(@ApprovalStatus = 'Approved') and (@LOB = $Param1 or $Param1 = 'All')]