SharePoint Forms - Improve layout of Field's 'description' to save screen-space and enhance UX

Default Forms in SharePoint leave you with limited choice sometimes when it comes to customization. One such thing is location of fields Description under the control, instead of under fields Title on the left. That's unlike most other system forms in Central Admin or throughout Application Pages. This leaves users with more screen utilization vertically, leaving empty spaces on left. So I think most users do not describe their form fields to keep them usable, while on flip-side it definitely makes forms hard-to-guess for others, particularly so when there are many columns in a list.

Taking example as below, 3 columns have description with them. They could instead be on the left. In this post, I'm giving example how this can be fixed easily...

All forms are rendered by what is called RenderingTemplate. Those can be modified to achieve desired results, such as below.

After changing the default RenderingTemplate, description is located under field heading and screen space is better utilized with 2 new fields appearing (Status, % Complete) within same window size!

How to do it myself?

In .../12/TEMPLATES/CONTROLTEMPLATES/ folder, there are numerous .ascx files, like DefaultTemplates.ascx. Open it in Visual Studio and find for "CompositeField" and "PropertyIterator" (without quotes). These are the two templates responsible for our forms and contain template for rendering the controls in a specific location. We are going to replace them with our own template, BUT we don't want to change system file and render our installation out of MS support. Good thing is, we don't have to... Just create another ascx, say MyTemplates.ascx, and paste following in it. At runtime, after AppPool recycle, SharePoint will override system templates with those custom defined:

<%@ Control Language="C#"   AutoEventWireup="false" %>
<%@Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<%@Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint, 
Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 
namespace="Microsoft.SharePoint.WebControls"%>
<%@Register TagPrefix="SPHttpUtility" Assembly="Microsoft.SharePoint, 
Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 
namespace="Microsoft.SharePoint.Utilities"%>
<%@ Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/
ToolBar.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="ToolBarButton" src="~/_controltemplates/
ToolBarButton.ascx" %>

<SharePoint:RenderingTemplate ID="CompositeField" runat="server">
    <Template>
        <TD nowrap="true" valign="top" width="190px" class="ms-formlabel" ><span>
        <H3 class="ms-standardheader"><SharePoint:FieldLabel runat="server"/></H3></span>
        <span style="background:none;font-weight:normal;">
        <SharePoint:FieldDescription runat="server"/></span></TD>
        <TD valign="top" class="ms-formbody" width="400px">
        <!-- FieldName="<SharePoint:FieldProperty PropertyName="Title" 
            runat="server"/>"
             FieldInternalName="<SharePoint:FieldProperty 
                PropertyName="InternalName" runat="server"/>"
             FieldType="SPField<SharePoint:FieldProperty 
                PropertyName="Type" runat="server"/>"-->
            <SharePoint:FormField runat="server"/>            
            <SharePoint:AppendOnlyHistory runat="server"/>
        </TD>
    </Template>
</SharePoint:RenderingTemplate>
<SharePoint:RenderingTemplate ID="PropertyIterator" runat="server">
    <Template>
        <TR>
        <TD nowrap="true" valign="top" class="ms-authoringcontrols">
            <SharePoint:FieldLabel ID="FieldLabel1" runat="server"/>&nbsp;<br />
            <SharePoint:FieldDescription ID="FieldDescription1" runat="server"/>
        </TD>
        <TD valign="top" class="ms-authoringcontrols">
            <SharePoint:FormField ID="FormField1" runat="server"/>
        </TD>
        </TR>
    </Template>
</SharePoint:RenderingTemplate>

Though you can directly place your MyTemplates.ascx in said folder, I strongly recommend using a Feature or a SharePoint Solution (.wsp) to do so, for maintainability/rollback.

If you are interested in more customizations of default SharePoint Forms, I recommend reading this post.

-- Sharad