Office 365 – SharePoint – How to create forms using SPFx

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:

• Displaying SharePoint data in the SPFx web part
• Creating a clickable zone within the web part
• Creating a form in an SPFx web part
• Displaying status update within the SPFx Web part
• Saving data  from a form to SharePoint
• Updating fields within SharePoint (including choice, people, date and text fields)

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:

[code lang=text]
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’);
}

}
[/code]

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. 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.