Showing names of Site Columns on a Page Layout

FieldProperty control on a Page Layout
It’s pretty easy to display the value of a Site Column on a Page Layout, but how would you display the name of that Site Column?

Building Page Layouts – the content management story

When building public-facing websites one part of the process is crafting Page Layouts. Content editors use Page Layouts to create pages and manage their contents. To be able to do this, Page Layout must contain controls that allow for viewing and editing the contents of a Publishing Page.

Building the editing experience

Each Site Column, based on its type, has an editing control that can be used to view and edit its contents. For the Single line of text Site Column for example you would use the TextField control. The following code snippet would allow content editors to edit the value of the standard Title column:

<SharePointWebControls:TextField FieldName="Title" runat="server" />  

In the Display Mode this control would simply display the value of the Title column but when in Editing Mode it would turn into a Text Box prefilled with the contents of the Title column that content editors could then edit and save.

It’s for display only

If you’re not interested in providing the editing capability and all you want to do is just to display the contents of a Site Column you can use the FieldValue control instead. For example to display the value of the Title column you would use the following code snippet:

<SharePointWebControls:FieldValue FieldName="Title" runat="server"/>  

No matter the page mode that the content editor is in, this control will always display the value of the particular column. Using the FieldValue control is invaluable in scenarios when you don’t use editing in-place or you want to display value of some column that is automatically computed.

Important: The FieldValue control has some limitations and with that it cannot be used for all types of Site Columns. One example are Rich HTML Columns that allow for using Reusable Content and adding Web Parts in content. When displaying the contents of a Rich HTML Column using the FieldValue control both the Reusable Content fragment and the Web Parts would not be displayed. Instead of using the FieldValue control you could use the standard RichHtmlField control instead and set its ControlMode property to Display to force it to display its contents despite the page mode.

Which column am I editing?

When building Page Layouts it’s as important to provide content editors with controls that allow them to manage the contents of the page as much as it is to make it clear which columns those controls refer to. The great thing is that, unless you explicitly disable it, SharePoint automatically adds the column’s label to the corresponding control:

Text Field with an Input Label

Which column am I looking at?

Unfortunately as soon as you leave the Edit Mode, the Input Label is no longer visible and, depending on your Page Layout, it might be difficult to determine which data is displayed where.

Contents of some column displayed on the page, but which column is it?

In most cases when building Page Layouts people include the label for the particular field in text, like:

My Title:<br />  
<SharePointWebControls:TextField FieldName="MyTitle" DisableInputFieldLabel="true" runat="server" />  

As you can imagine this solution is far from perfect. Should the name of the particular column change you would manually have to update all the different Page Layouts in your Site Collection. This situation wouldn’t be much better should you choose to store the column’s label in a Resource File. Even then there would be a disconnect between the label and the name of the Site Column. Luckily there is a better way to display the name of a column on a Page Layout.

Showing names of Site Columns on a Page Layout

SharePoint 2013 provides us with the FieldProperty control that we can use to display the name or other properties of a column. To display the name of a Title field along with its editing control you would use the following snippet:

<SharePointWebControls:FieldProperty FieldName="Title" PropertyName="Title" runat="server" />:<br />  
<SharePointWebControls:TextField FieldName="Title" DisableInputFieldLabel="true" runat="server" />  

By setting the DisableInputFieldLabel property of the editing control to true you prevent the label being displayed twice when in edit mode.

The FieldProperty control uses the SPField.GetProperty method to retrieve the value of the property passed using the PropertyName attribute. Following properties of columns can be retrieved using the FieldProperty control:

Applies to

The great thing about using the FieldProperty control is that it’s visible in all page modes. This is even more important now that SharePoint 2013 allows us to separate the content authoring and publishing experience using the Cross-Site Publishing capability.

Using the FieldProperty control not only allows you to build user-friendly Page Layouts but can also be invaluable for retrieving the information about columns on the current page and passing that information to the SharePoint JavaScript Object Model for further processing.

Summary

When building Page Layouts you can use editing controls to display the contents of a page and allow content editors to edit them. Unfortunately as soon as they leave the edit mode, some of the information such as fields’ labels are no longer visible what makes it more difficult to distinct what information is being displayed on the page. Using the standard FieldProperty control you can include additional information about a column which is visible in all page modes.

Comments

comments powered by Disqus