SharePoint 2013: Building Custom Forms
Description
In this article I am going to walk through the process of building custom forms using SharePoint Designer 2013. We are going to create three separate forms for a custom list. First a custom new item form, second a display item form and finally an edit item form.
Setting the Scene
I have created a custom list call Request Form which a student will fill to submit an event request. The counselor will use the edit item form and either approve or deny the request.
Building the List
Below is a screenshot of the columns created in the custom list.
https://nqvora.dm2304.livefilestore.com/y2po9zn8zSbf3c8o-EkYQToYkMerohubhtSic7Jo3xuaV9V8uZ2xGH4d5Ge2Lk1vlpKarnAagB2eLZot-yP2mdq0KB8W1Yu3vyr-wu9fJfKRUE/Capture2.PNG?psid=1
The columns I have shown above are self-explanatory, however, I am going to provide the choices I have added to the Choice column. The default value of the below choice columns are blank.
Approved By Counselor
https://nqvora.dm1.livefilestore.com/y2pAJtaj7ugvu521iQsKGNzdo3p5ylztL0Dacyo7aDglZ0KSkuR74T6Jsf6i2eh6IWbNqqsWWpJXcaMkEIXYXAzU9zjMeugS22DZ5AtkHxfvmA/Capture2a.PNG?psid=1
Event Type
https://nqvora.dm2301.livefilestore.com/y2pDJqMWHgzmfo5neyksnyoXGE330TeZyBjaYYRSmZrMZkvX9ykLNtP2cnnVEw1Rp_r374Ceeu_OTPPXiLz-BR-gRl1SoODsnjnRdtQlwyRZeU/Capture2b.PNG?psid=1
State
https://nqvora.dm2302.livefilestore.com/y2pCwFzMIWHqLNZW47ThNpPkqDKSYpf0P2UMuQVCgIx6TuWe-_hj_8-FziQ21x5wsSVzGRAmdSMVojQzulMFpAOSc5_ElC8DfnJarKSiGFqzIc/Capture2c.PNG?psid=1
Current Status
https://nqvora.dm2304.livefilestore.com/y2pToB4IbdPQVkIFdxzOCf_1h8SWUNhvx6AhPPFAD2uyQO6PBCmr2opBhovI19eVc7Zoi4D0Yr1xXhXRF-_67gLPWwglLr8gJyI3V1UAL-5N24/Capture2d.PNG?psid=1
Building the Form
This section describes the process of building custom new, display and edit forms using SharePoint Designer 2013.
New Item Form
Below is a screenshot of what SharePoint Designer 2013 looks like when I have opened the site. Request Form is the list I am focusing on.
https://nqvora.dm2301.livefilestore.com/y2pKZOCuq5jrISNBnefpoMQVHj_vOZLG446MpvKaemdzRYGbZHH-MgaWmrfm96IQmGV90q3zCYwuz2fW0Ttz94zVl9mzXD40ZRp3CzI7dVYv94/Capture3.PNG?psid=1
Below are the settings of the list. We are going to use the Forms section to build the custom forms.
https://nqvora.dm2304.livefilestore.com/y2poeAU2JrRb5peAJkLQ3WESPDXVFFfbpFR3XUoP3ERirsB-Lzzc2QyhTgbqPrrO65iGxS48eojGwjxmWiSFonD4KvOJrbmNkqY9HXWfmeBXzY/Capture4.PNG?psid=1
Click on the Form's New button and fill the information as shown below. Select the 'Set as default form for the selected type' . Click OK.
https://nqvora.dm1.livefilestore.com/y2pvKLW2CJc3n7Nqot0ME_Nk9URfEK0gON1l5xAHFyeVVymgm6oz1Y9Kw5bcYlFWatmIrRsKq4EI8q2i87xjnVvzm2sAjHZjTghkYV_0Mw5mEQ/Capture5.PNG?psid=1
Now in Forms you should see your new custom form. Click on the form. You should now be presented with the CustomNewForm code. Below is a screenshot.
https://nqvora.dm2301.livefilestore.com/y2pmRgUicJKvxS9xxySbWxFbMgLxSgE3ECw72PIXdf-J7ermyvP93E_2sWNn4EvrOyBo1cgdpx--bb5jo2EsoXuixFMIZjsBLhQwjyDguCWXfA/Capture6.PNG?psid=1
Click on 'CustomNewForm.aspx' to view the code. The first 23 lines are highlighted yellow which you cannot edit and hence when you click on it, the Data View Tools will not be available. I have provided screenshots of what the ribbon looks like with and without the tools.
Below is as screenshot without Data View tools. This is because the cursor is on the highlighted yellow code.
https://nqvora.dm2304.livefilestore.com/y2pA6aEDaCOvJWZbpTROmInuKGzMMmnC2U2kOPdRdmiSZNkLrfVq3Usyp-S1Me02Zuj-Snl7luO0M18gF8xiM5JzPWZ2jr_RkOz0q6cUlnHp1c/Capture6a.PNG?psid=1
Below is a screenshot with Data View Tools
https://nqvora.dm2301.livefilestore.com/y2p9qPqm5alSS-kvBoSd6BEgRcN9XhJ_tDFWK2IuMfaSQWCazurtiH8ZveoC3ZEt-MEswKHsRlrVPydfVcvTTqLadCcu_ZbJhT7w9tZfDdEVzc/Capture6b.PNG?psid=1
The below table contains the columns that the new form should contain, the rest can be deleted.
https://nqvora.dm2302.livefilestore.com/y2p4xk3AWRGdSOnPb_Jg77skqZpHazgYM8b4PdeXwP7vrw5YM92hEiuGECGxdK_4Y1cZV6Cg9PLeIOTSKWXkbk3Tjwpd2wL42YPsp3PE66OV7s/Capture7.PNG?psid=1
In the code right-click and choose 'Find…' from the drop-down list. Type in 'Counselor comment'. Below are screenshots
https://nqvora.dm2304.livefilestore.com/y2pYaPykNZPLvkTOdEoTqHZ8rEF_H1K4zQ0LoHCh-aENrO57KuI_Nj91gTnRo-ySFaQcysdmMmizDQvcECGOdWJ1tbESPOnwlnDrHFgKtrRB7w/Capture8.PNG?psid=1
https://nqvora.dm2303.livefilestore.com/y2pm1wp2S4eMhy1cfpbz41n7rnxgUzW0XUTL9p2slca_PeSSbeTGCXROXCNEWbApNovy91Molz_SvQ3_bTIl1z2GEfujPI_0zal0GifKTyCyK8/Capture8a.PNG?psid=1
We need to delete both the ms-formlabel and the ms-formbody for this column. Below is the code that NEEDS TO BE DELETED. I have also provided a screenshot as well.
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Counselor Comment</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="Counselor_x0020_Comment" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Counselor_x0020_Comment')}"/>
<SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="Counselor_x0020_Comment" ControlMode="New"/>
</td>
</tr>
https://nqvora.dm1.livefilestore.com/y2pWkte_swSw0q3uSiP91p0Z-auNRH8m72D5TxnC3Iu4REB5LS8YTHQXN1r_N2In4-PMmGuwOf-IiUTdpJxvQrC_h8LVOC3VSaHGaDqImqWACI/Capture8b.PNG?psid=1
Do the same for the other columns that need to be deleted for this view.
Once you have deleted the columns, click Save and then Preview in Browser. Saving the changes you made in the form can take a few seconds.
https://nqvora.dm2302.livefilestore.com/y2pvcGa-BG0P1SiruGmc-a09IEYsZyB2zHi3pbxg5rVgfWhWcB11e-zftes0zu1tBB_Nj5SKdZF3N519hGaXpiqsLmEI0m0I4bdTad-HGrRMV0/Capture8c.PNG?psid=1
Below is a screenshot of the CustomNewForm.aspx
https://nqvora.dm2301.livefilestore.com/y2pNpRezJdeW3QH-Jm8lKV1S2q137RMG6NXda0Fy35gyJ0tyBcqOGl6NfKlnRljGdjj7VJbTO6zcXQkFuOlXW79UJ-OWdjoZJkDdJwIgjZnuag/Capture9.PNG?psid=1
Remove the Save and Cancel button
I am now going to remove the Save and Cancel button from the top and give this form a title. In SharePoint Designer 2013, in the code right-click and choose 'Find…' from the drop-down list. Type in 'savebutton1'. Below is what you are looking for. Delete that code. I have also provided a copy of that code below.
<tr>
<td class="ms-toolbar" nowrap="nowrap">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/15/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap">
<SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1"/>
</td>
<td class="ms-separator"> </td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1"/>
</td>
</tr>
</table>
</td>
</tr>
https://nqvora.dm2303.livefilestore.com/y2pgDeikr6EUwxyg9VYYsm5JuYutwXpneXdSs0s4pq_3AiClgv0Vas0wTotGs4lf0s0dhSL6M_sG-OxVrO5ln_IVTuYSJnpfXoKaxEXyH8EcvQ/Capture10.PNG?psid=1
Again, click Save and then Preview in Browser. Now, as shown below, you should not see the Save and Cancel button on the top.
https://nqvora.dm1.livefilestore.com/y2pc-u0A9hA1RE0DCmDtB_R0OyWoNX-bLdMJhRXq3S2CanP3wuSOIXqHH8g_3f8ooG1MS_ECYBskzNvc6Ru1hKNz9RQn4NVgDIMD-J-IIZtBPI/Capture11.PNG?psid=1
Add Title
In the CustomNewForm.aspx search for dvt_1.body. Below is what you should find.
https://nqvora.dm2303.livefilestore.com/y2pqa7y1_8gBHaKW8TfisqyM7D-bkdKyotj9UZ-pSoGUTLG_1x91m5Aru2NDRVHsbYTEXv_zjyUXGrDnEe-Ut7G3ZLigbNLyy4FkWmDheq_dqc/Capture12.PNG?psid=1
Right below <xls:template name="dvt_1.body"> , type in a form name, for example 'New Request form'. Below is a screenshot
https://nqvora.dm2301.livefilestore.com/y2pUpItajjBXua34CqIY7FDzPQFWaAaLCW-1lDtWpp5qt8xJzgAlMfyP7XVTdWasl4ZcmOU8S_Oec29Z546enbEXeQQOwqXccbSwRWMPc2Bn00/Capture12a.PNG?psid=1
Again, click Save and then Preview in Browser. Below is what you will see.
https://nqvora.dm1.livefilestore.com/y2pHkj70o9Te9tMi1DOl9o1Gt3Qn-d-a8CBOzJGyafYEfoUv_fyAFoVQHpbHMfxvM41Ox39jcjWsJmZa5tHprWXye4aIT6UFFCK5WIidsnCOUs/Capture12c.PNG?psid=1
To make the text look like a prominent title, go back to SharePoint Designer, highlight the 'New Request Form', click on the Home ribbon and select the font type and size.
I selected my font type to be 'Times New Roman' and font size as x-Large which will automatically change the code. Below is what you will see
https://nqvora.dm2301.livefilestore.com/y2pGWlUaGTdB4lTJA0R_N7_Sdc_rQn5Mty5erDUwOc-wIApouS_g-X2kfXyYGM3HOZtUyeTFR7mZbeUL4d7dGyd1Kj_yhoRty0d0ohSL_veNlo/Capture12d.PNG?psid=1
Again, click Save and then Preview in Browser. Below is what you will see.
https://nqvora.dm1.livefilestore.com/y2pUUrd0kV9QzkntSgb9OLzF91Whf8e08axdKka-nBDRyMwC-9BX1g1wgHRgWnK7RhnsQyKL795trr0VxylVz6TdY31EFP1TKcsdgZO0RwS8Kc/Capture12e.PNG?psid=1
Below is a video which walks you through the steps show above.
(Click Here to view a high resolution video)
Display Item Form
In this section we are going to build the Display Form. In this form we are not going to delete any columns, however, we are going to remove the 'Close' button from the top and give the form a different name.
Click on the Form's New button and fill the information as shown below. Select the 'Set as default form for the selected type' . Click Ok.
https://nqvora.dm2303.livefilestore.com/y2pM9AoQdxwyP1yIt1DPZTWufUD1WjzhT79sJt5NjA91MWwWN6Qc2X8ECJqwn8BLvArLMImknLOAvJAqePG6jfyMoxAlOzxbVkL_XRjbirLIRU/Capture13a.PNG?psid=1
Now in Forms you should see your new custom form. Click on the form. You should now be presented with the CustomDisplayForm code. Below are screenshots.
https://nqvora.dm2301.livefilestore.com/y2pSqAFaxD5F-Wai3CM8DPBcSlUVI0AFszXGnS00cUlMZnyOmdmeVP5beV3KDGTQHTxAZPk00jCnCwh9KUe8YVQ4GhGvQgOragFMFCDHegr3VM/Capture13b.PNG?psid=1
https://nqvora.dm2303.livefilestore.com/y2pmcp-xmkWpVQvSH6MqeyfApi6pHId0E0eIoUpH8U51Rmmm_GMtVlLbP5Tl7uHY6gcUDLRTLaXp6TDSRjUdUPEf8CWhXFgDh3Ub_QpZHBxbsE/Capture13c.PNG?psid=1
In the code right-click and choose 'Find…' from the drop-down list. Type in 'gobackbutton1'. Below is what you are looking for. Delete that code. I have also provide a copy of that code below.
<tr>
<td class="ms-toolbar" nowrap="nowrap">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/15/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="Display" id="gobackbutton1"/>
</td>
</tr>
</table>
</td>
</tr>
https://nqvora.dm2303.livefilestore.com/y2pcvA4LMyVsxGUEX5K27UC9ajHOEmdEbx-7Moo0c2eDjkpN29STROI4D5h69D_3246OArmdrVtsAsIK1oWxogk21ruEnVm9rEdZYyMqS5qQSI/Capture13.PNG?psid=1
Again, click Save and then Preview in Browser. Now, you should not see the Close button on the top.
Below is a video which walks you through the process of deleting the top Close button and adding a title.
(Click Here to view a high resolution video)
Edit Item Form
In this section we are going to build the Edit form. In this form we are not going to delete any columns, however, make changes so that some of them cannot be edited. We are also going to remove the Save and Cancel buttons from the top and change the title.
Below is a table which shows which columns can and cannot be edited.
https://nqvora.dm2304.livefilestore.com/y2pMS1SDwE5zf5XRGJYaL498UJ6HXXUTgLt1dwKN8FbrfXVcB8Voqav-2d4WUNmjq4-N976_QvLCCbrGpAGZDMchShqcLIB0gaDrjggB3NFp0g/Capture14.PNG?psid=1
In the CustomEditForm.aspx code, for all the columns we want to setup as read only, we need to replace the Edit code with the Display code i.e. replace the Edit code shown below (both text and screenshot are provided)
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Title<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="Title" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Edit"/>
</td>
</tr>
https://nqvora.dm2303.livefilestore.com/y2pmwDQRJ-rHOcYWP-xII9vJlQCZznJNhm2esEsc0KOCqYj6k-7zuVP4lClKl27ZPq7eCDhjIGjZ56VF5YAFrXWWT1Z4MSb8CjJRGfxXauMdAg/Capture15.PNG?psid=1
With the Display code as shown below (both text and screenshot are provided)
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Title</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<xsl:value-of select="@Title"/>
</td>
</tr>
https://nqvora.dm2303.livefilestore.com/y2pHvzJyfvhx8YzgfiDBHoZ_5k1qyOrcJNdEfeD81hA4lnnRk3_nYTaM677LiBYCUppemuzrSk-qB1ytPql0gZXkPK2xS_qBiJwMd8oK-rOGDA/Capture16.PNG?psid=1
Below is a screenshot of what the Edit view looks like when the Title column has been setup as display only.
https://nqvora.dm2302.livefilestore.com/y2pmFg6D_6PUof2MKRY11Rz7qckZpLHPOmKrtEs9cUbZctFHvLoCJIWkvlLRNZMliL1umPH-9TfYyIug3dfveqh_ScbUx5pquf1LAI9xRxI6YE/Capture17.PNG?psid=1
Below is a video which walks you through the process of editing the edit item form to force some of the fields to be in display mode only. In this video I have first purposefully left the Title column as it is and also copied the code over from the display form to show you both. Then I have made all the changes to only allow the Counselor Comment, Counselor Date and Approved by Counselor fields to be editable.
(Click Here to view a high resolution video)
Conclusion
In this article I have not described the use of the Current Status column that we created. This column is primarily used for workflows i.e. you can use that choice field to setup workflow conditions to perform desired actions.
This article is to provide a quick, easy and little to no-code solution to create custom design forms for a SharePoint list or document library using only SharePoint Designer 2013. Once the custom forms have been built and set as default, it is at your discretion to delete the original three forms.