SharePoint 2013 JavaScript 从用户（人）字段中获取价值答案

【问题标题】：SharePoint 2013 JavaScript Get Value from User (people) fieldSharePoint 2013 JavaScript 从用户（人）字段中获取价值
【发布时间】：2015-05-13 15:19:39
【问题描述】：

是否有人成功地从专门用于 SharePoint 2013 的新建或编辑表单中获取用户（个人或组）字段的值？

我已经尝试了通过搜索互联网找到的所有解决方案以及我能想到的所有解决方案，所有这些都导致结果为空白或未定义。

我得到的最接近的来自以下链接，如果有人感兴趣，后者用于设置值，但我无法成功调整它以检索值。

https://jasonscript.wordpress.com/2013/08/07/javascript-and-working-with-the-sharepoint-2013-people-picker/

http://www.sharepointcolumn.com/sp2013-setting-people-picker-value-in-newform-aspx/

我的目标是仅在值为空但无法获取当前值时才设置该值。

查看 DOM 有许多 HTML 元素，它们的属性包含值，但使用 JQuery 检索这些属性会导致空白或未定义。我已经确认我有正确的对象，带有 title 或 id 属性。有一个 HTML 元素，其中 title 属性具有值，但 JQuery 在该特定情况下仍返回空白或未定义。

感谢您提供的任何帮助。

【问题讨论】：

标签： javascript jquery field sharepoint-2013

【解决方案1】：

由于您使用的是 SharePoint 2013，我建议您考虑以下方法。在 SharePoint 2013 中引入了所谓的 Client Rendering Mode (CSR)，它旨在使用 HTML 和 JavaScript 呈现列表视图和表单，并且是一种默认呈现模式。

如何使用 CSR 在新建/编辑表单中初始化用户字段

以下示例演示如何在 New 和 Edit 表单中初始化用户字段（Tasks 列表中的AssignedTo 字段）：

注意：假设用户字段是多值字段

模板代码：

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

      Templates: {
           Fields: {
               "AssignedTo": {
                   EditForm: renderAssignedTo,
                   NewForm: renderAssignedTo
               }
           }
      }

    });

});


function renderAssignedTo(ctx)
{
    var defaultAssigneeTo = {'LoginName': 'i:0#.f|membership|jdoe@contoso.onmicrosoft.com','DisplayName':'John Dow' };


    if(ctx.CurrentFieldValue.length == 0) /* Is user field value empty? */
    { 
        var userEntry = createUserEntity(defaultAssigneeTo.LoginName,defaultAssigneeTo.DisplayName);
        ctx.CurrentFieldValue = [];   //Note: it is assumed the user field is a multi-valued field (!)
        ctx.CurrentFieldValue.push(userEntry);
    }
    return SPClientPeoplePickerCSRTemplate(ctx); 
}

function createUserEntity(loginName,displayName)
{
   return {
      Description: loginName,
      DisplayText: displayName,
      EntityGroupName: "",
      EntityType: "",
      HierarchyIdentifier: null,
      IsResolved: true,
      Key: loginName,
      MultipleMatches: [],
      ProviderDisplayName: "",
      ProviderName: ""
   };
}

如何应用更改

如何应用更改至少有两个选项：

使用JSLink property
通过Script Editor/Content Editor在页面上放置JavaScript模板 Web 部件

以下是使用第二个选项应用更改的方法：

将页面 (NewForm.aspx) 切换到编辑模式
在列表视图 Web 部件的正下方添加 Script Editor webpart。
通过使用script标签代码将指定代码包装到脚本编辑器中，例如：<script type="text/javascript">{Template JS code goes here}</script>
保存页面

结果

图 1. 新建表单页面

参考文献

【讨论】：

【解决方案2】：

我知道我为时已晚，但只是为了帮助其他人在使用默认人员选择器时遇到同样的问题，我在这里记录了我的代码。要在 PeoplePicker 更改事件上调用我们自己的 JavaScript 函数，我们需要在 PeoplePicker 字段上附加 OnUserResolvedClientScript 事件。

$(document).ready(function(){
  SP.SOD.executeFunc("sp.js", "SP.ClientContext", function () {
    SP.SOD.registerSod('clienttemplates.js', SP.Utilities.Utility.getLayoutsPageUrl('clienttemplates.js'));
    SP.SOD.registerSod('clientforms.js', SP.Utilities.Utility.getLayoutsPageUrl('clientforms.js'));
    SP.SOD.registerSod('clientpeoplepicker.js', SP.Utilities.Utility.getLayoutsPageUrl('clientpeoplepicker.js'));
    SP.SOD.executeFunc('clientpeoplepicker.js', "SPClientPeoplePicker", function () {
        GetPeoplePicker('<Field Name>'); //for required field append the fieldName with 'Required Field' text

     });
   });
});

function GetPeoplePicker(fieldName) { 
var controlName = fieldName;     
var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");  
var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']");  
var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];   
spPeoplePicker.OnUserResolvedClientScript = function (peoplePickerId, selectedUsersInfo) {
    console.log('inside OnUserResolvedClientScript:'+ peoplePickerId);
    console.log(selectedUsersInfo);

  };    

  var userInfo = GetUserInfo(spPeoplePicker); 
}

下面是从 PeoplePicker 字段中获取用户的功能

function GetUserInfo(peoplePicker) {
// Get the people picker object from the page.
var userInfo = [];
if (typeof peoplePicker != 'undefined' && peoplePicker !== null) {
    // Get information about all users.
    var users = peoplePicker.GetAllUserInfo();
    userInfo =users;
    for (var i = 0; i < users.length; i++) {
        var user = users[i];            
        //logic for selected users
    }
  }
  return userInfo;
}

快乐编码:)

【讨论】：