jquery - Sharepoint 2013 - EditForm，人员选择器新值不保存

Question

我使用下面的代码在人员选择器中添加值。该代码在 NewForm.aspx 中运行良好。但是当我在 EditForm.aspx 中编辑人员选择器时，它不会采用新值。它仅保存旧值。

function SetNewPeoplePicker(controlName, Username) {
var ppDiv = jQuery("[id$='ClientPeoplePicker'][title='" + controlName + "']");      
var ppEditor = ppDiv.find("[title='" + controlName + "']"); 
var spPP = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv[0].id];          
ppEditor.val(Username);                 // Set the value
spPP.AddUnresolvedUserFromEditor(true);                 // Resolve the User if (!spPP.HasInputError) 
{
        var userKeys = spPP.GetAllUserInfo();
        var myUser = userKeys[0];
        Manager = myUser.AutoFillDisplayText;
}
spPP.SetEnabledState(false);
jQuery('a.sp-peoplepicker-delImage').hide();

}

我读到我们必须将 Web 部件属性更改为“服务器渲染”。但是整个 UI 发生了变化，我用 JS 为其他字段编写的代码失败了。

任何人都可以提供解决方案吗？

Answer 1

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

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

下面的示例演示了如何在新建和编辑表单中初始化用户字段(任务列表中的AssignedTo字段):

模板代码:

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'AssignedTo': {
            'NewForm': renderPeoplePickerWithDefaultValue,
            'EditForm': renderPeoplePickerWithDefaultValue
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();

function renderPeoplePickerWithDefaultValue(ctx) {
     //1.set user field value
     var loginName = String.format('i:0#.f|membership|{0}',_spPageContextInfo.userLoginName);  //set to current user login name
     var displayName = $('div#SuiteNavUserName').text();   //set to current user display name 
     var userEntry = createUserEntity(loginName,displayName);
     ctx.CurrentFieldValue = [];   //Note: it is assumed the user field is a multi-valued field (!)
     ctx.CurrentFieldValue.push(userEntry);
     //2.render default People Picker  
     return SPClientPeoplePickerCSRTemplate(ctx); 
}

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

P.S.: in the specified example AssignedTo field is set to current user, in order to specify another user, modify loginName and displayName parameters.

P.P.S. The example has been tested in SharePoint Online

如何应用更改

至少有两种应用更改的选项:

1. 使用 JSLink property
2. 通过 Script Editor 将 JavaScript 模板放置在页面上/Content Editor网络部件

以下是如何使用第二个选项应用更改:

1. 将页面 ( NewForm.aspx ) 切换到编辑模式
2. 添加Script Editor Web 部件位于 ListView Web 部件正下方。
3. 通过使用 script 包装指定的代码来放置它将代码标记到脚本编辑器中，例如:<script type="text/javascript">{Template JS code goes here}</script>
4. 保存页面

结果

引用文献

• INTRODUCTION TO CLIENT-SIDE RENDERING IN SHAREPOINT 2013
• SharePoint 2013 Client Side Rendering: List Views