How to make People Picker column Read only in SharePoint 2013

Question

I am trying to make people picker column in my list edit form "Read-only". I found many solutions that worked on SharePoint 2010 but couldn't find a reliable solution for SharePoint 2013/Office 365.

It would be great if someone can point me to a good solution.

Answer 1

To make People picker readonly, you can use the below JQuery code:

$(".sp-peoplepicker-delImage").css({ 'display' : 'none'});
$(".sp-peoplepicker-editorInput").css({ 'display' : 'none'});

You can also apply them with the help of css:

<style>

.sp-peoplepicker-delImage{

display:none;

}
.sp-peoplepicker-editorInput{

display:none;

}

</style>

This is the easiest and fastest way to make people picker fields read only in SharePoint

2013/online, but it will make every people picker field on the form read only. So please let

me know if you want for a specific column.

Answer 2

Since in SharePoint 2013 for rendering List Forms was introduced a new client side rendering engine (called CSR) that is based on JavaScript/HTML i would recommend the following approach. To customize edit form in order to render People Picker in edit form using display mode as explained below.

Steps

1) Create a JavaScript template for rendering People Picker in display mode:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

      Templates: {

           Fields: {
               "AssignedTo": {
                   EditForm: renderAssignedTo
               }
           }
      }

    });
});


function renderAssignedTo(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;   
    return SPFieldUserMulti_Display(ctx);   
}

2)Open Edit Form page in edit mode

3)Place Script Editor web part on the page and insert the specified template by enclosing it using script tag

That's it.

Result ¨