Tuesday, December 29, 2009

Client-Side Programming in Sharepoint # 3

Set Default Values in Sharepoint List Forms (Newform.aspx / Editform.aspx)


Some time we need to set default values in shaepoint list form. e.g. there may be some requirement where we need to set person or group field with loggedin user in Newform.aspx. We can set default values in list setting page. But, by default at design time, there is no way to set a field based on some calculation.

In this article we will see how to set default values for some common fields using javascript at run time. we will set default values for following type of fields -

Single line of text
Choice
Number
Person or Group
Multiple lines of text
Date and Time
Currency
Yes/No
Hyperlink or Picture

For this we will use task list on team site.Lets add some additional columns in the task list so it can have fields of above types.The Final list design will look like this -

Task Lists
Title - Single line of text
Priority - Choice
Status - Choice
% Complete - Number
Assigned To - Person or Group
Task Group - Person or Group
Description - Multiple lines of text
Start Date - Date and Time
Due Date - Date and Time
Rate - Currency
Check - Yes/No
Link url - Hyperlink or Picture
Picture - Hyperlink or Picture

To accomplish this , open new item page (newform.aspx) in edit view by using toolpaneview=2 query string -
http://server/Lists/Tasks/NewForm.aspx?toolpaneview=2

Now add a CEWP (content Editor WebPart) in this page.We will put all the javascript code in this web part.Open Source Editor and paste following code -


<script type="text/javascript">

// Call SetDefault() function on page load
_spBodyOnLoadFunctionNames.push("SetDefault");

function SetDefault()
{
var peopleValue = GetCurrentUser();
if (peopleValue != null)
SetDefaultValue('PersonGroup','Assigned To',peopleValue);
SetDefaultValue('SingleLineText','Title','My default single Line Text'); SetDefaultValue('Choice','Priority',2);
SetDefaultValue('Choice','Status',3);
SetDefaultValue('Number','% Complete',95);
SetDefaultValue('MultiLineText','Description','My default multi Line Text');
SetDefaultValue('DateTime','Due Date','12/20/2009');
SetDefaultValue('Currency','Rate',452);
SetDefaultValue('YesNo','Check',false);
SetDefaultValue('PictureHyperlink','Link url','http://dpwss:6666/Dev','home site url');
SetDefaultValue('PictureHyperlink','Picture','http://dpwss:6666/_layouts/images/logo.gif','home site logo');

}


//params -
//fieldType - Constant for field type
//fieldLabel - Display Label (name) for the field in list form(new/edit)
//fieldValue - field value to be set in the control
//fieldDescription - Only applicable for 'PictureHyperlink' field

function SetDefaultValue(fieldType,fieldLabel,fieldValue,fieldDescription)
{
var tr = GetFieldRow(fieldLabel);
var controls;
if (fieldType == 'MultiLineText')
{
controls = tr.getElementsByTagName("textarea");
for(var k=0; k < controls.length; k++)
{
if(controls[k].title == fieldLabel)
{
controls[k].innerHTML = fieldValue; break;
}
}
}
else if (fieldType == 'Choice')
{
controls = tr.getElementsByTagName("select");
for(var k=0; k < controls.length; k++)
{
if(controls[k].title == fieldLabel)
{
controls[k].selectedIndex = fieldValue; break;
}
}
}
else if (fieldType == 'PersonGroup')
{
controls = tr.getElementsByTagName("DIV");
for(var k=0; k < controls.length; k++)
{
if(controls[k].id.indexOf("UserField_upLevelDiv") > 0)
{
controls[k].innerHTML = fieldValue;
break;
}
}
}
else
{
controls = tr.getElementsByTagName("input");
for(var k=0; k < controls.length; k++)
{
if (fieldType == 'PictureHyperlink')
{
if(controls[k].title == fieldLabel)
{
controls[k].value = fieldValue;
}
if(controls[k].title == "Description")
{
controls[k].value = fieldDescription;
}
}
else if (fieldType == 'YesNo')
{
if(controls[k].type == "checkbox")
{
controls[k].checked = fieldValue;
}
}
else
{
if(controls[k].title == fieldLabel)
{
controls[k].value = fieldValue;
}
}
}
}
}


//Get control row in the rendered html

function GetFieldRow(fieldLabel)
{
var nobrs = document.getElementsByTagName("nobr");
for(var i=0; i < nobrs.length ; i++)
{
if (nobrs[i].innerText == fieldLabel)
{
var tr = GetParentByTagName("TR", nobrs[i]);
return tr;
}
}
}

//Get parent node
function GetParentByTagName(parentTagName, childElementObj)
{
var parent = childElementObj.parentNode;
while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
{
parent = parent.parentNode;
}
return parent;
}

//get current Logged In user
function GetCurrentUser()
{
var currentUser;
var tags = document.getElementsByTagName('a');
for (var i=0; i < tags.length; i++)
{
if(tags[i].innerText.substr(0,7) == 'Welcome')
{
currentUser = tags[i].innerText.substr(8,tags[i].innerText.length);
}
}
return currentUser;
}
</script>


More - Client-Side Programming in Sharepoint

No comments: