【发布时间】：2018-08-31 05:33:01
【问题描述】：
是否有人有一些在 JavaScript 中工作的“样板”代码，可以从 SharePoint 用户配置文件中拉回当前用户及其经理？我更喜欢使用 Rest API，但任何能获取我的数据的东西都会很棒。
我想在用户首次加载页面时使用 Office 365 SharePoint 托管加载项中的用户配置文件来填充 3 个人员选取器控件（请求者、收款人和经理）。所有这些人都可以从我们的 SharePoint 租户中当前用户的个人资料信息中检索到，但每次我尝试获取该信息时，都会遇到禁止或权限问题。我是我们网站的 SharePoint 管理员，并在应用程序的 AppManifest.xml 中添加了读取权限。
<AppPermissionRequests>
<AppPermissionRequest Scope="http://sharepoint/content/tenant" Right="Read" />
</AppPermissionRequests>我在下面给出了使人员选取器在 html 页面中工作的 JavaScript 代码和 html，但要运行它，您需要使用 jQuery 和 Bootstrap 创建一个 SharePoint 托管加载项。注意：这不是一个 ASP.Net 页面，而是一个 html 页面。 提前感谢您对此问题的任何帮助。
// Run your custom code when the DOM is ready.
$(document).ready(function () {
// Specify the unique ID of the DOM element where the
// picker will render.
initializePeoplePicker('requestorDiv');
initializePeoplePicker('payeeDiv');
initializePeoplePicker('managerDiv');
});
// Render and initialize the client-side People Picker.
function initializePeoplePicker(peoplePickerElementId) {
// Create a schema to store picker properties, and set the properties.
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = true;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '280px';
// 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, null, schema);
}
// Query the picker for user information.
function getUserInfo(person) {
// Get the people picker object from the page.
var peoplePicker = null;
switch (person.toLowerCase()) {
case 'requestor':
peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.requestorDiv_TopSpan;
break;
case 'payee':
peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.payeeDiv_TopSpan;
break;
case 'manager':
peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.managerDiv_TopSpan;
break;
}
// Get information about all users.
var users = peoplePicker.GetAllUserInfo();
//start new process
var userInfo = '';
var fullName = "";
var email = "";
for (var i = 0; i < users.length; i++) {
var user = users[i];
var firstName = "";
var middleInitial = "";
var lastName = "";
var rawName = user['DisplayText'];
var count = rawName.split(' ').length;
rawName = rawName.split(' ');
firstName = rawName[1];
lastName = rawName[0];
fullName = firstName + " " + lastName;
if (count == 3) {
middleInitial = rawName[2];
fullName = firstName + " " + middleInitial + " " + lastName;
}
for (var userProperty in user) {
userInfo += userProperty + ': ' + user[userProperty] + '<br>';
if (userProperty == 'Description') {
email = user[userProperty].toLowerCase();
}
}
}
$('#resolvedUsers').html(userInfo);
$('#email').html(email);
$('#fullName').html(fullName);
$('#username').html(fullName);
$('#usertype').html(person);
switch (person.toLowerCase()) {
case 'requestor':
$('#input-requestor').val(fullName);
$('#requestorEmail').text(email)
break;
case 'payee':
$('#input-payee').val(fullName);
$('#payeeEmail').text(email)
break;
case 'manager':
$('#input-manager').val(fullName);
$('#managerEmail').text(email)
break;
}
// Get user keys.
var keys = peoplePicker.GetAllUserKeys();
$('#userKeys').html(keys);
// Get the first user's ID by using the login name.
getUserId(users[0].Key);
}
// Get the user ID.
function getUserId(loginName) {
var context = new SP.ClientContext.get_current();
this.user = context.get_web().ensureUser(loginName);
context.load(this.user);
context.executeQueryAsync(
Function.createDelegate(null, ensureUserSuccess),
Function.createDelegate(null, onFail)
);
}
function ensureUserSuccess() {
$('#userId').html(this.user.get_id());
}
function onFail(sender, args) {
alert('Query failed. Error: ' + args.get_message());
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/corev15.css" />
<style>
.modal-title{
font-weight: bold;
font-size: large;
}
</style>
</head>
<body class="container-fluid">
<br />
<form class="form">
<div class="row">
<div class="col-md-2 text-left"><label for="input-requestor" class="topic">Requestor: <i class="text-danger"><strong>*</strong></i> </label></div>
<div class="col-md-2 text-left"><label for="input-payee" class="topic">Payee: <i class="text-danger"><strong>*</strong></i> </label></div>
<div class="col-md-2 text-left"><label for="input-manager" class="topic">Manager: <i class="text-danger"><strong>*</strong></i> </label></div>
</div>
<div class="row">
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control" readonly="readonly" placeholder="Person filling out form" id="input-requestor" />
<span class="input-group-btn">
<a class="btn btn-default" data-toggle="modal" data-target="#peopleModal" data-person="Requestor">
<i class="glyphicon glyphicon-user" aria-hidden="true"></i>
</a>
</span>
<input id="requestorEmail" hidden="hidden" />
</div>
</div>
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control" readonly="readonly" placeholder="Person getting reimbursement" id="input-payee">
<span class="input-group-btn" title="Get payee">
<a class="btn btn-default" data-toggle="modal" data-target="#peopleModal" data-person="Payee"><i class="glyphicon glyphicon-user"></i> </a>
</span>
<input id="payeeEmail" hidden="hidden" />
</div>
</div>
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control" readonly="readonly" placeholder="Approving manager" id="input-manager">
<span class="input-group-btn">
<a class="btn btn-default" data-toggle="modal" data-target="#peopleModal" data-person="Manager"><i class="glyphicon glyphicon-user"></i> </a>
</span>
<input id="managerEmail" hidden="hidden" />
</div>
</div>
</div><!--end of row one-->
</form>
<div class="modal fade" id="peopleModal" tabindex="-1" role="dialog" aria-labelledby="peopleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="peopleModalLabel">New message</h3>
<a class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
<div class="modal-body">
<form>
<div id="requestorDiv"></div>
<div id="payeeDiv"></div>
<div id="managerDiv"></div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="okModalButton" type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<script src="../Scripts/jquery-3.3.1.min.js"></script>
<script src="../Scripts/tether.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/1033/initstrings.js"></script>
<script type="text/javascript" src="/_layouts/15/1033/strings.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.UI.Controls.js"></script>
<script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script>
<script type="text/javascript" src="/_layouts/15/clientforms.js"></script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>
<script type="text/javascript" src="/_layouts/15/autofill.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/core.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.Core.JS"></script>
<script type="text/javascript" src="../Scripts/App.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#peopleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('person'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
switch (recipient.toLowerCase()) {
case 'requestor':
$("#requestorDiv").show();
$("#payeeDiv").hide();
$("#managerDiv").hide();
break;
case 'payee':
$("#requestorDiv").hide();
$("#payeeDiv").show();
$("#managerDiv").hide();
break;
case 'manager':
$("#requestorDiv").hide();
$("#payeeDiv").hide();
$("#managerDiv").show();
break;
}
modal.find('.modal-title').text('Find ' + recipient + ' using people picker box below');
modal.find('#okModalButton').click(function () { getUserInfo(recipient) });
});
});
</script>
</body>
</html>【问题讨论】：
标签： jquery twitter-bootstrap sharepoint-online office365-apps