Written by

MuthuKumar

Share

  

Category

see all categories
intranet as a service

How to Get Site User Details for SharePoint from Ionic 3 Mobile App

Open source frameworks have helped build hybrid mobile apps really quickly. Ionic is one such framework. Because of its ease of use and effectiveness, it is the most popular cross platform mobile app there is right now. The fact that it saves both time and money is another feather to its cap.

Doing the basic setup for ionic 3 app to connect to SharePoint is a bare necessity. So, make sure to check all the boxes, if you will, in the Check list comprising. This is to ensure the Authentication for SharePoint & Office 365 account and Get Access Token for SharePoint.

Introduction:

SharePoint:

            SharePoint, a web-based collaborative platform integrates with Microsoft. SharePoint primarily functions as a document management and storage system. The fact that it is highly configurable greatly favours developers. The usage varies according to an organization’s function.

Now let’s start,

Follow the steps mentioned below:

Step 1:

            Make sure we have project set up for start. If we don’t have setup project. We need to set up first so, visit this article take a look and download source code and do npm install. This command will install all dependencies for project. That’s all the project is ready.

            How to Get Access Token and Refresh Token for SharePoint from Ionic 3 mobile app

Step 2:

Now we need to call api for get site user details so need to add Http Object to our app module file.

app.module.ts file     
            //here importing one lines for access HttpModule to our app.

import { HttpModule } from '@angular/http';

@NgModule({

            imports: [

    HttpModule

  ]})

export class AppModule { }

Step 3:

            Now it’s time to integrate with app component part in our app.

app.component.ts file

//here added what are the object used in this component

            import { Response, RequestOptions, Headers } from '@angular/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/catch';

import 'rxjs/add/observable/throw';

import { Http } from '@angular/http';

//here created one variable for store a retrieved all site users value

public AllSiteUsersList: any[] = [];

            constructor(

                        private _http: Http      //here we can add object as private or public

            ) {

            //here called get site users method

                 this..getAllSiteUsers();

  }

             /*

            *Get all Site Users Data

             */

    async getAllSiteUsers() {

            //here we checking if SharePoint Access token is available in local storage or not

        if (localStorage.getItem("token")) {

            //here we creating new object for headers

            let headers = new Headers();

            //here we added Authorization with Token

            headers.append('Authorization', 'Bearer ' + localStorage.getItem("token"));

            //here we added Content Type as Json format and odata

            headers.append('Content-Type', 'application/json;odata=verbose');

            //here we combining headers with request options

            let options = new RequestOptions({ headers: headers });

          //here in this method passed arguments are

 // Site URL(https://example.sharepoint.com/”)

 // Site Users URL (“_api/web/siteusers”) and also options

            this._apiGet(“https://example.sharepoint.com/” +“_api/web/siteusers”, options)

                .subscribe(

                    (result: any) => {

                        console.log("Result ",result);

                        if (result) {

                            //Here assigning value to a variable for further future we can use this global variable whenever component

                            this.AllSiteUsersList = result.value;

                        }

                    }, (error) => {

                        //here printed error in case no response return

                        console.log("Error", error);

                    }

                );

        }else{

            //here occuring when the token is empty so need to get again here you can do calling methods.

            console.log("Need to Get Access Token");

        }

    }

    /*

    *common API Get Method

    */

    _apiGet(apiURI: any, options: any) {

        return this._http.get(apiURI, options)

            .map((response: Response) => response.json())   //here we can converted our response to json it is easy to use

            .catch(this.errorHandler)   //here handled error block.

    }

 

    /**

     * Error Handler block here we received error as response object

     * @param error

     */

    errorHandler(error: Response) {

        return Observable.throw(error);

    }

Before Call getAllSiteUsers() method make sure to store our SharePoint access token in local storage. Only then will the calling function work. Else you will get to see our logged text as Need to Get Access Token like this. Once we add these codes in our component part,we will be able to get site user details in our ionic 3 app.

Please check the sample response that has been added. We can use these response details whenever we want. Once running successfully, we will get all site users data as Array value. In SharePoint, every Get Api method returns responses named as value field. So, need to get value field like result.value. If you mention it like this, we will be get only array of values. We can use this array value further. In that array, values will contain following fields:

Id, Email, Login Name, Title, Is Site Admin etc, for reference I have added response as screenshots.

Screenshots: 

outlook signinoffice365 signinIonic Creation

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Total Response: 

Total Response

Individual Response: 

Individual Response

For more reference, we have added full source code as attachments. Download and do npm install. This command will install all dependencies for project.   

Summary

In this article, we have discussed how to get site user details SharePoint from ionic 3 mobile app. In the next article, we will see how to get the current user details SharePoint from ionic 3 mobile app.

If you have any questions/issues about this article, please share them in the comments.