Customized forms using SharePoint Designer – how to use the init_fields function

This is a repost of a previously published article. I have updated the code examples for compatibility with newer solutions. I cannot guarantee that this code will make all my various solutions work in a modified form as some of the solutions have a variant or the init_fields function embedded and you would have to modify it in the *.js file for that particular solution, but it will give you an idea on how it works.

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";
				}else if($(this).find("div[id$='_TextField_inplacerte']").length>0){
					type=type+"_EHTML";
				}				
			}
			if(type=='SPFieldLookup'){
				if($(this).find('input').length>0){
					type=type+"_Input";
				}
			}
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('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().

To achieve this, we add an id attribute to the <TD> that holds the ms-formlabel.

Here is an example of code from a customized form:

<tr>
	<td width="190px" valign="top" class="ms-formlabel" id="TitleColumnCustomID" fieldType="SPFieldText" fieldDispName="Title">
		<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>

Note the id, fieldType and fieldDispName:
id=”TitleColumnCustomID” fieldType=”SPFieldText” fieldDispName=”Title”

To use the a custom made ID attribute, replace the init_fields_v2() function with this one:

function init_fields_customForm(){
	var res = {};
	$("td.ms-formlabel").each(function(i,e){
		res[this.id] = $(this).parents('tr:first');
		$(res[this.id]).attr("fieldType",$(this).attr("fieldType"));
		$(res[this.id]).attr('fieldDispName',$(this).attr("fieldDispName"));
	});
	return res;
}

The field type attribute is essential to get right for the functions “getFieldValue” and “setFieldValue” to work!

To “get” the Title field value you address it like this:

fields = init_fields_customForm();
var myTitleFieldValue = $(fields['TitleColumnCustomID']).find("input").val();
alert(myTitleFieldValue);

Ask if anything is unclear.

Regards
Alexander