03.08.2010 Updated the article with another example on how to build the fields-object in a customized form.
This article describes how to use most of the solutions found in this blog with a customized form. The scripts which this article addresses, is the ones involving the function “init_fields()_v2”.
This was originally an answer to a comment in one of the articles.
I get this question a lot:
How can i use these scripts in a customized form?
The answer is simple, but i will explain it so that you understand why it’s not working.
This script relays in the function init_fields() to identify and “objectify” the form by it’s <TR> tags (table rows). What the function does is to find all the FieldInternalNames in the code by this “information-tag”:
<!-- FieldName="This is the DisplayName"
FieldInternalName="ThisIsTheFieldInternalName"
FieldType="SPFieldText"
-->
It then make an object which, when called with the FieldInternalName of a field, returns an object containing that table row (both formlabel and formtable).
When initiated like this:
fields = init_fields_v2();
You address a <TR> like this:
$(fields[FieldInternalName])
Where “FieldInternalName” is the FieldInternalName of your field. Read here how to identify the FieldInternalName.
This is the original function for use in standard SharePoint forms:
function init_fields_v2(){
var res = {};
$("td.ms-formbody").each(function(){
var myMatch = $(this).html().match(/FieldName="(.+)"s+FieldInternalName="(.+)"s+FieldType="(.+)"s+/);
if(myMatch!=null){
// Display name
var disp = myMatch[1];
// FieldInternalName
var fin = myMatch[2];
// FieldType
var type = myMatch[3];
if(type=='SPFieldNote'){
if($(this).find('script').length>0){
type=type+"_HTML";
}
}
if(type=='SPFieldLookup'){
if($(this).find('input').length>0){
type=type+"_Input";
}
}
// Build object
res[fin] = this.parentNode;
res[fin].FieldDispName = disp;
res[fin].FieldType = type;
}
});
return res;
}
Customized form
When you modify the list form in SharePoint Designer, you loose the FieldInternalName and therefore the function init_fields_v2() does not return anything.
To address the fields on a custom form you have to find another way of addressing these fields and to “objectify” them in the same way as the script init_fields_v2(). Basically you could insert some kind of “identifier-attribute” on the <TR> tags, or you can go with the displayName – only remember that if you change the displayName – you have to update your script…
To use the a custom made ID attribute, replace the init_fields_v2() function with this one:
function init_fields_v2(){
var res = {};
$("td.ms-formlabel").each(function(){
var thisID = $(this).attr('id');
res[thisID] = $(this).parents('tr:first');
});
return res;
}
This approach requires that you add a unique ID attribute to the <TD> holding the formlabel. Here is an example of code from a customized form:
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="190px" valign="top" class="ms-formlabel" id="TitleColumnCustomID">
<H3 class="ms-standardheader">
<nobr>Title<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel" id="ChoiceColumnCustomID">
<H3 class="ms-standardheader">
<nobr>MyChoiceColumn</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="MyChoiceColumn" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@MyChoiceColumn')}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="MyChoiceColumn" ControlMode="New"/>
</td>
</tr>
</table>
Note the id attributes “TitleColumnCustomID” and “ChoiceColumnCustomID” in line 03 and 15.
To “get” the Title field you address it like this:
fields = init_fields_v2();
var myTitleField = $(fields['TitleColumnCustomID']);
alert(myTitleField.html());
Ask if anything is unclear.
Regards
Alexander
Like this:
Like Loading...
