SharePoint How to create ASPX Forms (#SPForms)

SharePoint offers a lot of options to create custom list forms like jQuery, SharePoint Designer, InfoPath (last Release) and of course ASPX forms. Regarding the last point i demonstrated a shorter “how to” at the Shareconf 2014 in Düsseldorf and would like to share the idea behind the ASPX Forms in this post.

The ASPX Forms (SPForms) which i mean are based on the use of the rendering templates along with ascx user controls.

AspxForms_6

The rendering template contains all elements which are needed by the listform. You can find the default rendering templates used by SharePoint in the 14 Hive or 15Hive in the controltemplate folder. It is the user control DefaultTemplates.ascx in which you’ll find the “Listform” template. Copy this one and add in your solution the mapped folder for controltemplates. In your user control add the copied template and rename the template id.



<sharepoint:renderingtemplate id="NewForm_Zaehlerstand" runat="server">
<template>
<span id='part1'><h3>Custom New Form</h3>
<sharepoint:informationbar ID="InformationBar1" runat="server"></sharepoint:informationbar>
<div id="listFormToolBarTop">
<wssuc:toolbar CssClass="ms-formtoolbar" id="toolBarTbltop" RightButtonSeparator="&amp;amp;amp;#160;" runat="server">
<template_rightbuttons>
<sharepoint:nextpagebutton ID="NextPageButton1" runat="server"></sharepoint:nextpagebutton>
<sharepoint:savebutton ID="SaveButton1" runat="server"></sharepoint:savebutton>
<sharepoint:gobackbutton ID="GoBackButton1" runat="server"></sharepoint:gobackbutton>
</template_rightbuttons>
</wssuc:toolbar>

</div>
<sharepoint:formtoolbar ID="FormToolBar1" runat="server"></sharepoint:formtoolbar>
<sharepoint:itemvalidationfailedmessage ID="ItemValidationFailedMessage1" runat="server"></sharepoint:itemvalidationfailedmessage>
<table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<sharepoint:changecontenttype ID="ChangeContentType1" runat="server"></sharepoint:changecontenttype>
<sharepoint:folderformfields ID="FolderFormFields1" runat="server"></sharepoint:folderformfields>

<sharepoint:listfielditerator ID="ListFieldIterator1" runat="server"></sharepoint:listfielditerator>

<sharepoint:approvalstatus ID="ApprovalStatus1" runat="server"></sharepoint:approvalstatus>
<sharepoint:formcomponent ID="FormComponent1" TemplateName="AttachmentRows" runat="server"></sharepoint:formcomponent>
</table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="ms-formline"><img src="/_layouts/images/blank.gif" width='1' height='1' alt="" /></td></tr></table>
<table cellpadding="0" cellspacing="0" width="100%" style="padding-top: 7px"><tr><td width="100%">
<sharepoint:itemhiddenversion ID="ItemHiddenVersion1" runat="server"></sharepoint:itemhiddenversion>
<sharepoint:parentinformationfield ID="ParentInformationField1" runat="server"></sharepoint:parentinformationfield>
<sharepoint:initcontenttype ID="InitContentType1" runat="server"></sharepoint:initcontenttype>
<wssuc:toolbar CssClass="ms-formtoolbar" id="toolBarTbl" RightButtonSeparator="&amp;amp;amp;#160;" runat="server">
<template_buttons>
<sharepoint:createdmodifiedinfo ID="CreatedModifiedInfo1" runat="server"></sharepoint:createdmodifiedinfo>
</template_buttons>
<template_rightbuttons>
<sharepoint:savebutton ID="SaveButton2" runat="server"></sharepoint:savebutton>
<sharepoint:gobackbutton ID="GoBackButton2" runat="server"></sharepoint:gobackbutton>
</template_rightbuttons>
</wssuc:toolbar>

</td></tr></table>
</span>
<sharepoint:attachmentupload ID="AttachmentUpload1" runat="server"></sharepoint:attachmentupload>
</template>
</sharepoint:renderingtemplate>


You also should add a register control of the “wssuc” which is needed:
<%@ Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/15/ToolBar.ascx" %>

I also added a h3 tag which indicates that the listform uses my template. In order to use this template, we should connect it to our list. Therefore you can use it by code


SPWeb web = site.RootWeb;
try
{
if (web != null)
{
SPList list = web.GetList(SPUrlUtility.CombineUrl(web.ServerRelativeUrl, "/Lists/listname"));
SPContentType ct = list.ContentTypes[0];
ct.NewFormTemplateName = "RenderingTemplateID";
ct.Update();

or by Powershell



Add-PSSnapin Microsoft.SharePoint.Powershell -ErrorAction SilentlyContinue

$web = Get-SPWeb http://server/sites/sitecollection
$list = $web.Lists["listname"]

$ct = $list.ContentTypes[0]
$ct.NewFormTemplateName = "NewForm_Zaehlerstand"
$ct.Update()
$ct.NewFormTemplateName

$ct.EditFormTemplateName = "EditForm_Zaehlerstand"
$ct.Update()
$ct.EditFormTemplateName


AspxForms_1

After that is working, we now can add more logic. In the rendering template it’s not possible to add code behind. So therefore it’s better to put it into another user control. In the first step, we add a new user control. This user control contains some fields of our list.



<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr><sharepoint:fieldlabel ID="Title" runat="server" FieldName="Title" ></sharepoint:fieldlabel> (Pflichtfeld)</nobr>
</h3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<sharepoint:formfield runat="server" id="fldTitle"  FieldName="Title"></sharepoint:formfield>
<sharepoint:fielddescription runat="server" id="desc_Title" FieldName="Title"></sharepoint:fielddescription>

</td>
</tr>

<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr><sharepoint:fieldlabel ID="Kundennummer" runat="server" FieldName="Kundennummer" ></sharepoint:fieldlabel></nobr>
</h3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<sharepoint:formfield runat="server" id="fldKundennummer"   FieldName="Kundennummer"></sharepoint:formfield>
<sharepoint:fielddescription runat="server" id="desc_Kundennummer" FieldName="Kundennummer" ></sharepoint:fielddescription>

</td>
</tr>

<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr><sharepoint:fieldlabel ID="Zaehlernummer" runat="server" FieldName="Zählernummer"  ></sharepoint:fieldlabel></nobr>
</h3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<sharepoint:formfield runat="server" id="fldZaehlernummer"   FieldName="Zählernummer"></sharepoint:formfield>
<sharepoint:fielddescription runat="server" id="desc_Zaehlernummer" FieldName="Zählernummer" ></sharepoint:fielddescription>

</td>
</tr>

<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr><sharepoint:fieldlabel ID="Zaehlerstand" runat="server" FieldName="Zählerstand"  ></sharepoint:fieldlabel></nobr>
</h3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<sharepoint:formfield runat="server" id="fldZaehlerstand"   FieldName="Zählerstand"></sharepoint:formfield>
<sharepoint:fielddescription runat="server" id="desc_Zaehlerstand" FieldName="Zählerstand" ></sharepoint:fielddescription>

</td>
</tr>

<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr><sharepoint:fieldlabel ID="Ablesedatum" runat="server" FieldName="Ablesedatum"  ></sharepoint:fieldlabel></nobr>
</h3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<sharepoint:formfield runat="server" id="fldAblesedatum"   FieldName="Ablesedatum"></sharepoint:formfield>
<sharepoint:fielddescription runat="server" id="desc_Ablesedatum" FieldName="Ablesedatum" ></sharepoint:fielddescription>

</td>
</tr>


You should map it to your list column names and can define a different styling or structure for your form. I just use the default.

This user control we now reference in the rendering template by just registering the control:



<code class="plain">< %@ Register TagPrefix=</code></code><code class="string">"ShareConf"</code> <code class="plain">TagName=</code><code class="string">"FormFields"</code> <code class="plain">src=</code><code class="string">"~/_controltemplates/15/RC_Fields.ascx"</code> <code class="plain">%> </code>


and then add it in the template itself just before the listfielditerator



<shareconf:formfields ID="Formfields1" runat="server"></shareconf:formfields>


If it is working it should look like this:

AspxForms_2

Now we add a third user control, in which we customize the save button and cancel button behaviour. In this user control we add the following



<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><img SRC="/_layouts/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap">
<sharepoint:savebutton runat="server" ControlMode="New" id="savebutton2"></sharepoint:savebutton>
</td>
<td class="ms-separator">&amp;amp;#160;</td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<sharepoint:gobackbutton runat="server" ControlMode="New" id="gobackbutton2"></sharepoint:gobackbutton>
</td>
</tr>
</table>


And in the code behind, we now can override the save button:



protected override void OnInit(EventArgs e)
{

//In the init method you overrite the event handler for saving with your save button action
base.OnInit(e);
savebutton2.ItemContext.FormContext.OnSaveHandler += new EventHandler(mySaveHandler);
}
//My Save Button Function
protected void mySaveHandler(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid)
{
SPListItem item = SPContext.Current.ListItem;
item["Kundennummer"] = "ShareConf";
item.Update();
}

}


Now we have to reference this user control again in the rendering template and remove the default save buttons (2 per form) with our User Control.

Register Control: <%@ Register TagPrefix="ShareConf" TagName="SaveButtons" src="~/_controltemplates/15/RC_SaveButtons.ascx" %>



< %--<wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbltop" RightButtonSeparator="&amp;amp;amp;#160;" runat="server">
<template_rightbuttons>
<sharepoint:nextpagebutton ID="NextPageButton1" runat="server"></sharepoint:nextpagebutton>
<sharepoint:savebutton ID="SaveButton1" runat="server"></sharepoint:savebutton>
<sharepoint:gobackbutton ID="GoBackButton1" runat="server"></sharepoint:gobackbutton>
</template_rightbuttons>
--%>
<shareconf:savebuttons ID="SaveButtons1" runat="server"></shareconf:savebuttons>


If it is working your item should be saved and add also the value to the other list column.

AspxForms_3

That’s the magic. That could be the starting point for your form strategy in your company. Use style guides, best practices for usability of forms and help your developers to achieve creating custom and nice forms. You now have the full control of your listform cause it is based on aspx.

The negative point is, that it is not possible to use this for Office 365. But if you’re working on On-Premise it might be an interesting starting point. Especially if you’re using forms which should interact with your LOB-systems or should have more features.

Just a quick view on my visual studio project and the controltemplates:

AspxForms_4

Hope you can reuse it.

 

The article or information provided here represents completely my own personal view & thought. It is recommended to test the content or scripts of the site in the lab, before making use in the production environment & use it completely at your own risk. The articles, scripts, suggestions or tricks published on the site are provided AS-IS with no warranties or guarantees and confers no rights.

Karsten Pohnke About Karsten Pohnke
He is Consultant for SharePoint Solutions for collaboration, communication and business processes. He provides his customers applications based on standard features as well as development or combining the power of several microsoft tools like Dynamics CRM. In his free time he tries to collect tipps and worthy experience in this blog.

3 comments on “SharePoint How to create ASPX Forms (#SPForms)

  1. Interesting article. Did you test it on SharePoint 2013 environment or is it supposed to run in SP 2013?

  2. Karsten,

    Good article! I have a comment and a question:

    Comment: The code for referencing the FormFields control on the article has an extra ‘/code’ closing tag, so it’s not formatting correctly.

    Question: Where would be a good place to put the code to connect the template to our list? When I have a feature, I put such code in the Feature Activation. In this case, I don’t know where to put it. Any advice?

    Thanks!

Submit comment

Allowed HTML tags: <a href="http://google.com">google</a> <strong>bold</strong> <em>emphasized</em> <code>code</code> <blockquote>
quote
</blockquote>

Please fill in the captcha: * Time limit is exhausted. Please reload CAPTCHA.