Recently…while working on one of the project in SharePoint. We had an requirement where we wanted to customize the default SharePoint list display form to show some extra fields like Created , Modified, Created By, Modified By. By default in the display form SharePoint doesn’t provide these fields since these are system field. but the requirement was such that these fields need to be shown on the display form in the same format as the other fields.  the page used to look like this.

The requirement was such that like the fields class,division and student name the created and modified details also should be displayed as a form field on the form. We did following steps to customize the form.

  1. Open the site in SharePoint designer.
  2. Navigate through site objects  List and Libraries >[List Name] and click on the list name.
  3. Once you do that it will take you to the manage page where you can see many web-parts which help us to change a particular property of the list.
  4. Now in the forms section right click on the DispForm.aspx and select “Edit File in Advanced Mode” from the context menu.
  5. This will open the display form for editing. By default SharePoint uses list form web part to show data on to the form. But we can do modification to this web part. so we need to create a new web-part.
  6. For adding a new web-part to the form simple click below the current web-part in any empty div and from the Insert menu under the Data Views and Forms menu click on the Display Item Form choice button. it will connect to the site and will bring you all the list names from the site. Don’t select the list name that you are working on instead select the custom list form option.
  7. It will open a dialog box where in first dropdown box you select the list you are working on. From the radio options slecte the display form and un check the show standard toolbar button.
  8. Once you click on OK a more user friendly form will be created on the form that you are customizing.
  9. For Showing the audit details i.e.Created, Modified, Created By and Modified By values SharePoint uses a user control that is “<SharePoint:CreatedModifiedInfo ControlMode=”Display” runat=”server”/>” and this has a basic template assigned which shows the data in a particular format.
  10. Now to customize this control and to show the data as per our need we need to assign a custom template for this user control this can be done by following way.
  11. <SharePoint:CreatedModifiedInfo ControlMode=”Display” runat=”server”>
    <CustomTemplate>
    ————————<SharePoint:FormField ControlMode=”Display” FieldName=”Author” DisableInputFieldLabel=”true” runat=”server”/>
    ——————————
    <SharePoint:FormField ControlMode=”Display” FieldName=”Created” DisableInputFieldLabel=”true” runat=”server”/>
    ———————————
    <SharePoint:FormField ControlMode=”Display” FieldName=”Editor” DisableInputFieldLabel=”true” runat=”server”  />
    —————————————-
    <SharePoint:FormField ControlMode=”Display” FieldName=”Modified” DisableInputFieldLabel=”true” runat=”server”/>
    ————————————–
    </CustomTemplate>
    </SharePoint:CreatedModifiedInfo>
  12. For our need we just added a tabular structure so the code looks like this.
  13. <SharePoint:CreatedModifiedInfo ControlMode=”Display” runat=”server”>
    <CustomTemplate>
    <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
    <tr>
    <td width=”190px” valign=”top” >
    <H3>
    <nobr>Created By</nobr>
    </H3>
    </td><td width=”400px” valign=”top”><SharePoint:FormField ControlMode=”Display” FieldName=”Author” DisableInputFieldLabel=”true” runat=”server”/>
    </td>
    </tr>
    <tr>
    <td width=”190px” valign=”top” >
    <H3>
    <nobr>Created On</nobr>
    </H3>
    </td><td width=”400px” valign=”top”>
    <SharePoint:FormField ControlMode=”Display” FieldName=”Created” DisableInputFieldLabel=”true” runat=”server”/>
    </td>
    </tr>
    <tr>
    <td width=”190px” valign=”top” >
    <H3>
    <nobr>Modified By</nobr>
    </H3>
    </td><td width=”400px” valign=”top”>
    <SharePoint:FormField ControlMode=”Display” FieldName=”Editor” DisableInputFieldLabel=”true” runat=”server”  />
    </td>
    </tr>
    <tr>
    <td width=”190px” valign=”top” >
    <H3>
    <nobr>Modified On</nobr>
    </H3>
    </td><td width=”400px” valign=”top”>
    <SharePoint:FormField ControlMode=”Display” FieldName=”Modified” DisableInputFieldLabel=”true” runat=”server”/>
    </td>
    </tr>
    </table>
    </CustomTemplate>
    </SharePoint:CreatedModifiedInfo>
  14. The last thing that needs to be done here is to hide the default web-part on the page. this can be done through accessing the page via the in build page editor in SharePoint or from web-part properties in SharePoint designer itself by selecting the hidden property.
  15. The out put looks like this.
  16. Thats it your newly customized display form with all the additional fields.
About these ads