The all new SharePoint Framework (SPFx) is one of the exciting new developments in the Office 365/SharePoint world. When I first started to look at SPFx, I played around with  the Hello World examples. Quite

quickly I wanted to do more with the new web parts. In this series of posts I will describe to steps to develop a reusable forms solution.

I will go through the following steps:

For all of the above steps I’m using the Hello World web part as my base and will slowly extend this solution to become a solution that allows user to complete a form that will update SharePoint.

I’m going to start of by cleaning up the Hello World web part. So after I created my Hello World web part which in my case I’ve called BidTrackingDashBoardWebPart

after cleaning up my BidTrackingDashBoardWebPart.ts looks like this:

import { BaseClientSideWebPart,   IPropertyPaneConfiguration,   PropertyPaneTextField} from '@microsoft/sp-webpart-base';

import styles from './BidTrackingDashboard.module.scss';
import * as strings from 'bidTrackingDashBoardStrings';
import { IBidTrackingDashBoardWebPartProps } from './IBidTrackingDashBoardWebPartProps';

import { Environment,EnvironmentType} from '@microsoft/sp-core-library';

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export default class BidTrackingDashBoardWebPart extends BaseClientSideWebPart {

public render(): void {


protected get dataVersion(): Version {
return Version.parse('1.0');



<source src=

Interested in reading more … read Displaying SharePoint data in the SPFx web part

I have based this series of posts on some of the work I’ve done for my customers at Triad Group Plc. At Triad we have been looking at the new SharePoint framework since the early releases. If you would like to help us getting you started with SPFx then please feel free to contact me below.