Thursday, 14 July 2016

OfficeDev: Building CrossPlatform SharePoint Custom Action using NodeJS


This post is a part of a series focused in building SharePoint extensions using NodeJS, the aim of this series is to provide a guide on how to build cross platform SharePoint solutions. In case of Office Add-ins office generator makes it very easy for us to build cross platform Office Add-ins. However, to extend SharePoint contextual add-ins we were always stuck with Visual studio or using Napa and build SharePoint hosted apps.

In this post I will explain how to build and deploy  a NodeJS Provider-hosted app with Custom Action that updates the Item Title.

The Add-in will consist of Three Major parts



App Principle



For simplicity I will focus on apps with apponly mode switched on, to get a new app principle simply navigate to  https://yourtenantname.sharepoint.com/_layouts/AppRegNew and generate  new App Id and secret.

In my case I will deploy the custom action to a new azure website called "o365-customaction"  so I've added o365-customaction.azurewebsites.net as my "app domain"

In the permission textbox I've added the following permissions giving my app tenant full control
save your app Id and secret and move on to the next step

App Web


When using Visual Studio template this will be created for us automatically when we choose to build a provider-hosted app or once we enable or add any remote event receiver, in this case let's use yo express to scaffold a basic nodejs web app for us.
  1. Install express yo generator
  2. Create new app
  3. Let's configure handling custom action via new middleware using  
  4. Create the update item handler
  5. O365Connect.js handles getting apponly token and update the list item
  6. Deploy web app to azure 
  7. To Deploy your web app to azure you need to install azure-cli package globally for more details check my previous post at http://www.sharepointtweaks.com/2015/10/building-outlooj-add-in-using-office-yo-generator.html
  8. At this step I assume you can deploy your nodejs website to azure using azure local repository and azure-cli

Deploying SharePoint Artifacts

At this moment we have a NodeJS web application running in azure, within the context of this web app user have full control of your SharePoint Online tenant. The missing piece is to create the custom action. One quick solution is to use powershell to create the custom action however, this will defy the purpose of this post which is making SharePoint development cross-platform.

RESTful APIs to the rescue

Using the SharePoint RESTful APIs you can retrieve and update any web custom user actions using basic http request by executing GET, DELET, POST HTTP requst to the /_api/web/customactions end point

Introducing gulp-sharepoint


This is a seed for a nodejs module that can be used to deploy SharePoint artifacts as gulp task currently it used to only deploy SharePoint custom action as gulp task



Hooking it up with deploy command

by adding the following lines to deploy.cmd this will allow this task to run whenever you update the azure local git repository the current logic of adding custom action is removing any old custom action that has the same name

See it in action !


What Next?

Anything is possible, you can easily build a complete set of cross-platform CLI tools to talk to SharePoint RESTful APIs and build the app web using any technology  stack you desire.



Related Articles