0

I am looking for a way to add people picker to Project Online, like the Owner field on the Project Information form. But I want to display all the users from my organizations AD (Office 365 users).

Many articles and SO questions are pointing to this link, https://code.msdn.microsoft.com/sharepoint-2013-use-the-57859f85 , however this link is no longer pointing to any useful resource.

There is no option to add this via Custom Fields in Project online. There is a uservoice feature request created in 2018 but seems like MS did not implement such a common feature.

Any guidance is really appreciated

user3731783
  • 718
  • 1
  • 7
  • 31

2 Answers2

0

I posted an answer to this in my GitHub which can be found here

Essentially you do need to create a custom field but then you add a "Content Editor" to the page (recommended to keep it hidden). Add the path to your Javascript people picker to the content editor. In the Javascript people picker, at the top of the script, there is an array to target custom fields. Replace the text with whatever your field will be called and save. The people picker should work at that time. There are more detailed step by step instructions on the link.

Wesley Blackwell
  • 1
  • 4
0

The following script can be used following this video https://www.youtube.com/watch?v=cR0W4umH8ZU

<script>
//Set the following to be an array of fields you would like to change into a people-picker
//var targetFields = ['Project Sponsor'];
var targetFields = ['Customer Representative','Solution Architect'];

//safely load JQuery
if (typeof jQuery == 'undefined') {
    var s = document.createElement("script");
    s.src = '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
    if (s.addEventListener) {
        s.addEventListener("load", function () { myJQueryCode() }, false);
    } else if (s.readyState) {
        s.onreadystatechange = function () { myJQueryCode() };
    }
    document.getElementsByTagName('head')[0].appendChild(s);
} else {
    myJQueryCode();
}

function myJQueryCode() {
    $(document).ready(function () {
        
        var scriptRoot = _spPageContextInfo.siteAbsoluteUrl + '/_layouts/15/';

        $.when(
                $.getScript(scriptRoot + "clienttemplates.js"),
                $.getScript(scriptRoot + "clientforms.js"),
                $.getScript(scriptRoot + "clientpeoplepicker.js"),
                $.getScript(scriptRoot + "autofill.js")
            )
            .done(function () {
                window.console && console.log('Scripts loaded');
                renderPeoplePickers();
                
            })
            .fail(function (message) {
                window.console && console.error('Loading scripts failed: ' + message);
            });
    });
}

function renderPeoplePickers() {
    for (fieldIndex = 0; fieldIndex < targetFields.length; fieldIndex++) {
        $("input[type='text'][title='" + targetFields[fieldIndex] + "']").each(function () {
            this.style.color = "green";
            renderPeoplePicker(this);
            window.console && console.log('PeoplePicker rendered: ' + targetFields[fieldIndex]);
        });
    }
}

function renderPeoplePicker(targetInput) {
    var divPeoplePicker = document.createElement('div');
    var idPeoplePicker = targetInput.id + '_PeoplePicker';
    var targetValue = $(targetInput).attr('value');
    
    
    divPeoplePicker.id = idPeoplePicker;
    $(targetInput).parent().append(divPeoplePicker);

    initializePeoplePicker(idPeoplePicker);
    var newPeoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[idPeoplePicker + '_TopSpan'];
    $(targetInput).hide();

    if (typeof targetValue !== "undefined") {
        var selectedUsers = targetValue.split(";");
            for(i=0;i<selectedUsers.length;i++){
                if(selectedUsers[i] && selectedUsers[i] != "") {
                    newPeoplePicker.AddUnresolvedUser({
                    Key: selectedUsers[i],
                    DisplayText: selectedUsers[i]
                }, true);
            }
        }
    }

    newPeoplePicker.OnControlResolvedUserChanged = function () {
        if (this.TotalUserCount > 0) {
            var fieldVal = '';
            for(i=0;i<this.GetAllUserInfo().length;i++) {
            //we have a resolved user
                var resolvedUser = this.GetAllUserInfo()[i];
                fieldVal = fieldVal + resolvedUser.DisplayText + ";";
            }

            //Set the underlying field value
            $('input#' + (this.TopLevelElementId.split("_PeoplePicker_TopSpan")[0])).attr('value', fieldVal);

            //If value has changed then mark the PDP dirty to enable save
            //Thankyou to Martin Laukkanen (nearbaseline.com) for this fix!
            if ($('input#' + (this.TopLevelElementId.split("_PeoplePicker_TopSpan")[0])).attr('origvalue') !== $('input#' + (this.TopLevelElementId.split("_PeoplePicker_TopSpan")[0])).attr('value')) {
                WPDPParts[0].IsDirty = true;
            }
        } else {
            //we have nothing - so clear out the target field
            $('input#' + (this.TopLevelElementId.split("_PeoplePicker_TopSpan")[0])).attr('value', '');
        }
    }

}

// Render and initialize the client-side People Picker.
function initializePeoplePicker(peoplePickerElementId, defaultValue) {

    var users;
    if ((defaultValue != undefined) && (defaultValue != "")) {
        users = new Array(1);
        var defaultUser = new Object();
        defaultUser.AutoFillDisplayText = defaultValue;
        defaultUser.AutoFillKey = defaultValue;
        //defaultUser.Description = user.get_email();
        defaultUser.DisplayText = defaultValue;
        defaultUser.EntityType = "User";
        defaultUser.IsResolved = false;
        defaultUser.Key = defaultValue;
        defaultUser.Resolved = false;
        users[0] = defaultUser;
    } else {
        users = null;
    }

    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User';
    //schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = true;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '360px';

    // Render and initialize the picker. 
    // Pass the ID of the DOM element that contains the picker, an array of initial
    // PickerEntity objects to set the picker value, and a schema that defines
    // picker properties.
    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, users, schema);
}

</script>

Source: https://www.epmpartners.com.au/wp-content/uploads/2017/10/PdpPeoplePicker_Info.js

PeteT
  • 1