Showing required fields when editing a page in SharePoint 2013

When editing a Publishing Page, SharePoint does not give you a visual reference to the required field(s) on this page until the moment you try to save the page. Only then SharePoint will show you which field(s) must contain data.
In this article i will show you a solution which makes it possible to show all required field(s) on the page.

 

Content editors use Page Layouts to create pages and manage their content. To be able to do this, Page Layouts must contain controls that allow for viewing and editing the contents of a Publishing Page. But knowing which of the content fields on the page are required is practically impossible, since SharePoint does not show any visual reference to the required content fields. This problem can be easily solved by adding a little JavaScript and jQuery to the Page Layout.

Get references

First we must edit the Page Layout and reference the jQuery library from the jQuery CDN:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

To see all available files and versions, visit http://code.jquery.com

Second we need to create a custom JavaScript file that will hold our custom code. In this example i have created the JavaScript file in the Style Library on my SharePoint site:

<script type="text/javascript" src="/style%20library/mdv/authoring/mdv-editing.js"></script>

Now put both references in the ContentPlaceHolder which is named PlaceHolderAdditionalPageHead and make sure it is in the EditModePanel. Doing this will make sure that the custom JavaScript file will only be loaded when the page is being edited.

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
    <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
    <PublishingWebControls:EditModePanel runat="server">
        <!-- Styles for edit mode only-->
        <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>" After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
        <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/mv/css/rte.css %>" After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>" runat="server"/>
        <script type="text/javascript" src="//code.jquery.com/ajax/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="/style%20library/mdv/authoring/mdv-editing.js"></script>
    </PublishingWebControls:EditModePanel>
</asp:Content>

Note: If you have already referenced jQuery in your masterpage then you do not need to register it again in the Page Layout.

Acquire all required fields of the listitem

Following is the JavaScript code to get the required fields of the page (SPListItem). First an instance is created of the client context object, which is used to access the SharePoint object model. Next the pages library of the current web is requested and the current page is requested by ti’s pageItemId. Iterating through all fields in the SPListItem makes it possible to get the ‘Required’ field attribute which then can be evaluated.

showRequiredFields = function() {
    var context = new SP.ClientContext();
    var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId);
    var item = list.getItemById(_spPageContextInfo.pageItemId);
    fieldCollection = item.get_contentType().get_fields();
    
    context.load(fieldCollection);
    context.executeQueryAsync(Function.createDelegate(this, success), Function.createDelegate(this, failed));
        
    function success() {
        var fe = fieldCollection.getEnumerator();
        while (fe.moveNext()) {
            var field = fe.get_current();
            var xmlSchemaString = field.get_schemaXml();
            var fieldXml = $.parseXML(xmlSchemaString);
            var fieldElement = fieldXml.getElementsByTagName('Field')[0];            
            var required = fieldElement.getAttribute('Required');
        }
    }
                
    function failed(sender, args) {
        console && console.log('failed. Message:' + args.get_message());
    }
}

Give a visual reference to the content editor

Now that we have found all the required fields on the page through code, it would be nice to give the content editor a visual reference of those required fields. This piece of code adds an asterisk (*) to the field label:

if (required != null && fieldElement.getAttribute('Required').toLowerCase() === 'true') {
    var displayName = fieldElement.getAttribute('DisplayName');
    $("[title='" + displayName +"']").closest('tr').children('td.ms-formlabel').append('<span class="mandatory"> *</span>');
    occurences++;
}

The experience for the content editor would look like this:

As a little extra i have added some code to check if there are any required fields on the page. If so, i also include a legend which gives a meaningful explanation to the asterisk (*)

Full code:

showRequiredFields = function() {
    var context = new SP.ClientContext();
    var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId);
    var item = list.getItemById(_spPageContextInfo.pageItemId);
    fieldCollection = item.get_contentType().get_fields();
    
    context.load(fieldCollection);
    context.executeQueryAsync(Function.createDelegate(this, success), Function.createDelegate(this, failed));
        
    function success() {
        var occurences = 0;
        var fe = fieldCollection.getEnumerator();
        while (fe.moveNext()) {
            var field = fe.get_current();
            var xmlSchemaString = field.get_schemaXml();
            var fieldXml = $.parseXML(xmlSchemaString);
            var fieldElement = fieldXml.getElementsByTagName('Field')[0];
            
            var required = fieldElement.getAttribute('Required');
            if (required != null && fieldElement.getAttribute('Required').toLowerCase() === 'true')
            {
                var displayName = fieldElement.getAttribute('DisplayName');
                $("[title='" + displayName +"']").closest('tr').children('td.ms-formlabel').append('<span class="mandatory"> *</span>');
                occurences++;
            }
        }
        
        if (occurences > 0) {
            $('#DeltaPlaceHolderMain').prepend('<style>.mandatory { color: red;} .right { float: right;}</style><span class="mandatory right" title="mandatory">* = required</span>');
        }
    }
                
    function failed(sender, args) {
        console && console.log('failed. Message:' + args.get_message());
    }
}

 

Summary

When editing a Publishing Page, SharePoint does not give you a visual reference to the required field(s) on this page until the moment you try to save the page. By inserting a little piece of JavaScript you can enrich the user experience of the content editor by showing the required fields on the page.

References

How to: Complete basic operations using JavaScript library code in SharePoint 2013: http://msdn.microsoft.com/en-us/library/office/jj163201(v=office.15).aspx

Originally posted at http://blog.marnixdevrije.nl/showing-required-fields-editing-page-sharepoint-2013/