Edit Form Templates using SharePoint Designer

Every now and then I need to update some jQuery on our SharePoint site. But I do it so infrequently that I usually forget how to edit form templates using SharePoint designer! You see, in SharePoint Designer i can select the List from under ‘Lists and Libraries’, and then select the form I want to edit from under the Forms section. From this point I can see the ASPX code and all of my jQuery. But all of the jQuery code is highlighted in yellow and disabled!

SharePoint Designer Disabled Yellow




At that point, I read that in order to edit things like jQuery in NewForm.aspx, EditForm.aspx and DispForm.aspx we need to put it into Advanced Mode.  But lo and behold, the Advanced Mode button is disabled too!

SharePoint Designer Advanced Mode




What a pain this is turning out to be!

The only way I could enable the Advanced Mode button to enable me to edit form templates using SharePoint designer is to make a change to some of the code which is NOT highlighted in yellow – for example a WebPart.  If i simply add a letter the Advanced Mode button becomes enabled.  Of course, I subsequently delete the letter to restore it back to its original form and the Advanced Mode button remains enabled!  If I then click the Advanced Mode button, say ‘Yes’ to save changes (because essentially it is the same) and switch to Advanced Mode, and I can then edit anything on the page!