Hide or Show Data Fields in SharePoint List Form

Sometimes, you may want to conditionally hide / show data fields in SharePoint List Form. SharePoint List Form supports XSLT, which can be used to control the data fields visibility.

Example:

Approval Request List
Approval Request List
  • My Approval Request list is used for two level approval.
  • Requester is responsible to select both 1st Approver & 2nd Approver
  • When submitting the request, requester cannot see the following data fields
    • 1st Approval Result
    • 1st Approval Comment
    • 2nd Approval Result
    • 2nd Approval Comment
    • Request Status
  • When 1st Approval, 1st Approver cannot see the following data fields
    • 2nd Approval Result
    • 2nd Approval Comment
  • When 2nd Approval, 2nd Approver can see all data fields

Procedure

1. Open the NewForm.aspx list form

2. Search the 1st Approval Result data field

3. Wrap the table row in a xsl:if block

<xsl:if test="false">
<tr>
  <td width="190px" valign="top" class="ms-formlabel">
    <H3 class="ms-standardheader">
      <nobr>1st Approval Result</nobr>
    </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
    <SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="New" FieldName="_x0031_st_x0020_Approval_x0020_R" __designer:bind="{ddwrt:DataBind('i',concat('ff5',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0031_st_x0020_Approval_x0020_R')}"/>
    <SharePoint:FieldDescription runat="server" id="ff5description{$Pos}" FieldName="_x0031_st_x0020_Approval_x0020_R" ControlMode="New"/>
  </td>
</tr>
</xsl:if>
<xsl:if test="false">
<tr>
  <td width="190px" valign="top" class="ms-formlabel">
    <H3 class="ms-standardheader">
      <nobr>1st Approval Comment</nobr>
    </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
    <SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="_x0031_st_x0020_Approval_x0020_C" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0031_st_x0020_Approval_x0020_C')}"/>
    <SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="_x0031_st_x0020_Approval_x0020_C" ControlMode="New"/>
  </td>
</tr>
</xsl:if>

4. Repeat step 3 for 1st Approval Comment, 2nd Approval Result, 2nd Approval Comment and Request Status data fields

NewForm.aspx

NewForm.aspx

5. Open the EditForm.aspx list form

6. Search the 2nd Approval Result data field

7. Wrap the table row in a xsl:if block

<xsl:if test="@_x0031_st_x0020_Approval_x0020_R != ''">
<tr>
  <td width="190px" valign="top" class="ms-formlabel">
    <H3 class="ms-standardheader">
      <nobr>2nd Approval Result</nobr>
    </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
    <SharePoint:FormField runat="server" id="ff8{$Pos}" ControlMode="Edit" FieldName="_x0032_nd_x0020_Approval_x0020_R" __designer:bind="{ddwrt:DataBind('u',concat('ff8',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0032_nd_x0020_Approval_x0020_R')}"/>
    <SharePoint:FieldDescription runat="server" id="ff8description{$Pos}" FieldName="_x0032_nd_x0020_Approval_x0020_R" ControlMode="Edit"/>
  </td>
</tr>
</xsl:if>
<xsl:if test="@_x0031_st_x0020_Approval_x0020_R != ''">
<tr>
  <td width="190px" valign="top" class="ms-formlabel">
    <H3 class="ms-standardheader">
      <nobr>2nd Approval Comment</nobr>
    </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
    <SharePoint:FormField runat="server" id="ff9{$Pos}" ControlMode="Edit" FieldName="_x0032_nd_x0020_Approval_x0020_C" __designer:bind="{ddwrt:DataBind('u',concat('ff9',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0032_nd_x0020_Approval_x0020_C')}"/>
    <SharePoint:FieldDescription runat="server" id="ff9description{$Pos}" FieldName="_x0032_nd_x0020_Approval_x0020_C" ControlMode="Edit"/>
  </td>
</tr>
</xsl:if>

8. Repeat step 7 for 2nd Approval Comment data fields

EditForm.aspx (1st Approval)
EditForm.aspx (1st Approval)
EditForm.aspx (2nd Approval)
EditForm.aspx (2nd Approval)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s