SharePoint add-in, custom Web API and SPFx (v1.1)

2018-07-24T21:04:58+01:00

Great post, quick question though. i have a slightly different solution in that I am using the aspnet mvc without the pnp/api piece. I am receving the CORs issue. I am getting origin(null) issue.

I’ve set the provider hosted url and using httpClient this is where I am getting the issue. I think it may be because of the redirect. The provider host is returning to my sp tenant? I think? and thats where the issue is occurring. Do you have any Ideas?

Thanks,
Gary

	using OfficeDevPnP.Core.WebAPI;

	//…

	[SharePointContextFilter]
	public ActionResult Register()
	{
	try
	{
	// Register the BusinessDocuments API
	WebAPIHelper.RegisterWebAPIService(this.HttpContext, "/api/BusinessDocuments");
	return Json(new { message = "Web API registered" });
	}
	catch (Exception ex)
	{
	return Json(ex);
	}
	}

	namespace spaddin_webapiWeb.Models
	{
	public class BusinessDocumentViewModel
	{
	public int Id { get; set; }

	public string Name { get; set; }

	public string Purpose { get; set; }

	public string InCharge { get; set; }
	}
	}

	using Microsoft.SharePoint.Client;
	using OfficeDevPnP.Core.WebAPI;
	using spaddin_webapiWeb.Models;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Net;
	using System.Net.Http;
	using System.Web.Http;
	using System.Web.Http.Cors;

	namespace spaddin_webapiWeb.Controllers
	{
	[EnableCors(origins: "https://ypcode.sharepoint.com,https://localhost:4321",
	headers: "*",
	methods: "*",
	SupportsCredentials = true)]
	[WebAPIContextFilter]
	public class BusinessDocumentsController : ApiController
	{
	public const string FileLeafRefField = "FileLeafRef";
	public const string InChargeField = "InCharge";
	public const string DocumentPurposeField = "DocumentPurpose";

	public static string[] ValidDocumentPurposes = new string[]
	{
	"Agreement project",
	"Offer project",
	"Purchase project",
	"Research document"
	};

	private static BusinessDocumentViewModel ListItemToViewModel(ListItem businessDocListItem)
	{
	FieldUserValue inChargeUserValue = businessDocListItem[InChargeField] as FieldUserValue;
	string inChargeValue = inChargeUserValue != null ? inChargeUserValue.LookupValue : string.Empty;

	return new BusinessDocumentViewModel()
	{
	Id = businessDocListItem.Id,
	Name = (string)businessDocListItem[FileLeafRefField],
	Purpose = (string)businessDocListItem[DocumentPurposeField],
	InCharge = inChargeValue
	};
	}

	private static ListItem MapToListItem(BusinessDocumentViewModel viewModel, ListItem targetListItem)
	{
	targetListItem[FileLeafRefField] = viewModel.Name;
	targetListItem[DocumentPurposeField] = viewModel.Purpose;
	targetListItem[InChargeField] = FieldUserValue.FromUser(viewModel.InCharge);
	return targetListItem;
	}

	private static ListItem TryGetListItemById(List list, int id)
	{
	try
	{
	ListItem item = list.GetItemById(id);
	list.Context.Load(item, i => i.Id);
	list.Context.ExecuteQuery();
	return item;
	}
	catch (Exception)
	{
	return null;
	}
	}

	private static bool ValidateModel(BusinessDocumentViewModel viewModel, out string message)
	{
	// Validate the purpose is a valid value
	if (!ValidDocumentPurposes.Contains(viewModel.Purpose))
	{
	message = "The specified document purpose is invalid";
	return false;
	}

	message = string.Empty;
	return true;
	}

	// GET: api/BusinessDocuments
	public IEnumerable<BusinessDocumentViewModel> Get()
	{
	using (var clientContext = WebAPIHelper.GetClientContext(this.ControllerContext))
	{
	// Get the documents from the Business Documents library
	List businessDocsLib = clientContext.Web.GetListByUrl("/BusinessDocs");
	ListItemCollection businessDocItems = businessDocsLib.GetItems(CamlQuery.CreateAllItemsQuery());

	clientContext.Load(businessDocItems, items => items.Include(
	item => item.Id,
	item => item[FileLeafRefField],
	item => item[InChargeField],
	item => item[DocumentPurposeField]));
	clientContext.ExecuteQuery();

	// Create collection of view models from list item collection
	List<BusinessDocumentViewModel> viewModels = businessDocItems.Select(ListItemToViewModel).ToList();

	return viewModels;
	}
	}

	// GET: api/MyBusinessDocuments
	[HttpGet]
	[Route("api/MyBusinessDocuments")]
	public IEnumerable<BusinessDocumentViewModel> MyBusinessDocuments()
	{
	using (var clientContext = WebAPIHelper.GetClientContext(this.ControllerContext))
	{

	// Get the documents from the Business Documents library
	List businessDocsLib = clientContext.Web.GetListByUrl("/BusinessDocs");
	var camlQuery = new CamlQuery
	{
	ViewXml = $@"<View><Query><Where>
	<Eq>
	<FieldRef Name='{InChargeField}' LookupId='TRUE' />
	<Value Type = 'Integer'><UserID /></Value>
	</Eq>
	</Where></Query></View>"
	};
	ListItemCollection businessDocItems = businessDocsLib.GetItems(camlQuery);

	clientContext.Load(businessDocItems, items => items.Include(
	item => item.Id,
	item => item[FileLeafRefField],
	item => item[InChargeField],
	item => item[DocumentPurposeField]));
	clientContext.ExecuteQuery();

	// Create collection of view models from list item collection
	List<BusinessDocumentViewModel> viewModels = businessDocItems.Select(ListItemToViewModel).ToList();

	return viewModels;
	}
	}



	// GET: api/BusinessDocuments/5
	public IHttpActionResult Get(int id)
	{
	using (var clientContext = WebAPIHelper.GetClientContext(this.ControllerContext))
	{
	// Get the documents from the Business Documents library
	List businessDocsLib = clientContext.Web.GetListByUrl("/BusinessDocs");
	ListItem businessDocItem = TryGetListItemById(businessDocsLib, id);
	if (businessDocItem == null)
	return NotFound();

	// Ensure the needed metadata are loaded
	clientContext.Load(businessDocItem, item => item.Id,
	item => item[FileLeafRefField],
	item => item[InChargeField],
	item => item[DocumentPurposeField]);
	clientContext.ExecuteQuery();

	// Create a view model object from the list item
	BusinessDocumentViewModel viewModel = ListItemToViewModel(businessDocItem);

	return Ok(viewModel);
	}
	}

	// POST: api/BusinessDocuments
	public IHttpActionResult Post([FromBody]BusinessDocumentViewModel value)
	{
	string validationError = null;
	if (!ValidateModel(value, out validationError))
	{
	return BadRequest(validationError);
	}

	using (var clientContext = WebAPIHelper.GetClientContext(this.ControllerContext))
	{
	// Get the documents from the Business Documents library
	List businessDocsLib = clientContext.Web.GetListByUrl("/BusinessDocs");
	// Ensure the root folder is loaded
	Folder rootFolder = businessDocsLib.EnsureProperty(l => l.RootFolder);
	ListItem newItem = businessDocsLib.CreateDocument(value.Name, rootFolder, DocumentTemplateType.Word);

	// Update the new document metadata
	newItem[DocumentPurposeField] = value.Purpose;
	newItem[InChargeField] = FieldUserValue.FromUser(value.InCharge);
	newItem.Update();

	// Ensure the needed metadata are loaded
	clientContext.Load(newItem, item => item.Id,
	item => item[FileLeafRefField],
	item => item[InChargeField],
	item => item[DocumentPurposeField]);

	newItem.File.CheckIn("", CheckinType.MajorCheckIn);
	clientContext.ExecuteQuery();

	BusinessDocumentViewModel viewModel = ListItemToViewModel(newItem);
	return Created($"/api/BusinessDocuments/{viewModel.Id}", viewModel);
	}
	}

	// PUT: api/BusinessDocuments/5
	public IHttpActionResult Put(int id, [FromBody]BusinessDocumentViewModel value)
	{
	string validationError = null;
	if (!ValidateModel(value, out validationError))
	{
	return BadRequest(validationError);
	}

	using (var clientContext = WebAPIHelper.GetClientContext(this.ControllerContext))
	{
	// Get the documents from the Business Documents library
	List businessDocsLib = clientContext.Web.GetListByUrl("/BusinessDocs");
	ListItem businessDocItem = TryGetListItemById(businessDocsLib, id);

	// If not found, return the appropriate status code
	if (businessDocItem == null)
	return NotFound();

	// Update the list item properties
	MapToListItem(value, businessDocItem);
	businessDocItem.Update();
	clientContext.ExecuteQuery();

	return Ok();
	}
	}

	// DELETE: api/BusinessDocuments/5
	public IHttpActionResult Delete(int id)
	{
	using (var clientContext = WebAPIHelper.GetClientContext(this.ControllerContext))
	{
	// Get the document from the Business Documents library
	List businessDocsLib = clientContext.Web.GetListByUrl("/BusinessDocs");
	ListItem businessDocItem = TryGetListItemById(businessDocsLib, id);
	// If not found, return the appropriate status code
	if (businessDocItem == null)
	return NotFound();

	// Delete the list item
	businessDocItem.DeleteObject();
	clientContext.ExecuteQuery();

	return Ok();
	}
	}
	}
	}

	using System.Web.Http;

	namespace spaddin_webapiWeb
	{
	public static class WebApiConfig
	{
	public static void Register(HttpConfiguration config)
	{
	config.EnableCors();

	config.MapHttpAttributeRoutes();

	config.Routes.MapHttpRoute(
	name: "DefaultApi",
	routeTemplate: "api/{controller}/{id}",
	defaults: new { id = RouteParameter.Optional }
	);
	}
	}
	}

	import { IApiConfigService, ApiConfigServiceKey } from './ApiConfigService';
	import HttpClient from '@microsoft/sp-http/lib/httpClient/HttpClient';
	import { IBusinessDocument } from '../entities/IBusinessDocument';
	import { ServiceScope, ServiceKey } from '@microsoft/sp-core-library';

	export interface IBusinessDocumentsService {
	getAllBusinessDocuments(): Promise<IBusinessDocument[]>;
	getMyBusinessDocuments(): Promise<IBusinessDocument[]>;
	getBusinessDocument(id: number): Promise<IBusinessDocument>;
	createBusinessDocument(businessDocument: IBusinessDocument): Promise<any>;
	updateBusinessDocument(id: number, update: IBusinessDocument): Promise<any>;
	removeBusinessDocument(id: number): Promise<any>;
	}

	export class BusinessDocumentsService implements IBusinessDocumentsService {
	private httpClient: HttpClient;
	private apiConfig: IApiConfigService;


	constructor(private serviceScope: ServiceScope) {
	serviceScope.whenFinished(() => {
	this.httpClient = serviceScope.consume(HttpClient.serviceKey);
	this.apiConfig = serviceScope.consume(ApiConfigServiceKey);
	});
	}

	public getAllBusinessDocuments(): Promise<IBusinessDocument[]> {
	return this.httpClient.get(this.apiConfig.apiUrl, HttpClient.configurations.v1, {
	mode: 'cors',
	credentials: 'include'
	}).then((resp) => resp.json());
	}

	public getMyBusinessDocuments(): Promise<IBusinessDocument[]> {
	return this.httpClient.get(this.apiConfig.apiMyDocumentsUrl, HttpClient.configurations.v1, {
	mode: 'cors',
	credentials: 'include'
	}).then((resp) => resp.json());
	}

	public getBusinessDocument(id: number): Promise<IBusinessDocument> {
	return this.httpClient.get(`${this.apiConfig.apiUrl}/${id}`, HttpClient.configurations.v1,{
	mode: 'cors',
	credentials: 'include'
	}).then((resp) => resp.json());
	}

	public createBusinessDocument(businessDocument: IBusinessDocument): Promise<any> {
	return this.httpClient
	.post(`${this.apiConfig.apiUrl}`, HttpClient.configurations.v1, {
	body: JSON.stringify(businessDocument),
	headers: [
	['Content-Type','application/json']
	],
	mode: 'cors',
	credentials: 'include'
	})
	.then((resp) => resp.json());
	}

	public updateBusinessDocument(id: number, update: IBusinessDocument): Promise<any> {
	return this.httpClient
	.fetch(`${this.apiConfig.apiUrl}/${id}`, HttpClient.configurations.v1, {
	body: JSON.stringify(update),
	headers: [
	['Content-Type','application/json']
	],
	mode: 'cors',
	credentials: 'include',
	method: 'PUT'
	});
	}

	public removeBusinessDocument(id: number): Promise<any> {
	return this.httpClient
	.fetch(`${this.apiConfig.apiUrl}/${id}`, HttpClient.configurations.v1, {
	mode: 'cors',
	credentials: 'include',
	method:'DELETE'
	});
	}
	}

	export const BusinessDocumentsServiceKey = ServiceKey.create<IBusinessDocumentsService>(
	'ypcode:bizdocs-service',
	BusinessDocumentsService
	);

	import * as React from 'react';
	import styles from './WebApiClient.module.scss';
	import { IWebApiClientProps } from './IWebApiClientProps';
	import { escape } from '@microsoft/sp-lodash-subset';

	import {
	CommandBar,
	DetailsList,
	ISelection,
	Selection,
	SelectionMode,
	Panel,
	TextField,
	PrimaryButton,
	DefaultButton
	} from 'office-ui-fabric-react';
	import { IBusinessDocument } from '../../../entities/IBusinessDocument';
	import { BusinessDocumentsServiceKey, IBusinessDocumentsService } from '../../../services/BusinessDocumentsService';
	import { ApiConfigServiceKey, IApiConfigService } from '../../../services/ApiConfigService';

	export interface IWebApiClientState {
	businessDocuments?: IBusinessDocument[];
	selectedDocument?: IBusinessDocument;
	selection?: ISelection;
	isAdding?: boolean;
	isEditing?: boolean;
	selectedView?: 'All' \| 'My';
	}

	export default class WebApiClient extends React.Component<IWebApiClientProps, IWebApiClientState> {
	private businessDocsService: IBusinessDocumentsService;
	private apiConfig: IApiConfigService;
	private authenticated: boolean;

	constructor(props: IWebApiClientProps) {
	super(props);
	this.state = {
	businessDocuments: [],
	selectedDocument: null,
	isAdding: false,
	isEditing: false,
	selectedView: 'All',
	selection: new Selection({
	onSelectionChanged: this._onSelectionChanged.bind(this)
	})
	};
	}

	public componentWillMount() {
	this.props.serviceScope.whenFinished(() => {
	this.businessDocsService = this.props.serviceScope.consume(BusinessDocumentsServiceKey);
	this.apiConfig = this.props.serviceScope.consume(ApiConfigServiceKey);
	this._loadDocuments();
	});
	}

	private _loadDocuments(stateRefresh?: IWebApiClientState, forceView?: 'All' \| 'My') {
	let { selectedView } = this.state;

	let effectiveView = forceView \|\| selectedView;
	// After being authenticated
	this._executeOrDelayUntilAuthenticated(() => {
	switch (effectiveView) {
	case 'All':
	// Load all business documents when component is being mounted
	this.businessDocsService.getAllBusinessDocuments().then((docs) => {
	let state = stateRefresh \|\| {};
	state.businessDocuments = docs;
	this.setState(state);
	});
	break;
	case 'My':
	// Load My business documents when component is being mounted
	this.businessDocsService.getMyBusinessDocuments().then((docs) => {
	let state = stateRefresh \|\| {};
	state.businessDocuments = docs;
	this.setState(state);
	});
	break;
	}
	});
	}

	private _executeOrDelayUntilAuthenticated(action: Function): void {
	if (this.authenticated) {
	console.log('Is authenticated');
	action();
	} else {
	console.log('Still not authenticated');
	setTimeout(() => {
	this._executeOrDelayUntilAuthenticated(action);
	}, 1000);
	}
	}

	private _onSelectionChanged() {
	let { selection } = this.state;
	let selectedDocuments = selection.getSelection() as IBusinessDocument[];

	let selectedDocument = selectedDocuments && selectedDocuments.length == 1 && selectedDocuments[0];

	console.log('SELECTED DOCUMENT: ', selectedDocument);
	this.setState({
	selectedDocument: selectedDocument \|\| null
	});
	}

	private _buildCommands() {
	let { selectedDocument } = this.state;

	const add = {
	key: 'add',
	name: 'Create',
	icon: 'Add',
	onClick: () => this.addNewBusinessDocument()
	};

	const edit = {
	key: 'edit',
	name: 'Edit',
	icon: 'Edit',
	onClick: () => this.editCurrentBusinessDocument()
	};

	const remove = {
	key: 'remove',
	name: 'Remove',
	icon: 'Remove',
	onClick: () => this.removeCurrentBusinessDocument()
	};

	let commands = [ add ];

	if (selectedDocument) {
	commands.push(edit, remove);
	}

	return commands;
	}

	private _buildFarCommands() {
	let { selectedDocument, selectedView } = this.state;

	const views = {
	key: 'views',
	name: selectedView == 'All' ? 'All' : "I'm in charge of",
	icon: 'View',
	subMenuProps: {
	items: [
	{
	key: 'viewAll',
	name: 'All',
	icon: 'ViewAll',
	onClick: () => this.selectView('All')
	},
	{
	key: 'inChargeOf',
	name: "I'm in charge of",
	icon: 'AccountManagement',
	onClick: () => this.selectView('My')
	}
	]
	}
	};

	let commands = [ views ];

	return commands;
	}

	public selectView(view: 'All' \| 'My') {
	this.setState({
	selectedView: view
	});

	this._loadDocuments(null, view);
	}

	public addNewBusinessDocument() {
	this.setState({
	isAdding: true,
	selectedDocument: {
	Id: 0,
	Name: 'New document.docx',
	Purpose: '',
	InCharge: ''
	}
	});
	}

	public editCurrentBusinessDocument() {
	let { selectedDocument } = this.state;
	if (!selectedDocument) {
	return;
	}

	this.setState({
	isEditing: true
	});
	}

	public removeCurrentBusinessDocument() {
	let { selectedDocument } = this.state;
	if (!selectedDocument) {
	return;
	}

	if (confirm('Are you sure ?')) {
	this._executeOrDelayUntilAuthenticated(() => {
	this.businessDocsService
	.removeBusinessDocument(selectedDocument.Id)
	.then(() => {
	alert('Document is removed !');
	this._loadDocuments();
	})
	.catch((error) => {
	console.log(error);
	alert('Document CANNOT be removed !');
	});
	});
	}
	}

	private onValueChange(property: string, value: string) {
	let { selectedDocument } = this.state;
	if (!selectedDocument) {
	return;
	}

	selectedDocument[property] = value;
	}

	private onApply() {
	let { selectedDocument, isAdding, isEditing } = this.state;

	if (isAdding) {
	this._executeOrDelayUntilAuthenticated(() => {
	this.businessDocsService
	.createBusinessDocument(selectedDocument)
	.then(() => {
	alert('Document is created !');
	this._loadDocuments({
	selectedDocument: null,
	isAdding: false,
	isEditing: false
	});
	})
	.catch((error) => {
	console.log(error);
	alert('Document CANNOT be created !');
	});
	});
	} else if (isEditing) {
	this._executeOrDelayUntilAuthenticated(() => {
	this.businessDocsService
	.updateBusinessDocument(selectedDocument.Id, selectedDocument)
	.then(() => {
	alert('Document is updated !');
	this._loadDocuments({
	selectedDocument: null,
	isAdding: false,
	isEditing: false
	});
	})
	.catch((error) => {
	console.log(error);
	alert('Document CANNOT be updated !');
	});
	});
	}
	}

	private onCancel() {
	this.setState({
	selectedDocument: null,
	isAdding: false,
	isEditing: false
	});
	}

	public render(): React.ReactElement<IWebApiClientProps> {
	let { businessDocuments, selection, selectedDocument, isAdding, isEditing } = this.state;
	return (
	<div className={styles.webApiClient}>
	<div className={styles.container}>
	<iframe
	src={this.apiConfig.appRedirectUri}
	style={{ display: 'none' }}
	onLoad={() => (this.authenticated = true)}
	/>
	<CommandBar items={this._buildCommands()} farItems={this._buildFarCommands()} />
	<DetailsList
	items={businessDocuments}
	columns={[
	{
	key: 'id',
	name: 'Id',
	fieldName: 'Id',
	minWidth: 15,
	maxWidth: 30
	},
	{
	key: 'docName',
	name: 'Name',
	fieldName: 'Name',
	minWidth: 100,
	maxWidth: 200
	},
	{
	key: 'docPurpose',
	name: 'Purpose',
	fieldName: 'Purpose',
	minWidth: 100,
	maxWidth: 200
	},
	{
	key: 'inChargeOf',
	name: "Who's in charge",
	fieldName: 'InCharge',
	minWidth: 100,
	maxWidth: 200
	}
	]}
	selectionMode={SelectionMode.single}
	selection={selection}
	/>
	{selectedDocument &&
	(isAdding \|\| isEditing) && (
	<Panel isOpen={true}>
	<TextField
	label="Name"
	value={selectedDocument.Name}
	onChanged={(v) => this.onValueChange('Name', v)}
	/>
	<TextField
	label="Purpose"
	value={selectedDocument.Purpose}
	onChanged={(v) => this.onValueChange('Purpose', v)}
	/>
	<TextField
	label="InCharge"
	value={selectedDocument.InCharge}
	onChanged={(v) => this.onValueChange('InCharge', v)}
	/>
	<PrimaryButton text="Apply" onClick={() => this.onApply()} />
	<DefaultButton text="Cancel" onClick={() => this.onCancel()} />
	</Panel>
	)}
	</div>
	</div>
	);
	}
	}

Introduction

The case study

Let’s create a SharePoint add-in

A custom Web API in a SharePoint add-in

How does it work ?

With a stateless Web API ?

The SPFx WebPart

Result

Share this:

19 thoughts on “SharePoint add-in, custom Web API and SPFx (v1.1)”

Leave a comment Cancel reply