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.

Update List Permissions in SharePoint Hosted Apps SP2013

Update List Permissions in SharePoint Hosted Apps 

In this Post we'll update the permissions of the list and give Administrator Access to SharePoint Users. Here is how,

In Previous Post I've mentioned on how to add People Picker Control in SharePoint Hosted App.
Check it http://hasan-nasir.blogspot.com/2013/04/how-to-add-client-people-picker-in.html

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:    <input type="button" onclick="UpdatePermisions();" title="UpdatePermisions" />  
5:  </asp:Content>  

Now we'll see how to Break Permissions Inheritance of the list and how to add users in the list and give them administrator access.

'Use Strict' in SharePoint 2013 APPS

SharePoint 2013 Apps uses a lot of JavaScript, and SharePoint-Hosted Apps majorly rely on JSOM. 

While I was working with SharePoint 2013 Apps I copied some of the JavaScript code used in SP2013 App samples provided by Microsoft Community but code was not working, everything was perfect, the code copy pasted as is but still it’s not working.

I tried to find the bug and tried to fix the code but was not successful so I then downloaded the whole sample APP and deployed it on SharePoint Online, It worked!!!

So what’s the difference, the only line extra I had in my code was 'use strict' which visual studio adds to the app.js file by default when you create a new SP2013 APP. so when i removed that line my App Worked.

So what is this 'use Strict',

​In ECMAScript5 'use strict' mode is introduced which is as its name states restricts developer from doing a lot of things; you can read more about it here.  http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

So why not simply remove this line, because it’s been added by visual studio by default and also because it’s becoming a new programming standard and if you've read the link by now it’s a better way to write JS.

So now when you are writing apps you'll also have to learn how to program in strict mode, you'll learn to write better JavaScript Code.