Stripping off HTML markup on custom SharePoint forms

Let me give you a rundown of a fairly common situation for me. In SharePoint (I’m using 2013 – but I’m pretty sure this existed in 2010), I have a list with several people-picker fields. I want to display the selected person from a people-picker so I try doing this:

<xsl:value-of select="@UserField" disable-output-escaping="yes" />

Seems easy, right? Well, that does show the person. However, I also get a bunch of trumped up HTML nonsense. It does things like show the user’s online presence and link to the user’s profile. These are things that are useful approximately 25% of the time when I want to display a user in a custom form, but the other 75% I probably want a plain old, boring, flat text representation of the user’s display name. Is that so much to ask?

Enter a quick and easy jQuery/HTML solution. Step 1: alter the page so that the user is wrapped in a <div> or <td> tag that can be ID-ed by jQuery.

<div id="bchUserField">
  <xsl:value-of select="@UserField" disable-output-escaping="yes" />
</div>

Step 2: add a line of jQuery to the “PlaceHolderAdditionalPageHead” content section. (Not sure how to add jQuery to your page? Or where the “PlaceHolderAdditionalPageHead” is located? More articles to come…)

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
  <script type="text/javascript">
  //<![CDATA[
    $(document.ready(function() {
      $("div#bchUserField").html($("div#bchUserField a.ms-subtleLink").html());
    });
  //]]>
  </script>
</asp:Content>

And that’s it! What it does is quite simple. It replaces the <div> container’s HTML with only the HTML from the link created by SharePoint. Give it a go and let me know how it works for you!

Leave a Reply

Your email address will not be published. Required fields are marked *