This is the second part of a series of posts in which I will go through the following steps:

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

Table of Contents

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.

Office 365 – SharePoint – How to create a form framework using SPFx - Part 2 Microsoft Office 365, Microsoft SharePoint, Microsoft SharePoint Online, SPFx or SharePoint Framework

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

Office 365 – SharePoint – How to create a form framework using SPFx - Part 2 Microsoft Office 365, Microsoft SharePoint, Microsoft SharePoint Online, SPFx or SharePoint Framework

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;

Office 365 – SharePoint – How to create a form framework using SPFx - Part 2 Microsoft Office 365, Microsoft SharePoint, Microsoft SharePoint Online, SPFx or SharePoint Framework datecontrol

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.

Avatar for Pieter Veenstra

By Pieter Veenstra

Business Applications Microsoft MVP working as a Principal Architect at HybrIT Services Ltd. You can contact me using contact@sharepains.com

Leave a Reply

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

Discover more from SharePains by Microsoft MVP Pieter Veenstra

Subscribe now to keep reading and get access to the full archive.

Continue Reading

%d