Office 365 – SharePoint – How to create a form framework using SPFx – Part 2

This is the second part of a series of posts in which 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)

In my past few posts I’ve looked at creating an SPFx web part that displays a form for users to fill in.

This post will describe the creation of the actual fields on the form.

The different field types that I’m describing in this post are:

• Single line of text
• Date
• Dropdown / Choice
• People picker/ people drop down

Before looking at the above field types I’m first looking at a generic parent class which can be used as an abstract parent class for all of the above.

formControl

Within the formControl.ts file that I created in my previous post I’m creating a class:

export default class FormControl {

}

Within this class I’m going to create a number of properties:

public mode: string; // 'edit', 'display', 'new'
public position: number; // order number 0,1,2,3 ...
public label: string; // the label displayed on the form for this control
public placeHolder: string; // placeholder on the form html
public cssClass: string; // the class used for the css
public cssId: string; // the id used for the css
public controlValue: string; // the value of the control

constructor() {
   this.cssClass = "tr-field";
}

then I’m creating a render method

public render(): void {

}

Then to collect the values of the html that has been selected on a page I’m adding an method that gets the value out of my html. for formControl I don’;t need to worry about including any code here. As the method in the child classes will implement this method properly.

public getInputValue(): string {
return "getInputValue not implemented for control";
}

textControl

Now as for each of the inheriting controls , I will need to import the formControl.

So I’m going to update formTextContgrol.ts with

import FormControl from './formControl';

Then for the styling I’m going to include the following import as well. In one of my following posts I will describe all the branding bits of SPFx:

import styles from './form.module.scss';

now we’re ready to create a class for my text fields:

export default class FormTextControl extends FormControl {
}

Oh, this is easy! FormTextControl now can use all the methods and properties of my FormControl while adding the text control to the form can simply by done by the AddControl method of the form.

Now it’s time to add my render and getInputValue methods

public render() {
  let html: string = '';
  html = `
    <div class="${styles.bidEditFormRow}">` + this.label + `</div>
`;

  const controlContainer: Element = document.querySelector(this.placeHolder);
  controlContainer.innerHTML = html;
}

All the above code does, is replace the placeholder that was put in place by the form’s render method with the label and the input box.

Then to support the save function of the form

public getInputValue(): string {

  let element = document.querySelector("input#" + this.cssId);
  if ((element).value) {
    this.controlValue = (element).value;
    return this.controlValue;
  } else {
    return "getInputValue not implemented for control";
  }
}

document.querySelector(“input#” + this.cssId) will find the element on your page and then the controlValue of the cotgnrol will be set and return by the getInputValue. So that a save method on the form can do the saving of the data.

Now all we have to do is implement the same for Dates, drop downs and people pickers.

DateControl

Fairly similar to the text control the render method of the date control will create an input control for us. This is an HTML5 example so you might find that older browsers don’t support this. But it keeps my example simple

html = `
<div class="${styles.bidEditFormRow}">${this.label}</div>
`;
const dateContainer: Element = document.querySelector(this.placeHolder);
dateContainer.innerHTML = html;

As the drop down and the people picker are slightly more complicated I will look at those in a separate post that will follow soon.

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.