Part 1: Getting started with SPFx and D3 – perfect bedfellows?

I’m a long time SharePoint hacker who’s grown up with server-side development using the full SharePoint Server Object Model and when you’ve been churning out WSP files for as long as I have you do get quite comfortable at it. However, this paradigm is totally useless in SharePoint Online of course. For good reasons, Microsoft won’t let any custom full trust server code run on servers their data centres. So, that means I have had to branch out of my comfort zone and move into the scary world of client-side development!

SharePoint Framework (SPFx) is the future!

Over recent months I’ve been acquainting myself with the new SharePoint Framework (SPFx) and I must say I’ve become a bit of a fan. It’s a steep learning curve if you come from a C#, object-orientated, strongly typed background as native JavaScript is none of these things. Fortunately, Microsoft have succeeded in bringing some rigour to the development process with TypeScript but that too is a steep learning curve. And then you have to through other frameworks like jQuery, React and Knockout into the mix and it can feel a little overwhelming for an old warhorse like myself.

But this learning exercise has been fruitful because I think the end result, client-side web parts in the main, are far more elegant than their traditional server-based counterparts and this alone justifies the pain. SharePoint Modern and the SPFx delivers a UI that is comparable to other modern platforms and one which can provide proper support for mobile devices. It has breathed new life into SharePoint which, as a brand, has reached adulthood – having just turned 18!

There is no doubt in my mind that Microsoft sees the SharePoint Modern UX is the future and although Classic SharePoint will be with us for some time still, no money is being spent there, so in my view Classic is deprecated – it’s just that no one from Microsoft has yet been brave enough to formally say so!

Here’s my logic:

• Modern is the future,
• and as classic web parts are totally incompatible with Modern,
• and currently the only way to build client-side web parts that are supported in Modern is by using the SPFx,
• then we’d better embrace SPFx or risk being left behind.

I think this is a pretty sound rationale for trying to get to grips with the SPFx.

Data-Driven Documents (D3)

All this climbing is making my brain ache but there is one more hill that I wanted to tackle and that was the D3.js visualisation engine. Why? – because it looks really cool. The charting capabilities are amazing but for me what really appeals is the potential to make dynamic tree view maps. At the back of my mind I envisage a D3 tree view map providing a potential UI for a number of things in SharePoint land such as:

• An interactive site-map
• A really cool way to navigate document libraries
• An even cooler way to consume search results
• A way in which we might build a structured authoring system

I suspect there many other uses as well and that’s not even touching the huge potential for charting and BI!

If you haven’t seen or heard of D3 then I would encourage you to head on over to the web site at https://d3js.org/ and take a look at the examples there. In particular, take a look at the Salesforce training example at https://mohansun-canvas.herokuapp.com/content/training/. Imagine a UI like that in SharePoint but instead of accessing videos on YouTube it provides users with an interactive way to access documents in a library – how cool would that be!

So that’s where I think we might be heading with this series of articles but first things first. As far as I can tell no one has yet set about bringing these 2 things together and that’s the point of this first post.

Bringing D3 and SPFx together

The objective here is just to see if we can get this baby off the ground. Let’s just figure out what we need to do to get a D3 representation running inside a SPFx web part.

Well, first up we need a new SPFx web part project. I’ve written a whole series of article on getting started with the SPFX starting with this one https://kaboodlesoftware.com/2018/09/08/adventures-with-the-sharepoint-framework-spfx-part-1-getting-started so please hop over there if you need some help on setting up a development environment and creating a simple web part that’s the equivalent of “Hello World”.

The start point is assumed to be that we have created a brand new SPFx Web Part project without additional JavaScript library dependencies i.e. it’s not a React or Knockout based web part. I also assume that we are using Visual Studio Code as the primary development tool.

After provisioning a new project, I rather imaginatively called mine D3 Test, do a quick gulp serve to check that all is well and you should see the default output something like that shown below.

Next, we use the Node Package Manager to import D3. At the Terminal command line in VS Code install D3 and the D3 types with the following commands:

npm install d3 –save

npm install @types/d3 –save

Next, add an import statement to the webpart.ts file so as we can access the D3 library.

    import * as d3 from‘d3’;

Then replace the inner workings of the web part’s render method with the following:

Then gulp serve the project again and marvel at your own genius!

That all turned out to be incredibly simple. In just 2 lines of code we can use D3 to render a blue circle in our web part!

In Conclusion

Pretty as that may be, rendering blue dots is not a terribly useful business objective, but that was never the point of this post. Rather, the aim was just to see how easy it would be to get D3 and SPFx to work together. As it turns out, it was remarkably easy and this leads me to conclude that these 2 technologies might indeed make good bedfellows.

What’s next?

I’m honestly not sure where this series is going to lead us. It’s a bit of a trek into the unknown but please stay tuned and I’ll be back soon to let you know what I’ve come up with.