Tag: SharePoint Designer

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

Using jQuery in SharePoint List Form

In my previous post, I showed you how to customize SharePoint List Form using SharePoint Designer.

It’s very common that we need to do the customization using JavaScript Library (e.g. jQuery, jQuery UI, etc.).

1. Download jQuery into a folder

2. Open SharePoint Designer

3. Open Site Assets, then click Import Files

Open Site Assets
Open Site Assets

4. Click Add Folder… to import the jquery folder

Import jQuery Folder
Import jQuery Folder

5. jquery Folder uploaded to Site Assets

jQuery in Site Assets
jQuery in Site Assets

6. Open SharePoint List Form, and enable Advanced Mode editing

7. Reference jQuery library and customization in the PlaceHolderAdditionalPageHead Content Control

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="FormCustomRedirectControl" AllowMultipleControls="true"/>
    <SharePoint:UIVersionedContent UIVersion="4" runat="server"><ContentTemplate>
        <SharePoint:CssRegistration Name="forms.css" runat="server"/>
    </ContentTemplate></SharePoint:UIVersionedContent>
    <script src="../../SiteAssets/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            alert("You are running jQuery version: " + $.fn.jquery);
        });
    </script>
</asp:Content>

Customize SharePoint List Form using SharePoint Designer

Sometimes the out-of-the-box SharePoint List Form won’t fit your requirements. (e.g. Look & Feel, Cascading DropDownList, Validation, etc.)

In this case, we can customize the out-of-the-box List Form using SharePoint Designer.

1. Download & Install SharePoint Designer 2013 and its Service Pack

2. Open SharePoint Designer 2013

3. Open the SharePoint site

4. Open the SharePoint list

Open SharePoint List
Open SharePoint List

5. Create new SharePoint List Form

New SharePoint List Form
New SharePoint List Form

6. Input File Name (e.g. CustomNewForm.aspx), click OK

Create New List Form
Create New List Form

7. Open the new list form

8. Enable Advanced Mode editing to do the customization

Edit SharePoint List Form
Edit SharePoint List Form