Trigger the edit page experience from your SharePoint Framework solution

This post is over a year old, some of this information may be out of date.

This is a quick article to show you how you can open the edit page experience from your SharePoint Framework solution. Such a trigger could be useful so that you can trigger the page its edit mode from within your web part, footer, …

Nothing more to say about it, so here is the code:

	const restApi = `${this.context.pageContext.web.absoluteUrl}/_api/sitepages/pages(${this.context.pageContext.listItem.id})/checkoutpage`;
	this.props.context.spHttpClient.post(restApi, SPHttpClient.configurations.v1, {})
	.then((data: SPHttpClientResponse) => {
	if (data.ok) {
	// Redirect the user to the edit page mode
	let location: string = document.location.href;
	if (location.indexOf('Mode=Edit') === -1) {
	location = `${location}${(location.indexOf("?") === -1 ? "?" : "&")}Mode=Edit`;
	}
	document.location.href = location;
	} else {
	// Page is already checked out
	data.json().then((err: IErrorMsg) => {
	if (err && err.error && err.error.message) {
	// Log the message from SharePoint
	console.log(err.error.message);
	}
	});
	}