Using SharePoint Remote Event Receivers with Azure Functions and TypeScript

Why can’t we use regular http web api instead of WCF web service for our SharePoint RERs? Actually we can! SharePoint makes HTTP POST to any http endpoint, the only task for us is to parse body correctly and send a response back.

In this tutorial I’m going to show how to set up Azure Function, which acts as http endpoint for SharePoint Remote Event Receiver, everything running on Node.js and written in TypeScript! We’ll also use pnp-js-core to interact with SharePoint REST API from event receiver. The source code available at github repo.  Let’s get started. More...

SPFx build pipeline is webpack 2 based now

A few weeks ago I’ve created an issue around Webpack 2 support for SPFx build pipeline. And there are some good reasons why it’s a good idea to use webpack 2 in SPFx:

  • webpack 1 is deprecated
  • documentation for webpack 2 is better
  • webpack 2 schema more understandable
  • sometimes webpack 2 faster (it depends, but still)
  • all core webpack loaders supports version 2 and might have issues with previous version down the road
  • SPFx introduced as a framework which supports modern web technologies and tools. Someone use Angular, React, someone Vue.js. Vue.js uses webpack 2 and it’s more natural to use webpack 2 with Vue when building SPFx web parts

Finally a few days ago SPFx team released a new version which built with webpack 2! And that’s a good news.

I had to fix all samples around Vue.js and SPFx, because webpack schema is changed. But now I personally feels more comfortable about extending SPFx with Vue.js, because at least they are using the same version of bundler.

Please checkout updated samples with Vue.js in official repository here - https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/vuejs-todo-single-file-component and experimental sample where everything in .vue file (including TypeScript code) - https://github.com/s-KaiNet/spfx-vue-sfc-one-file

Using PnP-JS-Core (sp-pnp-js) in Node.js environment

PnP-JS-Core ❤ Node.js

Do you know what is PnP-JS-Core? I hope so. If don’t know about PnP-JS-Core, here is a quick overview:

The Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint and the SharePoint Framework. Currently it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions. This takes the guess work out of creating REST requests, letting developers focus on the what and less on the how.

In other words that’s an wrapper over SharePoint REST API as well as other helper functions. PnP-JS-Core can speedup your development by providing a lot of useful functions, utilities, operators and objects to work with SharePoint. For example consider how it’s easy to do some routine operations:

pnp-js-core experience

I really recommend you to take a look at the official github repository here - https://github.com/SharePoint/PnP-JS-Core as well as wiki

The main purpose for PnP-JS-Core is using inside browser. You include sp-pnp-js into your html and you are ready to go. But the library is designed with extensibility and supportability in mind. That means you can run PnP-JS-Core not only in browser, but in Node.js environment too. Hmmm…. why do you need this, you might ask. Nowadays Node.js integrates in your development pipeline more and more. Do you know gulp, webpack, browserify, etc.? All this tools run on Node.js. With Node.js you can build any type of application – web applications, desktop (cross platform!) apps, micro services, Azure functions and many many other things. Sometimes you need to interact with SharePoint from you Node.js application. Ideally you would like to utilize PnP-JS-Core for that task as well. Meet node-pnp-js which will help you.

As you might guess the main issue when working with SharePoint from Node.js is authentication. When using inside browser, current user is already authenticated and you can use the library as is. For Node.js situation is different. There is no authenticated user and you have to implement authentication by your own. node-pnp-js uses my other library node-sp-auth as authentication provider. In the past I’ve created a sample of integration PnP-JS-Core and Node.js and node-pnp-js is just a logical continuation designed as a separate reusable package.

So let’s get started! More...

Building SharePoint client web part with Vue.js and single-file components

Vue.js becomes more and more popular and it’s time to build real life sample using Vue’s single-file components. Single-files components are the building blocks for Vue application. It’s not required to use single files components for Vue application, but they give you some advantages:

  • recommended style for Vue applications
  • modern components-based approach
  • good separation of concern between markup, css and code
  • we don’t need to use standalone version of Vue and can use runtime version, which is smaller
  • since we are using runtime version of Vue, our app works a bit faster, because not need to compile templates (already compiled by vue-loader)

Original sample can be founded under SharePoint Framework client-side web part samples – that’s a basic todo web part built with Vue. This a companion post describing some concepts.

The most difficult part is to setup our SPFx build pipeline to support Vue. Here are the steps required in order to make SPFx vue-compatible: More...

SharePoint Framework–extending build pipeline with custom configurations

Sometimes you need to adjust SPFx build pipeline a bit, in order to add your own webpack loaders or modify configuration for some tasks. This can be done in different ways depending on your needs. Let’s try to take a closer look at the options available.   Below is a diagram showing common config flow with extensibility points:

gulp-spfx-pipeline

There are two places where you can put your customizations – under custom task’s config adjustments or using configuration file under config/[task name].json during loadCustomConfigs() method. More...

SharePoint development state in 2016: story based on sharepoint.stackexchange analysis with Power BI

I’ve heard about Power BI and Power BI Desktop a lot, but have never tried these tools before. So I decided to make an analysis of some popular questions and answers forum - http://sharepoint.stackexchange.com with help of Power BI Desktop. If you are SharePoint person (developer, admin, power user, etc.) that’s a big chance that you have visited this site before or maybe you are even frequent visitor. In this post, you will find a lot of images, graphics, trends, tables, maps, charts and so on. All made with great tool Power BI Desktop and Stack Exchange API as a data source. Some advanced data was collected with help of Google Maps Geocode API and nodejs webpages scrapper – osmosis.

The data was grabbed from sharepoint.stackexchange at the beginning of January 2017. Most of the data is filtered starting from the 2010 year because a relatively small number of questions were created before 2010 (around 200).

NOTA: all thoughts here are just my thoughts and may be incorrect or not aligned with yours. Please, share your opinion in comments.

Basic data

Let’s start with some basic information available:

 

More...

SharePoint 2010 modal dialog extensions

Hi all. During digging into different sharepoint *.debug.js files I also investigating into sp.ui.dialog.debug.js. Out of the box modal dialog framework has some number of methods for manipulating dialog window, but some methods (that might be useful) missed. For example programmatically maximize or restore dialog window. Here is a couple of extension methods that I’ve created:

  • maximize -  maximizes modal dialog window
  • restore -  restores modal dialog window
  • toggleView – maximizes if modal dialog window is not maximized and vice versa
  • setSize – set size for modal dialog window (height, width in pixels)

Here is the code:

ExecuteOrDelayUntilScriptLoaded(function(){
	SP.UI.ModalDialog.prototype.toggleView = function () {
		this.$z(null);
	};
	SP.UI.ModalDialog.prototype.maximize = function (){
		if(!this.$S_0){
			this.$z(null);
		}
	}
	SP.UI.ModalDialog.prototype.restore = function (){
		if(this.$S_0){
			this.$z(null);
		}
	}
	SP.UI.ModalDialog.prototype.setSize = function (width, height){
		if(typeof width == "number" && typeof height == "number") {
			this.$Q_0(width, height);
		}
	}
}, "sp.ui.dialog.js");

Example of use:

var dlg = SP.UI.ModalDialog.get_childDialog();
dlg.toggleView();

Enjoy and good luck in spdevelopment.

SharePoint 2010 feature upgrade–upgrade pattern

Hi all! Today I’m going to show example of how to write clean and understandable code when using feature upgrade. Of course, solution which we are using is not perfect, but it rather solid, easy to use, easy to read, easy to extend. If you have any suggestions, improvements, or event better and cooler solution – you are welcome in comments :). Ok, lets start.

You are already know, that with sharepoint 2010 you can upgrade your features by adding this sample xml:

<UpgradeActions>
    <VersionRange BeginVersion="0.0.0.0" EndVersion="0.0.0.09">
      <CustomUpgradeAction Name="SomeActionName">
        <Parameters>
          <Parameter Name="TitlePrefix">Upgrade Time:</Parameter>
        </Parameters>
      </CustomUpgradeAction>
    </VersionRange>
</UpgradeActions>

CustomUpgradeAction is not the only allowed tag inside VersionRange, but I’m going to focus on it, because with this tag we can specify actions, which invokes by code. To use above action you need to specify upgrade actions receiver and override FeatureUpgrading  method. Very straightforward and simple implementation of this method for our above example can looks like this one:

public override void FeatureUpgrading(SPFeatureReceiverProperties properties, string upgradeActionName, System.Collections.Generic.IDictionary<string, string> parameters)
{
	switch (upgradeActionName)
	{
		case "SomeActionName":
			var web = properties.Feature.Parent as SPWeb;
			var list = web.Lists["TestUpgradeList"];
			var item = list.Items.Add();
			item["Title"] = parameters["TitlePrefix"] +  DateTime.Now.ToShortTimeString();
			item.Update();
			break;
		case "AnotherAction":
			//do other stuff
			break;
	}
}

Pretty cool, but what if you have 20-30 different actions? More...

Upgrading SharePoint feature in Visual Studio with CKS Dev extensions

Hi all! This is my revisited post from this one. I am going to show how we can call and test feature upgrade methods directly in visual studio. Lets start.

We need visual studio and CKS Dev extensions. CKS Dev adds additional deployment steps into your sharepoint project. Among them Upgrade Solution. This command simply run Update-SPSolutioncmdlet(or may be stsadm analog). To upgrade feature we need to call Upgrade explicit on the feature. CKS Dev hasn’t step “Upgrade feature”, that’s why we will use “Run PowerShell Script” step to upgrade particular feature. We start from creating custom deployment configuration.

Make this deployment configuration active. Create new folder under solution, for example “Scripts” and add new .ps1 file that will contain upgrade logic. As you remember, the first command in our deployment configuration is Upgrade Solution. It is significant, that this operation is asynchronous, it takes some time to complete, so we can’t upgrade particular feature while .wsp file, that contains this feature is still updating in central admin. We need to wait, until update solution operation will be completed, then we can call feature upgrade method. More...