在本文中,将探讨如何使用Forms Designer 2.8.9版本在SharePoint2013上创建一个自定义表单,并利用JavaScript框架来操作表单中的字段。特别地,将关注如何通过JavaScript框架分配和检索字段值或处理其更改。
首先,需要向列表中添加一个“用户或组”字段,并将其命名为“User”。这是字段的内部名称,稍后将使用它通过JavaScript获取控件。
打开表单设计器,并将用户字段放置到表单上。在属性网格中,会看到一个新选项“Render”。将其设置为“Client”,然后保存表单。
接下来,将展示如何通过JavaScript来管理这个字段。需要注意的是,控件是在页面准备好之后异步加载的。因此,只有在控件完全加载后,才能检索或修改字段值。框架提供了一个“ready”方法,以确保控件已经准备好,并且代码能够成功执行。
以下是一个示例,展示了最常见的操作:
fd.field('User').control('ready', function() {
// 检索值
var selectedUsers = fd.field('User').value();
for (var i = 0; i < selectedUsers.length; i++) {
alert('Login: ' + selectedUsers[i].Key);
}
// 通过显示名称分配值
fd.field('User').value('Tim Watts');
// 通过登录名
fd.field('User').value('DEV\\ann');
// 或者通过电子邮件
fd.field('User').value('AGibson@contoso.com');
// 处理更改事件
fd.field('User').change(function() {
console.log('The User field has been changed.');
var selectedUsers = fd.field('User').value();
for (var i = 0; i < selectedUsers.length; i++) {
// 检查值是否已解析
if (selectedUsers[i].IsResolved) {
console.log('Login: ' + selectedUsers[i].Key +
'\n' +
'Display name: ' + selectedUsers[i].DisplayText +
'\n' +
'E-mail: ' + selectedUsers[i].EntityData.Email);
}
}
});
});
fd.field('User').control('ready', function(picker) {
// 'picker'是SharePoint人员选择器控件的包装器
// 向选定的用户中添加一个用户
picker.AddUserKeys('Ann Ghibson');
});