Tag Archive for Page Layout

Hide empty fields on a SharePoint 2013 Page Layout

Nice this is already my second post this month, that doesn’t happen often! This time a little trick to help developers with Custom Page Layouts. I’ve seen quite a few solutions where Custom Page Layouts where used to display content in a sort of Form feel. For instance where all the Content Type fields are rendered with Labels to indicate what the content means. A typical problem with this solution is that whenever you decide to leave the contents of a field empty, still the Label is being rendered. And so is the HTML of the field.

Custom Controls

When searching for a solution lots of BlogPosts pop up about creating a custom ASP control based on the SPSecurityTrimmedControl to manage the rendering like in this Post of Brian Farnhill.

This approach works in an On-Premises environment where moving to the cloud is not an issue. But since I’m a huge fan of Cloud Ready programming I was searching for a different solution.

jQuery for the win

The first open door is to use jQuery on the page for some good ol’ DOM manipulation to make the fields disappear when empty. We can easily work our way through the DOM looking for elements to hide. This is an ok solution but I prefer to have it a little bit more generic. Besides that I took some time to investigate in other Frameworks over jQuery and came across this post:

http://stackoverflow.com/questions/18414012/why-use-angularjs-instead-of-jquery

In short: Libraries and FrameWorks are two different things used for different purposes. Since I’m a fan of data-binding and the abstraction level a framework provides, I decided to use Angular.

Angular for the win

When using Angular this issue can be solved in many ways. I choose to create a controller and applied it to a <div> element that wraps the SharePoint Control that needs hiding. My Page Layouts is looking like this.

Here we have the Display of the Titel Property and a Field calld “DoelGroep” which is a TaxonomyField. Preceding the contents of the Taxonomy field is a label Displaying the DisplayName of the Field.

Wrap the Field

First I have to add the data-ng-app to the top element where all the fields are childs of.
<div class="article-content row" data-ng-app="Empty">

To make sure my Controller works on the specific Fields, I have to wrap those fields with a new HTML element.
<div data-ng-controller="EmptyController"></div>

How my HTML finally looks.

Build the Controller

Now all we have to do is write out the controller. Since we are only wrapping the SharePoint Field that holds content we have to keep in mind to remove its parent since the Label is part of the parent as well.

Edit Mode

Since we don’t want this javascript code to execute when the page is in Edit Mode, we need to add this piece of script to a EditModePanel with DisplayProperties set to View.

That’s it

Just by applying these small changes to the Page Layout (of course make sure AngularJS is loaded). Pretty awesome and practically works with most SP Fields (I haven’t checked them all). Hopefully this will help build a solid solution to deal with empty SharePoint Fields on Page Layouts and is a “cloud ready” solution.