Disable SharePoint PeopleEditor

SharePoint Short #5
If you have a requirement to disable the PeopleEditor in SharePoint through JavaScript, the following script will do this for you:

function togglePeopleEditor(editor, enable) {
    // Disables the control but still allows the user to type into it.
    editor.attr('disabled', enable ? '' : 'disabled');
 
    // Previous control is div element, used to control the textarea control
    var editorDiv = editor.find('textarea').prev();
 
    // When not enabling, ensure text shown in people picker has been resolved, otherwise clear it
    if (!enable) {
        var entityData = editorDiv.find('#divEntityData');
        if (entityData != undefined) {
            if (entityData.attr('isresolved') == undefined || entityData.attr('isresolved') == 'False') {
                editorDiv.html(' ');
            }
        }
        // Hide any error messages
        editor.find('.ms-error').css('display', 'none');
    }
 
    // Hide any errors from view when the people editor is disabled
    if (!enable) {
        editor.find('.ms-error').css('display', 'none');
    }
 
    // Set text colour to Grey so that the control appears disabled in Firefox
    editorDiv.css('color', enable ? 'windowtext' : 'Grey');
    editorDiv.attr('contentEditable', false);
 
    // Ensure all child span elements display correct text colour and disable or enable content editing
    editorDiv.find('span').each(function () {
        $(this).css('color', enable ? 'windowtext' : 'Grey');
        $(this).attr('contentEditable', enable);
    });
 
    // The following will enable or disable the 'Check Name' and 'Browse' links.
    editor.find('a').attr('disabled', enable ? '' : 'disabled').css('cursor', enable ? 'pointer' : 'default');
    // Toggle the child anchor element event handlers
    editor.find('a').each(function () {
        if (enable) {
            if ($(this).attr('onclick') == null)
                this.onclick = $(this).data('onclick_data'); // Restore previously deleted click event
        }
        else {
            if ($(this).data('onclick_data') == undefined)
                $(this).data('onclick_data', this.onclick); // Store click data before removing the current event
            $(this).removeAttr('onclick');
        }
    });
}

Important aspects of the script are:

  • Setting the contenteditable attribute of the div (id is postfixed _upLevelDiv) that immediately precedes the textarea control to false will disable the control and not allow the user to type directly into it.
  • Removing un-resolved text from the people picker when disabling – this stops validation errors
  • Removing the onclick event handlers when disabled and restoring when re-enabling – this is only required for Firefox as other browsers do not fire the event as the parent control is set to disabled.

It should be noted that the people picker control this script assumes only one user or group, if allowing more you’ll need to update the logic for clearing the content when disabling to handle multiple entities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve the maths problem shown below before posting: *

Follow

Get every new post delivered to your Inbox

Join other followers: