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.

 

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

  1. commented on June 8, 2017 by jeffangama

    thanks for the sharing !
    Have you tried powerapps too for forms ?

    • commented on June 8, 2017 by Pieter Veenstra

      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.

      • commented on June 9, 2017 by jeffangama

        Noted that, would be great if you share your code 🙂 GitHub maybe ? thxx

  2. commented on June 9, 2017 by Pieter Veenstra

    Hi Jeff, I totally agree, but at the moment I can’t share the full code yet. Hopefully the snippets in this series of posts is helpful.

  3. commented on July 23, 2017 by keshav taurah

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

    • commented on July 23, 2017 by Pieter Veenstra

      Hi Keshav
      Ok I will have a look at webhooks over the next couple of weeks. Any specific question you would like to see answered?

      • commented on August 1, 2017 by keshav taurah

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

  4. commented on February 27, 2018 by Dmitry Kozlov

    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.

  5. commented on August 23, 2018 by Terry

    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

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

Leave a Reply

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

%d bloggers like this: