Display column titles in custom list forms

SharePoint never really caeses to surprise me, especially when I happen to find out some hidden gems I didn't know existed. This time the hidden treasure is called FieldProperty.
Citing the MSDN, the <SharePoint:FieldProperty> control is a FormComponent control that lives under the Microsoft.SharePoint.WebControls namespace and represents a property of a field, that is a column, on a list.
The value of this little control may not be immediately apparent, but I think you will appreciate its usefulness once I'll have showed you the role it plays in a very common scenario like the one described below.

As you surely know, in SharePoint Designer you can create custom forms (Display, Edit, New) for a list, going to List and Libraries > your list > Forms > New.


Once created, you can customize the form by right clicking on its name and selecting Edit File in Advanced Mode. If you  look at the generated code, you'll notice the DataFormWebPart along with the xslt code. Let's concentrate on the dvt_1.rowview template, which holds the html definition of the form table (the default rendering of a form).
Here's the rendered html in SharePoint Designer:


And here's an extract of the corresponding code:
<xsl:template name="dvt_1.rowview">
 <tr>
  <td>
   <table border="0" cellspacing="0" width="100%">
    <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>
    <tr>
     <td width="190px" valign="top" class="ms-formlabel">
      <H3 class="ms-standardheader">
       <nobr>Choice</nobr>
      </H3>
     </td>
     <td width="400px" valign="top" class="ms-formbody">
      <xsl:value-of select="@Choice"/>
     </td>
    </tr>
    <tr>
     <td width="190px" valign="top" class="ms-formlabel">
      <H3 class="ms-standardheader">
       <nobr>Some column title</nobr>
      </H3>
     </td>
     <td width="400px" valign="top" class="ms-formbody">
      <xsl:value-of select="@Info1"/></td>
    </tr>
   </table>     
  </td>
 </tr>
</xsl:template>

Can you spot the problem?
The column titles are hard-coded, meaning that whenever you change them, you'll have to edit the form and change the titles accordingly. Moreover, if your site supports multiple languages, and you had the diligence to translate the column titles to each language, your users won't be able to see them in their preferred language.
Here comes into play the <SharePoint:FieldProperty> control. It has two properties of interest: FieldName, used to specify the field internal name, and PropertyName, which is the property of the underlying SPField object that you want to show. In our case, we want to show the Title property of each column. So, let's amend the xslt code so that it looks like:
<xsl:template name="dvt_1.rowview">
 <tr>
  <td>
   <table border="0" cellspacing="0" width="100%">
    <tr>
     <td width="190px" valign="top" class="ms-formlabel">
      <H3 class="ms-standardheader">
       <SharePoint:FieldProperty runat="server" ControlMode="Display" FieldName="Title" PropertyName="Title"></SharePoint:FieldProperty>
      </H3>
     </td>
     <td width="400px" valign="top" class="ms-formbody">
      <xsl:value-of select="@Title"/>
     </td>
    </tr>
    <tr>
     <td width="190px" valign="top" class="ms-formlabel">
      <H3 class="ms-standardheader">
       <SharePoint:FieldProperty runat="server" ControlMode="Display" FieldName="Choice" PropertyName="Title"></SharePoint:FieldProperty>
      </H3>
     </td>
     <td width="400px" valign="top" class="ms-formbody">
      <xsl:value-of select="@Choice"/>
     </td>
    </tr>
    <tr>
     <td width="190px" valign="top" class="ms-formlabel">
      <H3 class="ms-standardheader">
       <SharePoint:FieldProperty runat="server" ControlMode="Display" FieldName="Info1" PropertyName="Title"></SharePoint:FieldProperty>
      </H3>
     </td>
     <td width="400px" valign="top" class="ms-formbody">
      <xsl:value-of select="@Info1"/></td>
    </tr>
   </table>     
  </td>
 </tr>
</xsl:template>

Let's save and test the form.
Here is the rendered form in the site default language (English):


You can see the column titles are correctly displayed. And here's the same page when the site secondary language (Italian) is chosen:


The column titles are nicely translated.


Post a Comment

back to top