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:

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');
}

}

 

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.

 

Advertisements

11 thoughts on “Office 365 – SharePoint – How to create forms using SPFx

    1. Hi Jeff,

      I have used PowerApps, and they are absolutely great. The only problem with PowerApps is that they aren’t part of my SPFx web part. With the solution that I developed here I’ve got full flexibility over what and how I want to present my form to my users all using the same framework as my SPFx web part. So I could just as easily create a form where my data lives in multiple SharePoint list or maybe even outside SharePoint.

      Liked by 1 person

  1. Hi,thanks for this great post,really help me a lot.I would really appreciate if you have a blog post on webhook also.

    Like

      1. Thanks for taking the time to reply,i would love to see a STEP BY STEP implementation of a webhook specially how to automatically renew the expirydate of a subscription on a list. Azure functions implementation would be great..

        Like

  2. Hi Pieter,

    Thank you for the post – it’s really helpful especially now when we have not so many options for customizing forms in modern UI.

    I want to mention another approach to creating integrated forms – Plumsail Forms solution:
    https://plumsail.com/forms/sharepoint-forms/

    It’s not free, but provides huge flexibility in designing modern fully-responsive forms for SharePoint.

    Like

  3. Hi,

    I’m a little bit confused with what order we should be following your steps.

    Do we visit these links first:
    – Displaying SharePoint data in the SPFx web part
    – Creating a clickable zone within the web part
    – Creating a form in an SPFx web part
    – etc?

    Or do we start from where it says:

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

    Thanks

    Like

    1. Sorry for the delay. I’ve been on leave for the last 2 weeks.
      I would start by creating a base SPFX web part whenever I create a new SPFx web part. Once that is working add small pieces of functionality. So this could be displaying data form a data source.

      Like

Please leave a comment or feedback

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.