SPFx - the first steps

Post date: Aug 29, 2016 5:51:37 PM

Starting with SharePoint Framework can be a daunting task. Especially since one may be new to TypeScript, Node, Gulp and Yeoman which are preferred parts of the framework. In essence SPFx can be a great step for other developers to start working with SharePoint, since you don't need a local SharePoint environment. The only thing you need is a developer tenant of Office 365, which comes for free for up to a year. You could develop locally as well, but I find it easier to work with the developer tenant directly since you have a real Office 365 instance already in place and don't need to use (and produce) Mockup data.

But lets leave the tools for a minute. Just accept the fact that they work, and that you have used scaffolding with Yeoman ‘yo @microsoft/sharepoint’ and started your HelloWorld project with ‘gulp serve’. That’s all we need for now. If not, head over to the source HelloWorld WebPart, and come back here when your done.

So now you have your HelloWorld webpart running both locally and on your development tenant. But if we want to add another property in the property pane? That's quite simple, since everything (so far) is in the same .ts file. First, at the top add the PropertyPaneCheckbox in the import clause of @microsoft/sp-client-preview. When done, we can add the checkbox in our webpart property. I added three just for fun so my group now looks like this:

groupFields: [

PropertyPaneTextField('description', {

label: strings.DescriptionFieldLabel


PropertyPaneCheckbox('valid', {

text: 'Valid'


PropertyPaneCheckbox('governed', {

text: 'Managed by IT'


PropertyPaneCheckbox('hr', {

text: 'Only visible for HR'



And here comes the cool part. When I save my .ts file - gulp (which is still running) makes funny noises (OK, no sound provided in PowerShell which I use) with verbose messages. It recompliles your webpart according to your request.

Reloading the webpart at my development tenant, I see the webpart change instantly. I don't even have to delete it and add it again (like old times). Everything just works Now. Suddenly, programming is fun again when you don't have to wait for hooking up to your environment. I just works, and my previous changes is still there.

SPFx new webpart properties