After my participation in the Planet Technologies webcast I felt I needed to finish this blog as I had promised. I have always enjoyed writing but blogging for some reason seemed like it would be time intensive or a laborious undertaking, maybe requiring creativity. Creativity to me is like being funny, I know I can do it but just not sure how good I am at it. I have overcome my own internal objections and started this blog.  And although the title is strange in reference to SPfx and Office Fabric, you will see why as I wend my way through this.

I would like to start off talking about the new SharePoint Framework. For those of you who have not heard about it SharePoint Framework (SPfx) is a method of creating the initial objects in a SharePoint web part or extension Project based on JavaScript.  It has the option to build the project with React, and that is relevant to what I will blog about today.

Lets cover the basics of SPfx.  The framework currently utilizes the command line which is significantly different from the way a SharePoint project would be created in Visual Studio previously. The first thing you will need to do is install NodeJS by running the following command in PowerShell (not in ISE):

npm install -g npm

Then we install Yeoman and Gulp and I know, those of you from a mainly Microsoft background will say what is that? These are open source tools; Yeoman is the command line interface that allows you to work through creating the project and web parts while Gulp runs specific tasks, one of which will be defined in the SPfx as showing the project in the SharePoint workbench via browser.

npm install -g yo gulp

Next we need to install the SharePoint specific yeoman generator by running the following command:

npm install -g @microsoft/generator-sharepoint

When you want to create the project you will create the directory for the project and do CD to change the directory to the project folder. Once in the project folder you will create the Project by running the following command:

yo @microsoft/sharepoint

This starts the yeoman generator and prompts you for the parameters of the project which I am not going to go through here but you can follow the tutorial here.  The 2 current JavaScript libraries supported are Knockout and React. It is the latter that I want to reference in this blog.

There is a new framework for Office called Fabric that works with React. I know, everything is a framework now and here is another one. I believe that this is significant however because it gives the building blocks of the SharePoint Online user experience.

If you look at the site; https://dev.office.com/fabric#/get-started you will see that there are several options and we are focused on the React components available and because it is React, you can easily add them to your scaffold project that you just created with the SharePoint Framework.

To add clarity to the conversation, I referenced Microsoft Fabric but the actual name of the product is Office UI Fabric. The explanatory text says “The official front-end framework for building experiences that fit seamlessly into Office and Office 365.” Which seems to spread the scope of the product into areas such as Office we will want to explore in another blog.

When we choose React, the Fabric UI files are included so no need to install them separately.  There is no need to go over the coding of the web part as detailed here, but I would like to talk about the implications of using the UI components.

Microsoft has provided UI features in the past (think the Modern Experience and the Metro design) and I think that Fabric UI builds on these but based on open source code. The JavaScript libraries are loaded by doing an import statement for the specific component that you are wanting to use such as the toggle below:

import { Toggle } from ‘office-ui-fabric-react/lib/Toggle’;

It is then able to be utilized by referencing the toggle component directly:

<Toggle

defaultChecked={ true }

label=’Enabled and checked’

onAriaLabel=’This toggle is checked. Press to uncheck.’

offAriaLabel=’This toggle is unchecked. Press to check.’

onText=’On’

offText=’Off’ />

This is not new but it is relevant in that it allows the developer to utilize a standard set of interfaces for the web part that work and play well together. And well, isn’t that really what we all want, to get along? Maybe not in a model society sort of way but certainly from a code perspective we just want it to work. And because SPfx already includes the UI it just makes it easy, like …. Wait for it … Peanut butter and Chocolate!

Hits: 75