Split List View web part labels (javascript) - SharePoint Development & Administration + InfoPath

Sunday, April 19, 2009

Split List View web part labels (javascript)

The following is a javascript function created to split long questions / column titles on a SharePoint survey or list when editing (EditForm.aspx / DispForm.aspx).

I had a survey with questions containing hundreds of characters. When the EditForm.aspx / DispForm.aspx pages render the survey for completion, the questions are wrapped in <nobr> tags, which results in the page's width being much larger than the browser, regardless of resolution.

The function takes all <nobr> elements and replaces those which match required criteria. Each question / column in the survey starts with a number, which is followed by the question ( "1. ..." "2. ..." etc.). The function runs through a series of tests to determine the currrent question. If the beginning of the line matches the required question number, contents of the element is replaced to include a break (<br>) tag to split the line.

Possible improvements:

  • Split the question string after a specific number of characters: Replacing the space between the words closest to the the specified number of characters with a <br&gt tag. This would make the function generic, meaning that each question would be split by the same block of code if a line is greater than the maximum number of characters. If placed into another EditForm.aspx or DispForm.aspx page, the function will continue to split long column names with having to modify the code (the code below is not generic).
  • Link the function to the site collection masterpage, which can then be triggered if a variable (the string length) is found in the query string. If found, the function can be called, passing the specified maximum length for question lines. (May split undesired lines of text if also wrapped in <nobr> tags)

<script type="text/javascript" language="javascript" >
<!--
// this is default SharePoint function
//it will call after page is loaded.
_spBodyOnLoadFunctionNames.push("split");

//this function finds all <nobr> tag
//then check our original text and
//replace new text which contains <br>
function split()
{

var subInner = "";
var oP = document.getElementsByTagName('nobr');//the collection of <p> tags
for(var i=0;i<oP.length;i++) //loop through array
{
subInner = oP[i].innerHTML.substring(0,3); //Get the first 3 chars of current string

if(subInner == '13.') //text to identify a specific question
{
oP[i].innerHTML = '13. first line text...<br> second line text...<span class="ms-formvalidation"> *</span>'
}
}
}
//-->
</script>

Share this article:
Stumble This Delicious
Delicious
submit to reddit
Facebook
MySpace
MySpace

No comments:

Post a Comment