SharePoint Custom Form Shows HTML as Text on Lookup Fields

Display forms on SharePoint by default display a link on lookup columns. This allows us to click on the link and edit the record from another list. When creating a custom display form on SharePoint Designer, the form displays the actual HTML instead of rendering the HTML on the lookup columns. For example, see this image:

The form displays text instead of the actual anchor tag. This is because the default output for the XSL transformation is to escape special characters. To address this, we need to modify the XSL template and force the output to render the HTML instead of displaying it as text. This can be done by adding the disable-output-escaping attribute to the xsl:value-of tag.

Open the code view of your form and look for the template that handles the rendering of the fields. Look for the field that has the problem and add the attribute. This is what the tag should look before and after the change:

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

Save your changes and refresh the page. The link should now be displayed as shown below.

Happy coding.