VS2012-> file -> new project -> c# -> Office/SharePoint -> Apps -> Apps for SharePoint 2013 -> "clientPeoplePickerApp"
Default.aspx:-
Default.aspx:-
<%-- The following 4 lines are ASP.NET directives needed
when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,
Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- The markup and script in the following Content element
will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<!--
Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!--
Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
<%-- The markup in the following Content element will be
placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Page Title
</asp:Content>
<%-- The markup and script in the following Content element
will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<SharePoint:ScriptLink ID="ScriptLink1" Name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink2" Name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink3" Name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink4" Name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink5" Name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink6" Name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink7" Name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />
<div>
<p id="message">
<!--
The following content will be replaced with the user name when you run the app
- see App.js -->
initializing...
</p>
</div>
<div id="peoplePickerDiv"></div>
<div>
<br />
<input type="button" value="Get User Info" onclick="getUserInfo()"></input>
<br />
<h1>User info:</h1>
<p id="resolvedUsers"></p>
<h1>User keys:</h1>
<p id="userKeys"></p>
</div>
</asp:Content>
------------------------------------------------------------------------------------
App.js:-
'use
strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
//
This code runs when the DOM is ready and creates a context object which is
needed to use the SharePoint object model
$(document).ready(function () {
getUserName();
initializePeoplePicker('peoplePickerDiv');
});
//
This function prepares, loads, and then executes a SharePoint query to get the
current users information
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
//
This function is executed if the above call is successful
//
It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
}
//
This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed
to get user name. Error:' + args.get_message());
}
//
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() {
// Get
the people picker object from the page.
var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
// Get
information about all users.
var users = peoplePicker.GetAllUserInfo();
var userInfo = '';
for (var i = 0; i < users.length; i++) {
var user = users[i];
for (var userProperty in user) {
userInfo += userProperty + ': ' + user[userProperty] + '<br>';
}
}
$('#resolvedUsers').html(userInfo);
// Get
user keys.
var keys = peoplePicker.GetAllUserKeys();
$('#userKeys').html(keys);
}
Now Click on F5 to deploy...
Now Click on F5 to deploy...
Thank You.
Thanks a lot, you made it really easy to understand
ReplyDeleteCucumber BDD Online Training
BDD Cucumber Training in Bangalore
This post is so helpfull and informative.Keep updating more information
ReplyDeleteGraphic Designing in Mumbai
Graphic Design courses in Ahmedabad
Graphic Designers in Kochi
Graphic Design institute in Trivandrum
Graphic Designing in Kolkata
This is the amazing blog which contains more information about the topic.
ReplyDeleteAutomation Anywhere Training in Chennai
Automation Anywhere Online Training
This post is so helpfull and informative.keep updating with more information...
ReplyDeleteDigital Marketing Course In Mumbai
Digital Marketing Course In Ahmedabad
Digital Marketing Course In Kochi
Digital Marketing Course In Trivandrum
Digital Marketing Course In Kolkata
Really wonderful blog! Thanks for taking your valuable time to share this with us.
ReplyDeleteWhat is AWS
Benefits Of AWS
Lovelly blog you have here
ReplyDeleteThis post is so useful and informative....Keep updating more information
ReplyDeletewhatsapp chatbot
Great reading yoour post
ReplyDelete