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

Change log
June 27. 2013
I have changed the function “init_fields_customForm()” to properly set the “fieldType” and “fieldDispName” in the fields object.

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.


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

List of field type identifiers
Field type FieldType identifier
Singele line of text SPFieldText
File name SPFieldFile
Number SPFieldNumber
Currency SPFieldCurrency
Single choice column SPFieldChoice
Multi choice column SPFieldMultiChoice
User SPFieldUser
Singel lookup SPFieldLookup
MultiLookup SPFieldLookupMulti
Boolean value (Yes/No) SPFieldBoolean
Hyperlink or image SPFieldURL
Date and time SPFieldDateTime
Multi line of text SPFieldNote

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

5 thoughts on “Customized forms using SharePoint Designer – how to use the init_fields function”

  1. everything is clear except the last part and where exactly we need to add the below lines
    fields = init_fields_customForm();
    var myTitleFieldValue = $(fields[‘TitleColumnCustomID’]).find(“input”).val();
    alert(myTitleFieldValue);

    Also please let me know whether we can do the similar kind of solution in V3?

  2. I hope somebody can help me a little bit.
    I replaced the init_fields_v2() in the .js with the init_fields_customForm(). Added 3 attribute to the for my columns(id=”Title1ColumnCustomID” fieldType=”SPFieldText” fieldDispName=”WTGs”;id=”Title2ColumnCustomID” fieldType=”SPFieldText” fieldDispName=”Type”;id=”Title3ColumnCustomID” fieldType=”SPFieldText” fieldDispName=”Capacity”).
    Put a 2 CEWP’s with the scripts

    fields = init_fields_customForm();
    var myTitleFieldValue = $(fields[‘TitleColumnCustomID’]).find(“input”).val();
    var myTitleFieldValue = $(fields[‘Title1ColumnCustomID’]).find(“input”).val();
    var myTitleFieldValue = $(fields[‘Title2ColumnCustomID’]).find(“input”).val();
    alert(myTitleFieldValue);

    and the “cascading script”
    spjs.casc.init({
    lookupList:”Supplier_Type_MW”,
    lookupListBaseUrl:L_Menu_BaseUrl,
    lookupListFields:[“Title”,”Type”,”MW”],
    thisListFields:[“WTGs”,”Type”,”Capacity”],
    below the form.
    Now i got 3 times the message “undefined”. What did i do wrong?

  3. This does not look right. First, I’m not sure I understand what you have done in your HTML to add the ID for the “fields”.

    Secondly, you assign three different values to the same variable “myTitleFieldValue” – this must be three different variables, if not, the values are overwritten.

    Secondly, it looks like you try to assing the “FieldInternalNames” TitleColumnCustomID, Title1ColumnCustomID and Title2ColumnCustomID, but when you use these “fields” in “thisListFields”, you use “WTGs”, “Type” and “Capacity”?

    Please post any other questions in the forum: http://spjsblog.com/forums/forum/general-discussion/ and include screenshots.

    Alexander

Leave a Reply