Remove auto focus on SharePoint web form

We normally get auto focus if there is a textbox on the SharePoint web form. That works fine if the textbox is on the top of the web form, but if there is some content on the top and there is a textbox on the bottom of the page then it is a problem i.e since there will be auto focus on the textbox, when the page loads it will directly move the page to bottom to get the autofocus on the textbox. This happens because SharePoint automatically calls a JavaScript function named WebForm_AutoFocus(focusId) to get the auto focus on the textbox. This JavaScript function is present in the Core.js file. If you don’t want the textbox to get auto focus on the page load then simply override this function in your page, i.e simply call this function this way in your page…

function WebForm_AutoFocus(focusId)
{
//when the page loads, focus is automatically set to commets textbox, to remove the auto focus override this function.
//Override the AutoFocus function
}

SharePoint List Operations (Insert, Update and Delete) through JavaScript

I was thinking if there was a good way to access a SharePoint List through JavaScript. You might be wondering why there will be a need to do Insert, Update and Delete operations through JavaScript. Here is a scenario…

Assume that’s you don’t want a column in a SharePoint list to contain duplicate items or there are related lists with primary and secondary relationships, then if you want to update an item in the second list based on the primary list updation then, performing this operations through JavaScript is very comfortable and easy.

This has become possible with the help of SharePoint and Office Live JavaScript API. This API internally calls SharePoint Web Services to perform List Operations. You can find these details here…

http://darrenjohnstone.net/2008/07/22/examples-for-the-sharepoint-and-office-live-javascript-api/

http://darrenjohnstone.net/2008/07/22/a-cross-browser-javascript-api-for-the-sharepoint-and-office-live-web-services/

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;
}

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.

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>

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

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

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')]

Displays one announcement at a time using DataView webpart

I had a requirement in my project where I had to customize the display of announcements. I was supposed to display single announcement at a time, providing the provision for the user, to navigate through the list of announcements one by one. User should be able to view next, previous and all the announcements. This needs to be done without writing any code.

Here is my approach for this problem. I have created a view for the announcements list which contains required columns along with the Id column. ID column is mandatory for this approach. Using SharePoint designer, in the announcements list I have created a custom form. Use this custom form to display one announcement at a time. Place a data view webpart on this form and customize it to accept query string for ID column to display that announcement.

Place Bank To all View Previous View Next links on the top and bottom of the webpart in this way.



Use the following JavaScript to access and display one announcement at a time.