Graph API Performance

Microsoft Graph API is used to get data from Office 365. It is using as gateway to get more amount of data with optimized amount of time. I will share some tips to increase the performance.

Paging

In some case requested API will return more number of data. In that case we can use paging to fetch data. We need use $top give page limit. If we have multiple pages, Graph will return odata.nextlink. Maximum threshold for $top is 999

For Example: https://graph.microsoft.com/v1.0/users?$top=100

Query Parameters

Instead of getting default properties from API response. We will specify properties which we want to retrieve as well as amount to data. We can use following parameters with API URL,

• $top
• $select
• $expand
• $filter
• $format
• skip

For Example:

https://graph.microsoft.com/v1.0/users?$top=100
https://graph.microsoft.com/v1.0/users?$select=displayName
https://graph.microsoft.com/v1.0/users?$filter=displayName eq John

https://graph.microsoft.com/v1.0/users?$format=json

Note: We can get CSV also. But Reports API URL doesn't support JSON format

https://graph.microsoft.com/v1.0/users?$skip=10
Microsoft has been recommended to use Query Parameter and paging as Best Practice. As well as we have to consider about number of calls to API. MS Graph supports throttling limit for concurrent calls and prevent the over usage.

Welcome SharePoint 2019

SharePoint 2019 will have a new, modern screens, that will work perfectly for all devices. It will give easy access to people, content and app. You will get more time to work instead of searching for information.

User Experience

SharePoint 2019 will give an innovative user experience, which covers document library and navigation. Office 365 already had this update and it is working fine. Now it is time for SharePoint Server too. User can easily communicate and collaborate with Cloud. These investments include the introduction of Communication Sites, Team News and Modern Team Sites to include Lists and Libraries and in support of broader data mobility the Next Generation Sync Client (NGSC) support for reliable access to documents at anywhere, anytime

Key Features

• Modern Sites, Pages, Lists and Libraries
• Team News
• SharePoint Home
• Communication Sites
• OneDrive Sync Client
• Improved hybrid support and scenarios
• New Developer options
• Improved support for Business Process with PowerApps and Flow 

How add value to User field using REST API

As all we know, SharePoint is having People field in list. We can add data for this field from custom webpart. There is lots of way to add listitems like server side (c#), client side (SP Client Context or REST API). We will see how to add value to user field using REST.

In REST, you can't get Proper column name of User Field. For Example, If you are having field with Owner as Column name. REST will not provide the value with Owner column. It will give two properities like OwnerId, OwnerString.

We have to pass the value for OwnerId. So first get the UserID for selected user. Then pass the ID to OwnerId field.

 let Listdata = JSON.stringify({

            "__metadata": { 'type': 'SP.Data.ListItem' },

           

    "OwnerId": 26

        })

How to render People Picker in Client side using Typescript

SharePoint gives provision to get Site Users using People Picker. It will get Groups and People of the site. In a same way we can add people picker in custom webpart. We can easily add this control in Farm solution. But Client side can't add this directly. Let's see the steps to render this using typescript.


declare the followings

declare var SP: any;

declare var SPClientPeoplePicker: any;

declare var SPClientPeoplePicker_InitStandaloneControlWrapper: any;

Then, Initialize the control.

InitializePeoplePicker() {
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = false;
        schema['MaximumEntitySuggestions'] = 50;

        schema['Width'] = '100%';

SPClientPeoplePicker_InitStandaloneControlWrapper('managementPeopleDiv', null, schema);

}

Call InitializePeoplePicker() function when all the controls are loaded in the page. So i have called this function on ngAfterViewInit()

Give the placeholder for people picker in HTML side.

<div id="managementPeopleDiv" class="peoplepicker"></div>

That's all build the app and place the JS filesin SharePoint library. 

Integrating angular app with SharePoint

We can able to integrate angular application with SharePoint. We can get data from SharePoint using REST API. Let's see the steps to integrate this.

Create An Angular APP

Here is the quick steps to create an angular application. Make the Production package using ng build in command prompt. We will get dist folder in project path.

Integrate with SP

We will get 5 js files within dist folder. Copy those files and paste that in any SharePoint library. Commonly we will use Site Assets for storing these kind of dll files. Create a folder in Site Assets to upload those files.

Then Create one page in Site Pages library. And open this page in SharePoint Designer.

Choose Advanced Mode option at top ribbon. Alter the form like below image.

Save the page. Open the page in browser. We will get an output of angular app. That's all.

Converting text to HTML in REACT

In REACT Component HTML tags are not displayed as HTML. It will display with <> tags. To avoid this, we have to use dangerouslySetInnerHTML in div tag.

For Example: <div dangerouslySetInnerHTML={{ __html: YourValue}}></div>

Hosting package and bundles of SPFx

We have seen about webpart creation and getting list items from SharePoint in last two articles. Now we are going see about hosting the packages and bundles of webpart. Click the following URL to touchbase about webpart creation and populating listitems. 

First set CDN path for bundle reference. We have to upload the dependency files in that folder. It must be a SharePoint library folder. I am creating one folder for this in Site Assets. 

Mention this path in write-manifest.json file which is under config folder.

Path will be like: https://YoursiteUrl/SiteAssests/deploy

If you need to change the properties of package like name, version and zippedpackage. you have to change in package-solution.json file.

We have done all things in solution side. Next we need to create a package using gulp command. 

Open the Command Prompt and go to solution path. Run the below command to get the build.

• gulp clean (This command used to clean bundles which is created previously)
• gulp --ship 
• gulp bundle --ship (This command used to create bundles)
• gulp package-solution --ship (This command used to make package)

Each command will take some time to execute. We can see the package in SharePoint folder.

Bundles will be created in temp --> deploy folder.

Upload the sppkg file in AppCatalog Site. Above 3 dependency files must be uploaded at CDN path. Webpart will be available in you site once it is uploaded in AppCatalog. We can add this like adding app. You can see the webpart while click the add webpart in the page.