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. QuiteOffice 365 - SharePoint - How to create forms using SPFx 1

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:

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

 

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

  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.

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

  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.

  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

    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.

  4. How to replace the custom form with the default form because in earlier version there is an edit form option where we can change the form but i did not find the option in the o365 sharepoint

Leave a Reply

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

%d bloggers like this: