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!
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
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?
Hi,
This code is added to a CEWP or a HTML form web part below the form you what to modify. Yes, this method can be used in SharePoint Services 3.0.
Alexander
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?
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: https://spjsblog.com/forums/forum/general-discussion/ and include screenshots.
Alexander