Intro

In the previous post I described how to use Azure Logic Apps to invoke Azure Functions when a new item added to the SharePoint Online list. In this post I am going to describe how to visualize results produced by that function. I am going to describe couple other webparts that I created. Also, I will continue discussing serverless architecture, I will show how it can be applied to modern SharePoint Online.

Prerequisites

You need to have Azure Subscription and Office 365 Dev Tenant. Refer to the previous posts in this category to get started with Azure Active Directory apps.

Code

It is easy to visualize data from Destination List we already have all information we need. The best approach to do this now, is to create a new SharePoint Framework web part based on the following tutorial from Microsoft. It is a huge step forward in SharePoint Online development, developers are not limited to Content Editor webparts anymore. The cool thing is that you can scaffold applications that uses TypeScript, React/Knockout in a few seconds. It already has scripts to bundle the app an deploy it to Azure Blob Storage. Even more, you can specify CDN url and your app will be loaded to CDN right away. No need of back-end. Only Azure subscription. I am not going to describe how to work with SPFx and D3.js. I just want to demonstrate what you can achieve using these tools. I have spent 3 hours to went through the tutorial and create this webpart. It basically renders a stacked chart based on data from Destination List. So we load these items:

https://raw.githubusercontent.com/boades/boades-blog-content/master/03-azure/02-azure-o365-serverless-integration/05-how-to-use-spxf-d3js-sharepoint-lists-webhooks-visualize-data/01-dest-list-items.png

and visualize them in the following way:

https://raw.githubusercontent.com/boades/boades-blog-content/master/03-azure/02-azure-o365-serverless-integration/05-how-to-use-spxf-d3js-sharepoint-lists-webhooks-visualize-data/02-stacked-chart.png

You can find complete source code on GitHub

It is very easy to work with Azure Functions using SPFx. I have created the following web part as a small sample of what can be achived using ReactJS and SPFx. I have spend 30 minutes to implement this:

https://raw.githubusercontent.com/boades/boades-blog-content/master/03-azure/02-azure-o365-serverless-integration/05-how-to-use-spxf-d3js-sharepoint-lists-webhooks-visualize-data/04-provision-lists.png

This web part simply invokes corresponding Azure Functions with corresponding parameters. You can find source code on GitHub

Another webpart is much more complex, I created it to better understand how webhooks work. It looks like this:

https://raw.githubusercontent.com/boades/boades-blog-content/master/03-azure/02-azure-o365-serverless-integration/05-how-to-use-spxf-d3js-sharepoint-lists-webhooks-visualize-data/03-subscriptions-explorer.png

The webpart works with SharePoint Online REST API, it can load list of subscriptions, delete subscription, add subscription. You can find source code on GitHub.

The page with these webparts looks a bit ugly, but thanks to SPFx it can be easily customized:

https://raw.githubusercontent.com/boades/boades-blog-content/master/03-azure/02-azure-o365-serverless-integration/05-how-to-use-spxf-d3js-sharepoint-lists-webhooks-visualize-data/05-wps-on-the-page.png

Summary

In this seria of posts I have described how to build completely serverless app that uses SharePoint Framework, TypeScript, ReactJS, D3.js, Webhooks, Azure Functions, Azure Logic Apps, Azure Storage, Azure CDN, Azure Active Directory. I am looking forward for release versions of Azure Functions, SharePoint Framework and Webhooks. I believe it is a big shift in SharePoint development.


;