New supporting forms by SharePoint Designer not quite the same

When you want create a new ‘supporting’ form (new/edit/display), there’s a special section in de SharePoint Designer 2010 interface that will create such a file for you:

This will create a new shiny form you can to use and customize. This works a whole lot better than the old crappy way with SharePoint Designer 2007 where you had to copy/paste the code from a newform/editform/dispform to your own .aspx file. And it would always break the attachments functionality…

The form, generated by SharePoint Designer 2010, looks almost exactly the same as the OOTB version, apart from the extra Save/Cancel buttons at the top of the form:

Recently, I discovered there are more differences than meets the eye to the SPD2010 generated supporting files.

I’m using the excellent SPJS-Utility javascript library (code example) to set some default values in SharePoint New & Edit forms, because trying to set form elements through javascript yourself can be a b*tch.

For a recent project, I decided to create new supporting files with SPD2010 and supply them with default values, using SPJS-Utility. But then, everything stopped working.

After taking a closer look at the workings of SPJS-Utility and the newform code, I found out that the SPD2010 generated forms lack some html code that the OOTB ones have.

See standard code for input (like newform.aspx):

As you can see, in HTML comments, every field has additional information concerning internal name and fieldtype. SPJS-Utility uses this information to get to the form elements it wants to change.

Look at the code from the newly generated form by SPD2010:

No metadata information in HTML comments here about the fields used. So, SPJS-Utility won’t work with the SPD2010 generated supporting files. Not without extra modifications anyway…

The way I worked around this is (very simply):

  • Go to the Advanced Settings of the list and turn off “Launch forms in a dialog”
  • Click on New or Edit to get to the form you want to change and click “Edit Page”
  • Add a Content Editor Webpart and add the Javascript code through this webpart.
  • Return to the Advanced Settings of the list and turn on “Launch forms in a dialog”

You are now using the OOTB form without changing it, because the extra code is contained in the Content Editor webpart.

Leave a Reply

Your email address will not be published. Required fields are marked *