Batch REST requests in SharePoint Framework (SPFx) using SPHttpClientBatch

This post has been updated on 5th March 2017 for the SharePoint Framework 1.0 (GA) release.

All the code for this, as always, is on GitHub: https://github.com/vman/SPFx-REST-Operations

This is one of my favorite things in the SharePoint Framework right now. The ability to easily batch REST API calls and send them to SharePoint in a single request.

There is a new class called SPHttpClientBatch which is used to combine multiple REST requests. You can find more about this in the API docs:
https://dev.office.com/sharepoint/reference/spdx/sp-http/sphttpclient

As shown in the docs, the SPHttpClientBatch class has 2 primary methods: execute and fetch. The fetch method is used to queue all the different requests and execute is used to execute them all at once.

The get and post methods are syntactical sugar to call fetch but with the method parameter set to GET or POST.

The amazing thing about the fetch method is that it returns a Promise object which correlates to the API call being made. This way, when the Promise gets resolved/rejected after the execute method, we can easily track the response. This is better explained in the code below :)

So let's have a look at how we can utilize the SPHttpClientBatch class in an SPFx webpart:

First, we will need to import all the necessary modules:

import { SPHttpClient, ISPHttpClientBatchOptions, ISPHttpClientBatchCreationOptions, SPHttpClientResponse, SPHttpClientBatch } from '@microsoft/sp-http';

view raw importSPHttpClientBatch.ts hosted with ❤ by GitHub

And here is the actual code:

	private _makeSPHttpClientBatchRequest(): void {
	// Here, 'this' refers to my SPFx webpart which inherits from the BaseClientSideWebPart class.
	// Since I am calling this method from inside the class, I have access to 'this'.
	const spHttpClient: SPHttpClient = this.context.spHttpClient;
	const currentWebUrl: string = this.context.pageContext.web.absoluteUrl;
	const spBatchCreationOpts: ISPHttpClientBatchCreationOptions = { webUrl: currentWebUrl };
	const spBatch: SPHttpClientBatch = spHttpClient.beginBatch(spBatchCreationOpts);
	// Queue a request to get current user's userprofile properties
	const getMyProperties: Promise<SPHttpClientResponse> = spBatch.get(`${currentWebUrl}/_api/SP.UserProfiles.PeopleManager/GetMyProperties`, SPHttpClientBatch.configurations.v1);
	// Queue a request to get the title of the current web
	const getWebTitle: Promise<SPHttpClientResponse> = spBatch.get(`${currentWebUrl}/_api/web/title`, SPHttpClientBatch.configurations.v1);
	// Queue a request to create a list in the current web.
	const currentTime: string = new Date().toString();
	const batchOps: ISPHttpClientBatchOptions = {
	body: `{ Title: 'List created with SPFx batching at ${currentTime}', BaseTemplate: 100 }`
	};
	const createList: Promise<SPHttpClientResponse> = spBatch.post(`${currentWebUrl}/_api/web/lists`, SPHttpClientBatch.configurations.v1, batchOps);
	spBatch.execute().then(() => {
	getMyProperties.then((response: SPHttpClientResponse) => {
	response.json().then((props: any) => {
	console.log(props);
	});
	});
	getWebTitle.then((response: SPHttpClientResponse) => {
	response.json().then((webTitle: string) => {
	console.log(webTitle);
	});
	});
	createList.then((response: SPHttpClientResponse) => {
	response.json().then((responseJSON: any) => {
	console.log(responseJSON);
	});
	});
	});
	}

view raw SPHttpClientBatch.ts hosted with ❤ by GitHub

When this code is executed, we can see that a single batch request is sent to SharePoint containing the information about the requests in the Payload:

(click to zoom)

And when the Response is returned, we can hook into each individual Promise object to get its value:

(click to zoom)

Isn't this Awesome? It is going to save a lot of round trips to the server and also help in performance optimization.

Thanks for reading!

SharePoint Framework: Validating properties in the Web part property pane

Yup, you read it right. Validations can be added to the properties in the web part property pane of an SPFx webpart. The validation function can be Synchronous as well as Asynchronous. 

This means that we can immediately determine whether a property is valid or we can make an HTTP request (e.g. to SharePoint) and then determine if a property is valid depending on the response.

In the following code, I have added a validation to the title property to make sure that it is not the same as the SharePoint site title. Also, I have added a validation to the description property making sure that it is not less than 10 characters. 

The code is pretty straightforward. This code should be placed inside your Web part class:

	protected get propertyPaneSettings(): IPropertyPaneSettings {
	return {
	pages: [
	{
	header: {
	description: strings.PropertyPaneDescription
	},
	groups: [
	{
	groupName: strings.BasicGroupName,
	groupFields: [
	PropertyPaneTextField('title', {
	label: strings.TitleFieldLabel,
	onGetErrorMessage: this._validateTitleAsync.bind(this), // validation function
	deferredValidationTime: 500 // delay after which to run the validation function
	}),
	PropertyPaneTextField('description', {
	label: strings.DescriptionFieldLabel,
	multiline: true,
	resizable: true,
	onGetErrorMessage: this._validateDescription
	})
	]
	}
	]
	}
	]
	};
	}
	private _validateTitleAsync(value: string): Promise<string> {
	return this.context.httpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/title`)
	.then((response: Response) => {
	return response.json().then((responseJSON) => {
	// If validation is not successful, return a Promise<string> with error message.
	if (responseJSON.value.toLowerCase() === value.toLowerCase()) {
	return "Title cannot be the same as the SharePoint site title";
	}
	else {
	// If validation is successful, return a Promise<string> with empty string.
	return "";
	}
	});
	});
	}
	private _validateDescription(value: string): string {
	// If validation is not successful, return a string with error message.
	if (value.length < 10) {
	return "At least 10 characters required";
	}
	else {
	// If validation is successful, return an empty string.
	return "";
	}
	}

view raw spfxPropPaneValidations.ts hosted with ❤ by GitHub

As you can see from the code, the _validateTitleAsync function fires when the title property is edited. It makes a GET request to SharePoint to get the title of the web:

The code for this post is located here: https://github.com/vman/SPFx-Web-part-property-validator

The complete Web part class with the property pane editor is here:
https://github.com/vman/SPFx-Web-part-property-validator/blob/master/src/webparts/propValidator/PropValidatorWebPart.ts

While working on this post, I have discovered two possible issues with the way property pane validations currently work in the SharePoint Framework. I have posted them here if you are interested:

1) Rename IPropertyPaneTextFieldProps.onGetErrorMessage to IPropertyPaneTextFieldProps.GetValidationMessage

2) When property pane is in Non-Reactive mode, the validation function should only fire when clicked on "Apply"


Thanks for reading!

Making a POST request to SharePoint from an SPFx webpart

In this post, let's see how to make an HTTP POST request from an SharePoint Framework (SPFx) web part. There are lots of posts out already which show you how to make a GET request so I will not cover that here. It is fairly straightforward once you understand all the moving parts.

Import the necessary modules in your SPFx webpart code:

import { SPHttpClient, ISPHttpClientOptions, SPHttpClientResponse } from '@microsoft/sp-http';

view raw SPFxPOSTImports.ts hosted with ❤ by GitHub

Now, the code which makes a POST request to create a list:

	private _makePOSTRequest(): void {
	const spOpts: ISPHttpClientOptions = {
	body: `{ Title: 'Developer Workbench', BaseTemplate: 100 }`
	};
	this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists`, SPHttpClient.configurations.v1, spOpts)
	.then((response: SPHttpClientResponse) => {
	// Access properties of the response object.
	console.log(`Status code: ${response.status}`);
	console.log(`Status text: ${response.statusText}`);
	//response.json() returns a promise so you get access to the json in the resolve callback.
	response.json().then((responseJSON: JSON) => {
	console.log(responseJSON);
	});
	});
	}

view raw spfxPOST.ts hosted with ❤ by GitHub

And my "Developer workbench" list is created:

Hope this helps.

First SPFx webpart: Get/Set a single value userprofile property in SharePoint

This post is now out of date after the release of SharePoint Framework GA version. Please refer to one of my other posts which have been updated post GA:

1) Making a POST request to SharePoint from an SPFx webpart
2) Batch REST requests in SharePoint Framework (SPFx) using SPHttpClientBatch
3) Working with the REST API in SharePoint Framework (SPFx)
4) Using Redux Async Actions and ImmutableJS in SharePoint Framework

Original Post follows:

So the Developer preview of the SharePoint Framework was released last week and I decided to get my hands dirty right away. This is a webpart I created just to get a hang of things and to learn the key concepts of the SharePoint Framework.

The code is on GitHub: https://github.com/vman/Edit-User-Properties

Since I had not worked with React a lot, I decided to choose it as my JS framework.

Things I managed to wrap my head around while creating this simple webpart:

1) How to create a SPFx webpart with React as the JS framework.

2) How to talk to SharePoint from within the SPFx webpart with context.httpClient.get and context.httpClient.post

4) Creating reactive as well as non reactive webpart properties

5) The new _spClientSidePageContext object which contains heaps of context data. According to the wiki, properties of this object will be deprecated and moved under the Context object of the webpart.
https://github.com/SharePoint/sp-dev-docs/wiki/Drop-1

(For now, I had to manually create an ambient declaration for this object but hopefully soon, the need for this will go away as it will be moved in the Context object)

6) Office UI Fabric and React Components for Office UI fabric


Since lots of these things were new to me, you might find some bugs/mistakes/horrors in the code so apologies for that in advance. Don't forget to leave a comment and I will be happy to update my code.

Thanks!

Upload changed display templates to SharePoint using Gulp

Here is a quick tip which might be helpful when working with display templates. A typical SharePoint solution can have a large number of display templates but while working with them, you might me modifying/customizing only one at a time. Here is a quick gulp task I have put together which watches for changes in the HTML file of the display template and uploads only the changed display templates to the Master Page gallery.

	var gulp = require('gulp');
	var spsave = require('gulp-spsave');
	//Display Templates. Watch all display template html files and only upload the ones that change
	gulp.task('watch:displayTemplates', function () {
	var watcher = gulp.watch("DisplayTemplates/*.html");
	return watcher.on('change', function (event) {
	console.log('File ' + event.path + ' was ' + event.type);
	uploadToSharePoint(event.path);
	});
	});
	function uploadToSharePoint(files) {
	return gulp.src(files)
	.pipe(spsave({
	username: "user@tenant.onmicrosoft.com",
	password: "password",
	siteUrl: "https://tenant.sharepoint.com/sites/intranet/",
	folder: "_catalogs/masterpage/Display Templates/Search",
	checkin: true,
	checkinType: 1
	}));
	}

view raw watch:displaytemplates.js hosted with ❤ by GitHub

Then I just start the watch task and change/save a display template:

Whenever I save an HTML file of my display template, it gets uploaded and checked-in in the Master Page Gallery. That causes a corresponding JS file to get generated automatically so I don't have to worry about managing it. 

If you are maintaining your Display Template JS files in source control, you will have to remember to copy the generated JS file back into your solution. 

Hope this helps you speed up your Display Template development. I have uploaded this project on GitHub here: https://github.com/vman/Gulp.DisplayTemplates

Thanks for reading!