This is part 2 of my demo project about “How to create a custom list form…” –
See this post for part one:
Here you can download the demo project as source code:
http://spcustomlistformdemo.codeplex.com/
Let’s start…
(See “ListDefinition2” in the demo project source!)
1. Create an new List Definition project item as described in the previous blog post (“Part 1”).
2. In the ASPX file of your list form be sure to add the attribute UseLegacyForm=”True” to your Form-Tag. – Like in this screenshot:
3. Then you need to create the field edit controls by yourself. Therefore you have to add some code to the ASPX file.
Here is some demo code. (The “ListDefinition2” based upon “Announcement List Template”…)
1: <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"2: Visible="true">3: <ZoneTemplate>4: </ZoneTemplate>5: </WebPartPages:WebPartZone>6:7: <!-- ikarstein: Insert such a structure for each field you want to show on you page -->8: <table border="0" width="100%">9: <tr>10: <td class="ms-toolbar" nowrap="nowrap">11: <SharePoint:FormToolBar runat="server" ControlMode="New" />12: </td>13: </tr>14: <tr>15: <td>16: <span id="part1"> <!-- ikarstein: This line is important for "Attachments" -->17: <table border="0" cellspacing="0" width="100%">18: <!-- ikarstein: Insert such a table row for each field / BEGIN-->19: <tr>20: <td width="190px" valign="top" class="ms-formlabel">21: <h3 class="ms-standardheader">22: <nobr> Title<span class="ms-formvalidation"> *</span></nobr>23: </h3>24: </td>25: <td width="400px" valign="top" class="ms-formbody">26: <SharePoint:FormField runat="server" ID="field_Title" ControlMode="New" FieldName="Title" />27: <SharePoint:FieldDescription runat="server" ID="field_Title_Description" FieldName="Title"28: ControlMode="New" />29: </td>30: </tr>31: <!-- karstein: END -->32: <tr>33: <td width="190px" valign="top" class="ms-formlabel">34: <h3 class="ms-standardheader">35: <nobr> Body</nobr>36: </h3>37: </td>38: <td width="400px" valign="top" class="ms-formbody">39: <SharePoint:FormField runat="server" ID="field_Body" ControlMode="New" FieldName="Body" />40: <SharePoint:FieldDescription runat="server" ID="field_Body_Description" FieldName="Body"41: ControlMode="New" />42: </td>43: </tr>44: <tr>45: <td width="190px" valign="top" class="ms-formlabel">46: <h3 class="ms-standardheader">47: <nobr> Expires</nobr>48: </h3>49: </td>50: <td width="400px" valign="top" class="ms-formbody">51: <SharePoint:FormField runat="server" ID="field_Expires" ControlMode="New" FieldName="Expires" />52: <SharePoint:FieldDescription runat="server" ID="field_Expires_Description" FieldName="Expires"53: ControlMode="New" />54: </td>55: </tr>56: <!-- ikarstein: optionally add this table row / BEGIN -->57: <tr id="idAttachmentsRow">58: <td nowrap="true" valign="top" class="ms-formlabel" width="20%">59: <SharePoint:FieldLabel ControlMode="New" FieldName="Attachments" runat="server" />60: </td>61: <td valign="top" class="ms-formbody" width="80%">62: <SharePoint:FormField runat="server" ID="AttachmentsField" ControlMode="New" FieldName="Attachments" />63: <script language="javascript" type="text/javascript">64: var elm = document.getElementById("idAttachmentsTable" );65: if (elm == null || elm.rows.length == 0)66: document.getElementById("idAttachmentsRow" ).style.display=< span> ;67: </script>68: </td>69: </tr>70: <!-- ikarstein: END -->71:72: <!-- ikarstein: Add this table for "Save" and "Cancel" buttons / BEGIN -->73: <table width="100%" border="0" cellspacing="0">74: <tr>75: <td width="99%" class="ms-toolbar" nowrap="nowrap">76: <img src="/_layouts/images/blank.gif" width="1" height="18" />77: </td>78: <td class="ms-toolbar" nowrap="nowrap">79: <SharePoint:SaveButton runat="server" ControlMode="New" ID="savebutton" />80: </td>81: <td class="ms-separator">82: </td>83: <td class="ms-toolbar" nowrap="nowrap" align="right">84: <SharePoint:GoBackButton runat="server" ControlMode="New" ID="gobackbutton" />85: </td>86: </tr>87: </table>88: <!-- ikarstein: END -->89: </span>90: <SharePoint:AttachmentUpload runat="server" ControlMode="New" />91: <SharePoint:ItemHiddenVersion runat="server" ControlMode="New" />92: </td>93: </tr>94: </table>95:96:(You see my comments inline ?! Not much, I know…)
Behind the “<WebPartZone>” tag add the HTML code.
You can add input fields by using this snipped:
1: <!-- ikarstein: Insert such a table row for each field / BEGIN-->2: <tr>3: <td width="190px" valign="top" class="ms-formlabel">4: <h3 class="ms-standardheader">5: <nobr> Title<span class="ms-formvalidation"> *</span></nobr>6: </h3>7: </td>8: <td width="400px" valign="top" class="ms-formbody">9: <SharePoint:FormField runat="server" ID="field_Title" ControlMode="New" FieldName="Title" />10: <SharePoint:FieldDescription runat="server" ID="field_Title_Description" FieldName="Title"11: ControlMode="New" />12: </td>13: </tr>14: <!-- karstein: END -->15:Of course you can change the page design. You only need the tag “<SharePoint:FormField>”, optionally “<SharePoint:FieldDescription>”. In every case the “FieldName” Attribute represents the List field the input field is connected with.
You do not need to create any Code Behind!
Just add "<SharePoint:GoBackupButton>” for cancel and “<SharePoint:SaveButton>” for submit.
Furthermore you have some controls for adding attachments to your List item.
AND: It’s the same for “Edit” list form. You only need to change the attributes “ControlMode” to “Edit”… Totally easy, isn’t it?
4. Deploy it and have a look…