SharePoint People Picker won’t display without description

SharePoint 2013 dilemma of the day: on my custom edit form, I cannot get my people pickers to show up without their description. The quick and easy way to fix this is to erase the column description in the list settings, but in this case, I really want that description on some forms, just not on my custom edit form.

Once again, it’s jQuery to the rescue! Here’s a simple approach to hide that blasted description.

Step 1: wrap your people picker field in a <div> or <td> tag (<span> doesn’t seem to work because SharePoint’s HTML markup stomps all over it). Give the wrapper tag a distinguishable ID for the sake of jQuery.

<div id="bchUserField">
  <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="UserField" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@UserField')}"/>
</div>

Step 2: add this simple line of jQuery to the “PlaceHolderAdditionalPageHead” content section.

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
  <script type="text/javascript">
  //<![CDATA[
    $(document).ready() {
      $("div#bchUserField tr:eq(3)").hide();
    });
  //]]>
  </script>
</asp:Content>

And we’re done.

For a bit more advanced jQuery… let’s say I have multiple user fields and I want all their descriptions hidden. I employ approximately the same method, only I use a class instead of an ID for the wrapper tag. It looks a little more like this:

<table>
  <tr>
    <td>User Field 1:</td>
    <td class="bchUserFieldClass"><SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="UserField1" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@UserField1')}"/></td>
  </tr>
  <tr>
    <td>User Field 2:</td>
    <td class="bchUserFieldClass"><SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="Edit" FieldName="UserField2" __designer:bind="{ddwrt:DataBind('u',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@UserField2')}"/></td>
  </tr>
</table>

And the jQuery gets modified to target the class instead of the single ID.

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
  <script type="text/javascript">
  //<![CDATA[
    $(document).ready() {
      $("td.bchUserFieldClass tr:eq(3)").hide();
    });
  //]]>
  </script>
</asp:Content>

Pretty simple, eh? So simple, in fact, I didn’t even test it. Anybody spot any errors? Comment below!

Leave a Reply Cancel reply