There are many things that Designer can do and I’ve seen many an article on DVWP but what I didn’t know, until I saw @sympmarc do it, was customising a List form in designer, something I’ve done in Studio before with rendering templates etc but never seen it done on-the-fly as it were.
Where to start ?
Well designer of course, but what do I mean by that, what’s the best approach to do this ? Is there one. Yes, I think so and I got clues as to what I think this should be at SharePoint Saturday.
First we need somewhere to play so create yourself a test site and a list, create a few fields, it doesn’t matter what as this first post is just about how to go about editing a form.
Now open the Site in Designer, if you’ve never done this then a dialog will open and you have to select your site from the list you can see, or navigate to it somehow, but easiest is to just cut and paste the Site Collection URL into the box and click open, do not put a filename, so that default.aspx you pasted in there, just scrub that out. Great.
Now in Designer you should have your site collection open and in the Folder window, if you cannot see it hit Alt-F1, you can see the structure of your site.
Expand the Lists folder and the list itself and you should see something like this.
Here you can see two of my lists one stupidly named based on an announcements list, but key to what we are about to do you can see the specific pages of the forms associated with this list underneath the list itself.
This is what we are going to change. First we are going to make a slight change to the NewForm.aspx. BUT for safety sake we are not going to edit the original, you might make a mess, we are going to make a copy of it to make our changes and then make sure the list points at this version, then we can always switch it back.
So to do this, counter-intuitively open the NewForm.aspx by dbl clicking it now immediately “Save As” and type in the name AdvancedNewForm.aspx (or whatever you think suits your needs). You could of course edit any of the forms like this.
Doing this (should) do two things, first it will make a copy of the new form under the list, but importantly it should have set the default form for an item to be our new version.
You need to check this has happened, so right click the List in the folders windows and select properties. Now click the tab Supporting Files, the new item form should be pointing at your AdvancedNewForm.aspx. If it is not then you can select it.
You do this by
N.B.Important step easily missed
1. Select the Content type specific forms option for ITEM from the combo box
2. For your new item form select the browse button and navigate to your selected form.
If you do not do step 1 then it will look like it worked but then refuse to change the item and you will go mad trying to figure out what is going on, cos designer will not tell you you’ve done it wrong.
Our new page should be open in the main window of designer by default it should be a split window for those happy with code and design surfaces, if you need to change this view at the bottom of the window is an option to change this, it’s easily missed so I point it out here.
Now in the code look for
<asp:content runat="server" contentplaceholderid="PlaceHolderMain">
After this we are just going to put some text to customise our form, “Hello Word”, enter this text and save the form. Go back to your site in a browser and click new on your list and you should see the custom form now and not the original. Not the most exciting example but this describes the process of doing that customisation.
You will be doing far more complicated customisations than this eventually, but it’s important to note how to start doing this.
For those devs amongst you this will go against the grain as directly editing source code on a live system with no Source Code Control.
For every one there are some other practices you can learn from here where I made some mistakes and have paid for it in losing my changes.
Firstly when developing a complex solution for your form, DONT do it on live, take a copy of what you want to change a develop it on another site, on a dev machine, wherever just not on the live one, unless of course its not actually in use at the time you are doing it.
Secondly, if you have Visual Studio and TFS or other editor and source code control, take a copy of the changes and save them into a file under your TFS project and do checkins or create multiple copies called version 1,2,3 etc. DONT just have your only copy in SharePoint. I lost a lot of work when I mistakenly deleted a dev site collection of mine.
Just because this is an easy approach to developing don’t treat it as such. For each demo or customisation create a new properly named site collection that matches your TFS project, don’t call your site collection test you might delete it.
That’s it for this post. A Simple guide on editing those custom forms in designer with a few tips to make sure you don’t mess up.