How to add Client People Picker in SharePoint Hosted Apps

Configure Client People Picker Control in SharePoint Hosted Apps

In this Post I'll show you how to add People Picker on SharePoint hosted App. Its Very Simple Following is the code to add control on App page.

1:  <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
2:    <SharePoint:ClientPeoplePicker AllowEmailAddresses="true" Required="true" ValidationEnabled="true" ID="peoplePicker"   
3:      runat="server" VisibleSuggestions="3" Rows="1" PrincipalAccountType="User,DL,SecGroup,SPGroup" AllowMultipleEntities="true" CssClass="ms-long ms-spellcheck-true" Height="85px" />  
4:  </asp:Content>  

and following is the code I added in App.js file to get the Users from the control in JavaScript.

1:  var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePicker_TopSpan;  
2:    var users = peoplePicker.GetAllUserInfo();  
3:    var userInfo = '';  
4:    for (var i = 0; i < users.length; i++) {  
5:      var user = users[i];  
6:      var userobj = oWebsite.ensureUser(user["Key"].split('|')[2]);  
7:      userInfo += userobj + ' ' ;
8:    }

where peoplePicker_TopSpan is the id of people Picker Control.

People Picker in SharePoint Hosted App.