This project has moved. For the latest updates, please go here.

Using SPUtiltiy with Custom New Item Form

Oct 22, 2014 at 12:38 AM
Edited Oct 22, 2014 at 12:39 AM
Hi,

I have found this a great tool to use with the default New Item form in SharePoint 2013 but when I create my own form (to move fields around) SPUtility is no longer able to find any of the form fields - including the default "Title" field...

I have followed all the steps when using the default form but no joy. Does anyone have a simple solution for this?

Thanks... Robin
Coordinator
Oct 26, 2014 at 9:41 PM
Robin,
I'm assuming that you customized the form with Infopath? Unfortunately, SPUtility.js will not work with these custom forms... it will only work on the out of the box forms.

You will need to either A) use the out of the box forms with SPUtility or B) customize the form with infopath and write some of your own JavaScript. If all you want to do is change the field order, you can always go to list settings -> column ordering and still use the out of the box form.
Thanks,
Kit
Oct 26, 2014 at 10:50 PM
Edited Oct 26, 2014 at 10:51 PM
Thanks for the reply Kit...

Sorry, I should have included more information with my original post...

I'm trying to develop some JavaScript Code to improve the functionality of our Office365 site through SharePoint 2013 Designer. When I mention a customised form all I have used is the "Create New List Item Form" from SharePoint Designer to generate another "New Item" Form. I have modified this in exactly the same way to include the JavaScript Libraries listed in your blog.

Modifying the original New Item Form works without any issues but. unfortunately, in the newly create form all the names seem to change - for example.

I have a field "Resource Name":

In the Out of the Box New Item form the HTML Generated is this:-
    <td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader">
    <nobr>ResourceName</nobr>
</h3></td>
    <td valign="top" width="350px" class="ms-formbody">
    <!-- FieldName="ResourceName"
         FieldInternalName="ResourceName"
         FieldType="SPFieldText"
      -->
        <span id='WPQ21c6b762b-b876-4eb7-89e7-20eeef81f989ResourceName' data-sp-control='SPFieldText' data-sp-options='{&quot;mode&quot;:3,&quot;source&quot;:&quot;ResourceName&quot;}'></span>
    </td>
I then simply create another default New Item form and the HTML is now:

<td width="190px" valign="top" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>ResourceName</nobr></H3></td><td width="400px" valign="top" class="ms-formbody"><span dir="none">
<input name="ctl00$ctl32$g_83e5d19d_38d6_4211_afde_85bdc491bfe0$ff141$ctl00$ctl00$TextField" type="text" maxlength="255" id="ctl00_ctl32_g_83e5d19d_38d6_4211_afde_85bdc491bfe0_ff141_ctl00_ctl00_TextField" title="ResourceName" class="ms-long ms-spellcheck-true" /><br />

This generates the error:
SCRIPT5022: Unable to get a SPField named ResourceName
sputility.min.js, line 10 character 20235

I hope this helps...

Robin
Coordinator
Oct 27, 2014 at 4:41 PM
Thanks the extra information is helpful.

As you've noticed, as soon as you create the form in SharePoint Designer it uses a slightly different format for the generated HTML. For example, this comment is missing:
    <!-- FieldName="ResourceName"
         FieldInternalName="ResourceName"
         FieldType="SPFieldText"
      -->
Right now SPUtility relies on that comment in order to determine the field type and internal name which is why it gets an error. It might be possible to make code changes to SPUtility.js in order to make this work on customized forms but there are a lot of unknowns.

I would recommend two options:
  1. Use SPUtility.js on the out of the box newform
  2. Use jQuery + custom code on a customized newform
Dec 24, 2014 at 3:32 PM
Hello Kit, Hello Robin.
Couldn't we:
  • carefully copy every comment from the OOB form (or building them from scratch if the only lines needed are FieldName, FieldInternalName and FieldType)
  • insert these comments into SPD-built custom form
    ?
    Shouldn't this "insertion" enable SPUtility to read the needed parameters?
Merry Christmas, BTW!
Coordinator
Dec 30, 2014 at 4:53 PM
You might be able to get it to work by adding the comments manually. However...
  1. Depending on how big your form is, it would be a lot of work to add the comments.
  2. If you rearrange the form's controls using SharePoint Designer then it won't work either.
Dec 30, 2014 at 10:14 PM
Hello Kit.
Forms created "ex novo" (from scratch) with Visual Studio will suffer of the same incompatibility of those SPD-modified?
Coordinator
Dec 31, 2014 at 4:34 AM
I haven't tried it but I believe they will have the same problem, yes.