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":"mkl@nordiccomputer.dk","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>
  • you need to disable 1 people picker on your page or all people picker controls on the page? – Gaurravs Nov 17 '15 at 11:41
  • In this particular instance there's only one people picker - so either would do :-) – Morten K Nov 17 '15 at 12:53
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);  
               }
           }
       }
  }

});
  • 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 Nov 17 '15 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.

  • 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 Nov 19 '15 at 12:04
  • You can use as is. If doesn't work, can you place HTML code part of the control – Gaurravs Nov 19 '15 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 Nov 19 '15 at 12:31
  • sorry, my code wont work on this. It works well in SP 2010 – Gaurravs Nov 23 '15 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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