SharePoint Angular and bootstrap Form – Part 2

Continuing on with one of my previous blogs, SharePoint Angular and bootstrap Form – Part 1, in this blog, we are going to focus on how to extract data with SharePoint Angular Rest Service and put that into Angular scope.

The steps involved in this process are:

1. Remember to add the Script reference in SharePoint mentioned with the previous blog.

4.ScriptAndLinkReference

2. Then add the following code below within the the angular controller:

1.AjaxGetUserDetails

The code is explained as below:

a)

var userid = _spPageContextInfo.userId;

The _spPageContextInfo.userId code get’s the userId of the the person logged in to SharePoint.

b)

var requestUriGetUserDetails = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

The _spPageContextInfo.webAbsoluteUrl get’s the URL at the site level of the current site:

So if the sharepoint in your URL is:

https://sharepointsite.com/projects/sciprojmgnt/Pages/MyFirstAngularForm.aspx,

then then the value of, _spPageContextInfo.webAbsoluteUrl , would be:

https://sharepointsite.com/projects/sciprojmgnt/

The second part of the code is:

“/_api/web/getuserbyid(” + userid + “)”;

This code calls the api getuserbyid, with the parameter of userId.

getuserbyid api contains good amount of details of the current user, such as:

user’s login name, full name (title), email address, etc.

3.getuserbyid api.png

c) the Jquery Ajax function code is executed, with a success function called:

onSuccessGetUserDetails

and function method:

onErrorGetUserDetails

The onSuccessGetUserDetails function get’s the value from  getuserbyid api, and then stores then to the angular scope variables:

 var varFullName = data.d.Title;
 var varEmail = data.d.Email;
 var varLoginName = data.d.LoginName;

 $scope.loginName = varLoginName;
 $scope.email = varEmail;
 $scope.requestorEmail = varEmail;
 $scope.requestorFullName = varFullName;

 var fullNameArray = varFullName.split(" ");

 var firstNameValue = fullNameArray[0];
 var lastNameValue = fullNameArray[1];

 $scope.firstName = firstNameValue;
 $scope.lastName = lastNameValue;

 

3. When the code is inserted, then save the code, and then upload the form again to the SharePoint site, most likely in the Site Assets document library:

9.SharePointUploadHTMLFile

4. And then the form shows the value of the current details below:

4.SharePointAPIAngularJSForm

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s