Restoring white space characters to a multi-line plain text field in SharePoint

Multi-line plain text, why won’t you render the way I want you to? Another day, another SharePoint frustration. Another day, another simple jQuery fix!

I’ve got a SharePoint 2013 form with about 40 multi-line plain text columns that need to be displayed in a custom display form. I built the form using simple <xsl:value-of /> tags. But the problem with plain text is that it doesn’t nicely format in HTML. Specifically, you lose your line breaks as well as any grouping of consecutive spaces. In addition, SharePoint loves to escape the ampersands used to escape special characters. You end up with output that looks like this:

Why does SharePoint insist on escaping my "quotes"?

There is a SharePoint template function called ddwrt:AutoNewLine() that will restore the white space, but it does something that is terrible. It replaces consecutive spaces with the non-breaking space character code ( ) but omits the semicolon at the end of the code. So, when I had a user enter “Target Date 6-Oct”, it translated it as “Target Date &#160&#1606-Oct”. My user was awfully confused when she saw “Target Date ن-Oct”, especially since she couldn’t remember entering anything in Arabic.

Ready for the common theme? Time to fix it with jQuery!

Step 1: wrap your muti-line text fields in a <div> or <td> or <span> tag and give them all the same class (I’m assuming you’re going to want to do this for a bunch of fields).

<div class="bchMultiLineClass">
  <xsl:value-of select="@MultiLineField1" disable-output-escaping="yes" />
</div>
<div class="bchMultiLineClass">
  <xsl:value-of select="@MultiLineField2" disable-output-escaping="yes" />
</div>

Step 2: Add a couple of lines of jQuery to your “PlaceHolderAdditionalPageHead” content section.

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
  <script type="text/javascript">
  //<![CDATA[
    $(document.ready(function() {
      $(".bchMultiLineClass").each(function() {
        $(this).html($(this).html().replace(/(?:\r\n|\r|\n)/g, "<br />\r\n").replace(/ /g, " &#160;").replace(/&amp;/g, "&"));
      });
    });
  //]]>
  </script>
</asp:Content>

What does it do? Well, it iterates through each element assigned the “bchMultiLineClass” class to reset its HTML content. It replaces three things. First, it replaces any variation of new line with an HTML line break code and a Windows-style carriage return/new line (this helps keep the source looking pretty, if you’re into that). Second, it replaces any occurrence of consecutive spaces with a single space followed by the non-breaking space character code. Third and finally, it un-escapes escaped ampersands, causing the underlying character to render properly in the browser.

Now my users get expected results and I can continue to use multi-line plain text fields. Never again will I be forced to see 20-point, red, Comic Sans-faced text in the middle of my beautiful, meticulously-crafted form.

Leave a Reply Cancel reply