我正在尝试在 MSPO 的“创建新项目”页面上创建人员选择器字段。
我一直在使用以下帖子中的脚本在项目详细信息页面中创建人员选择器字段。这非常有效。
Microsoft Project Online 中的人员选取器
现在我尝试在 MSPO 的“创建新项目”页面上创建人员选择器字段。我遇到的问题是 CreateProject.aspx 页面上的所有字段都存在于 iframe 中，因此脚本无法找到所需的“项目赞助商”字段。
我修改了脚本以在指定的 iframe ('iframe.pwa-animate-in') 中查找“项目赞助商”字段，现在它能够找到该字段。但是，当我在控制台中测试我的脚本时，我收到以下错误：
“未捕获类型错误：无法设置未定义的属性（设置‘OnControlResolvedUserChanged’）”
“OnControlResolvedUserChanged”未定义，因为“newPeoplePicker”未定义。 “newPeoplePicker”未定义，因为“SPClientPeoplePickerDict”未定义。
为什么“SPClientPeoplePickerDict”未定义？
提前感谢您的帮助！
<script>
$(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(CustomAction, "sp.js"); });
function CustomAction() {
// Set the following to be an array of fields you would like to change into a people-picker
// Example: var targetFields = ['Custom Field'];
var targetFields = ['Project Sponsor'];
// 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 {
console.log('jQuery loaded');
myJQueryCode();
}
var iframe = document.querySelector('iframe.pwa-animate-in');
console.log('iframe found');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
console.log(innerDoc.body);
if (innerDoc) {
// Now search within the iframe's document using jQuery
var $innerDoc = $(innerDoc); // Wrap the inner document with jQuery
console.log('inner document wrapped with jQuery');
} else {
console.log('Could not access iframe content document.');
}
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');
console.log(scriptRoot + "clienttemplates.js");
console.log(scriptRoot + "clientforms.js");
console.log(scriptRoot + "clientpeoplepicker.js");
console.log(scriptRoot + "autofill.js");
renderPeoplePickers();
})
.fail(function (message) {
window.console && console.error('Loading scripts failed: ' + message);
});
});
}
function renderPeoplePickers() {
console.log('renderPeoplePickers called');
for (var fieldIndex = 0; fieldIndex < targetFields.length; fieldIndex++) {
if (typeof innerDoc == 'undefined') {
$("input[type='text'][title='" + targetFields[fieldIndex] + "']").each(function () {
console.log('Elements found');
this.style.color = "green";
console.log('Color defined');
renderPeoplePicker(this);
window.console && console.log('PeoplePicker rendered: ' + targetFields[fieldIndex]);
});
} else {
$innerDoc.find("input[type='text'][title='" + targetFields[fieldIndex] + "']").each(function () {
console.log('Elements found');
this.style.color = "green";
console.log('Color defined');
renderPeoplePicker(this);
window.console && console.log('PeoplePicker rendered: ' + targetFields[fieldIndex]);
});
}
}
}
function renderPeoplePicker(targetInput) {
console.log(targetInput); // Check what is being logged
var divPeoplePicker = document.createElement('div');
var idPeoplePicker = targetInput.id + '_PeoplePicker';
console.log('idPeoplePicker defined:', idPeoplePicker);
var targetValue = $(targetInput).attr('value');
divPeoplePicker.id = idPeoplePicker;
$(targetInput).parent().append(divPeoplePicker);
initializePeoplePicker(idPeoplePicker);
console.log('this defined:', this);
console.log('SPClientPeoplePicker defined:', SPClientPeoplePicker);
console.log('SPClientPeoplePickerDict defined:', SPClientPeoplePicker.SPClientPeoplePickerDict);
var newPeoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[idPeoplePicker + '_TopSpan'];
console.log('newPeoplePicker defined:', newPeoplePicker);
$(targetInput).hide();
console.log('hide targetInput');
if (typeof targetValue !== "undefined") {
console.log('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 () {
console.log('newPeoplePicker called');
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
// Thank you 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'] = false;
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>
我可以通过将以下步骤添加到 Integent 的初始脚本中来解决此问题 (https://www.youtube.com/watch?v=cR0W4umH8ZU)：
希望这可以帮助遇到此问题的其他人！
<script>
$(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(CustomAction, "sp.js"); });
function CustomAction() {
// Set the following to be an array of fields you would like to change into a people-picker
// Example: var targetFields = ['Custom Field'];
var targetFields = ['Project Sponsor'];
// 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();
}
// Find the iframe
var iframe = document.querySelector('iframe.pwa-animate-in');
// Search within the iframe's document using jQuery
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
// Wrap the inner document with jQuery
var $innerDoc = $(innerDoc);
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++) {
// Ensure that the script will run regardless of whether an iframe exists
if (typeof innerDoc == 'undefined') {
$("input[type='text'][title='" + targetFields[fieldIndex] + "']").each(function () {
this.style.color = "green";
renderPeoplePicker(this);
window.console && console.log('PeoplePicker rendered: ' + targetFields[fieldIndex]);
});
}
else {
$innerDoc.find("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
// Thank you 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'] = false;
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);
}
}
// Wait for the iframe to load
window.onload = function(){
CustomAction();
};
</script>