1

What is the easiest way to disable the people picker in SharePoint 2013 - without resorting to editing the display template in SharePoint designer?

I have tried several JQuery approaches but none of them seem to work.

I have tried the solution suggested here: How to make People Picker column Read only in SharePoint 2013

And while it does work in IE it doesn't seem to work in Chrome, on top of that the delete "X" on the people field pop up if I simply hit F5 in IE.

MY current code:

jQuery(document).ready(function($) {
    $("select[title='Indholdstype']").closest("tr").hide();
    //$(".sp-peoplepicker-delImage").css({ 'display' : 'none'});
    $(".sp-peoplepicker-delImage").prop("onclick", null); 
    $(".ms-dtinput").prop("onclick", null); 
    $(".sp-peoplepicker-editorInput").attr('disabled' , 'disabled');
    $(".sp-peoplepicker-topLevel").attr('disabled' , 'disabled');
    $(".ms-input").attr('disabled' , 'disabled');
});

Any suggestions?

Edit: This is the HTML:

<tr>
        <td width="113" class="ms-formlabel" nowrap="true" valign="top"><h3 class="ms-standardheader">
        <nobr>Byttes med<span title="Dette felt er obligatorisk." class="ms-accentText"> *</span></nobr>
    </h3></td>
        <td width="350" class="ms-formbody" valign="top">
        <!-- FieldName="Byttes med"
             FieldInternalName="ByttesMed"
             FieldType="SPFieldUser"
          -->
            <div dir="none"><div title="Byttes med" class="sp-peoplepicker-topLevel" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker" SPClientPeoplePicker="true"><input name="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_HiddenInput" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_HiddenInput" type="hidden" value='[{"Key":"i:0#.w|nchost\\ncmkl","DisplayText":"Morten","IsResolved":true,"Description":"i:0#.w|nchost\\ncmkl","EntityType":"","EntityGroupName":"","HierarchyIdentifier":null,"EntityData":{"Email":"[email protected]","SPUserID":"2","AccountName":"i:0#.w|nchost\\ncmkl","PrincipalType":"User"},"MultipleMatches":[],"ProviderName":"","ProviderDisplayName":"","Resolved":true}]'><div class="sp-peoplepicker-autoFillContainer" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_AutoFillDiv" style="left: -1px; top: 26px;" InputElementId="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_EditorInput"></div><span class="sp-peoplepicker-initialHelpText ms-helperText" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_InitialHelpText" style="display: none;">Angiv et navn eller en mailadresse...</span><img class="sp-peoplepicker-waitImg" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_WaitImage" alt="Denne animation angiver, at handlingen er i gang. Klik for at fjerne det animerede billede." src="/_layouts/15/images/gears_anv4.gif?rev=23"><span class="sp-peoplepicker-resolveList" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_ResolvedList"><span class="sp-peoplepicker-userSpan" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0" sid="i:0#.w|nchost\ncmkl" resolveduser="true" data-sp-peoplepickerprocesseduser="true"><span class="sp-peoplepicker-userPresence" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0_PresenceContainer"></span><span title="Morten" class="ms-entity-resolved" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0_UserDisplay" style="max-width: 331px;">Morten</span><a title="Fjerne person eller gruppe Morten" class="sp-peoplepicker-delImage" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0_DeleteUserLink" onkeydown="SPClientPeoplePickerProcessedUser.HandleDeleteProcessedUserKey(event); return true;" onclick="SPClientPeoplePickerProcessedUser.DeleteProcessedUser(this.parentNode); return false;" href="#">x</a></span></span><input title="Byttes med" class="sp-peoplepicker-editorInput" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_EditorInput" type="text" size="1" value="" autocorrect="off" autocomplete="off" autocapitalize="off" data-sp-peoplePickerEditor="true" AutoFillContainerId="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_AutoFillDiv"></div></div>



        </td>
</tr>
2
  • you need to disable 1 people picker on your page or all people picker controls on the page?
    – Gaurravs
    Commented Nov 17, 2015 at 11:41
  • In this particular instance there's only one people picker - so either would do :-)
    – Morten K
    Commented Nov 17, 2015 at 12:53

2 Answers 2

1

You could just render them as display fields using CSR:

Examples from code.msdn.microsoft.com

For User and Date fields it will look something like this, but read the article from msdn:

var prepareUserFieldValue = function (ctx) {
    var item = ctx['CurrentItem'];
    var userField = item[ctx.CurrentFieldSchema.Name];
    var fieldValue = "";

    for (var i = 0; i < userField.length; i++) {
        fieldValue += userField[i].EntityData.SPUserID + SPClientTemplates.Utility.UserLookupDelimitString + userField[i].DisplayText;

        if ((i + 1) != userField.length) {
            fieldValue += SPClientTemplates.Utility.UserLookupDelimitString
        }
    }

    ctx["CurrentFieldValue"] = fieldValue;
}

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

  Templates: {
       Fields: {
           "UserFieldInternalName": {
               EditForm: function(ctx) {
                   repareUserFieldValue(ctx);
                   return SPFieldUser_Display(ctx);
               },
               NewForm: function(ctx) {
                   repareUserFieldValue(ctx);
                   return SPFieldUser_Display(ctx);
               }                   
           },
           "DateFieldInternalName": {
               EditForm: function(ctx) {
                    return SPFieldDateTime_Display(ctx);
               },
               NewForm: function(ctx) {
                 return SPFieldDateTime_Display(ctx);  
               }
           }
       }
  }

});
1
  • Thanks for your suggestion - however it seems a little more complicated than I'm looking for. I wouldn't know where to start or end with this approach.
    – Morten K
    Commented Nov 17, 2015 at 12:56
0

You can disable people picker control via below code:

var inputuserfield = $("div[title='People Picker']"); 
var checkNamesImage = $("a[title='Check Names']");  
$(document).ready(function () { 
    inputuserfield.attr("contentEditable", false);
    checkNamesImage.hide();
}

This will disable all people picker controls on your page.

4
  • Thanks but the doesn't seem to work for me? Should I use it exactly like you have written it - or does it containt placeholders?
    – Morten K
    Commented Nov 19, 2015 at 12:04
  • You can use as is. If doesn't work, can you place HTML code part of the control
    – Gaurravs
    Commented Nov 19, 2015 at 12:07
  • I have pasted the HTML of the row in the table that holds the people picker into my original question.
    – Morten K
    Commented Nov 19, 2015 at 12:31
  • sorry, my code wont work on this. It works well in SP 2010
    – Gaurravs
    Commented Nov 23, 2015 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.