Sharepoint 2013: customize list item detail view via DispForm.aspx (hide columns, render HTML)

If you have some special columns in a sharepoint list where you would like adapt the way that they are shown in the detail view, the following code can help (You need enough permissions on your sharepoint, and must use Sharepoint Designer for this.) The codesnippet shows you:

  • how to hide some columns
  • how to render the HTML in a calculated column as real HTML (NOT very proper, but it works…)

In Sharepoint Designer, open your site, go to the Lists and Libraries and open your list. In the “Forms” box, open your DispForm.aspx

Once you’re in the editor, look for the <asp:Content ContentPlaceHolderId=”PlaceHolderAdditionalPageHead” runat=”server”> element. Now just place the following javascript inside that element and adapt it to your needs.

<script language=”javascript” type=”text/javascript”>
_spBodyOnLoadFunctionNames.push(“myCustomFunction”);

function myCustomFunction() {
//Hide some fields
$(“h3.ms-standardheader:contains(‘MyColumnToHide1’)”).closest(“tr”).hide();
$(“h3.ms-standardheader:contains(‘MyColumnToHide2’)”).closest(“tr”).hide();
//properly display HTML links*/
var html= $(“h3.ms-standardheader:contains(‘MyCalcHtmlColumn’)”).closest(“td”).next(“td”).text().trim() + “>”;
$(“h3.ms-standardheader:contains(‘MyCalcHtmlColumn’)”).closest(“td”).next(“td”).html(html);

</script>