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

Within this series of posts I will go through the following steps:

So far in this series of posts we got the clickable zone that creates a form by calling the completeForm method but we haven’t actually put the completeform method together yet.

So first of all I’m creating a method. I’m passing in a parameter so that I can use this method for both the editing of existing items ( I’ll set the parameter to the selected item ) or I can use this method to create new items if I want to create a new item.

private _completeForm(myParamVar) {


Before I can use my form classes I need to do some imports:

import Form from './Controls/form';
import FormDropdownControl from './Controls/formDropdownControl';
import FormPeopleDropdownControl from './Controls/formPeopleDropdownControl';
import FormDateControl from './Controls/formDateControl';
import FormTextControl from './Controls/formTextControl';

Now finally we will get to the easy stuff: constructing the forms and the fields on the form.
I’m starting with the following two line in the completeForm method to create a form object

this._editForm = new Form();
this._editForm.formTitle = "Title";

Then for each of my fields I need to include some lines to create my fields. For each field type this will be slightly different:

Text fields

First I’m starting with text fields simply creating a control of the FormTextControl type and adding the control to the from:

let title = new FormTextControl();
title.label = "Title";
title.controlValue = "";
title.placeHolder = ".title";
title.cssId = "title";

Date Fields

First I’m starting with date fields simply creating a control of the FormDateControl type and adding the control to the from:

let ForecastClose = new FormDateControl();
ForecastClose.label = "Forecast Close";
ForecastClose.placeHolder = ".forecastclose";
ForecastClose.cssId = "forecastclose";


First I'm starting with dropdown fields simply creating a control of the FormDropdownControl type and adding the control to the from. One difference though is that I now need to set the available values of the drop down

let urgency = new FormDropdownControl();
urgency.label = "Urgency";
urgency.placeHolder = ".urgency";
urgency.cssId = "urgency";
urgency.values = ["Low", "Medium", "High"];

People picker

Like with the dropdown control, with the people picker I will also need to set the available values. I’m going to query Office 365 for all the available users:

let personResponsible = new FormPeopleDropdownControl();
personResponsible.label = "Person Responsible";
personResponsible.placeHolder = ".spResponsiblePerson";
personResponsible.cssId = "spResponsiblePerson";
console.log("added person responsible");

To populate the dropdown with all the people known to my Office 365 site I’m using the following lines:

.then((users: Users) => {
this._allUsers = users;


So now we need to implement a method _getListDataUsers to get all the users back:
this sounds more complicated than it is. Just one REST API call and the job is done:

public _getListDataUsers(): Promise {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/siteusers`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();

So now we have the form created and it's aware of all the fields. Just one more thing to do and the form will appear. The form can be rendered by just including the following line:



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.


Please leave a comment or feedback

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

You are commenting using your 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.