Within this series of posts about creating forms using the SharePoint Framework, 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 (3 parts)
- 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)
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.
[code lang=text]
private _completeForm(myParamVar) {
}
[/code]
Before I can use my form classes I need to do some imports:
[code lang=text]
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’;
[/code]
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
[code lang=text]
this._editForm = new Form();
this._editForm.formTitle = “Title”;
[/code]
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
Table of Contents
First I’m starting with text fields simply creating a control of the FormTextControl type and adding the control to the from:
[code lang=text]
let title = new FormTextControl();
title.label = “Title”;
title.controlValue = “”;
title.placeHolder = “.title”;
title.cssId = “title”;
this._editForm.addControl(title);
[/code]
Date Fields
First I’m starting with date fields simply creating a control of the FormDateControl type and adding the control to the from:
[code lang=text]
let ForecastClose = new FormDateControl();
ForecastClose.label = “Forecast Close”;
ForecastClose.placeHolder = “.forecastclose”;
ForecastClose.cssId = “forecastclose”;
this._editForm.addControl(ForecastClose);
[/code]
Dropdowns
[code lang=text]
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”];
this._editForm.addControl(urgency);
[/code]
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:
[code lang=text]
let personResponsible = new FormPeopleDropdownControl();
personResponsible.label = “Person Responsible”;
personResponsible.placeHolder = “.spResponsiblePerson”;
personResponsible.cssId = “spResponsiblePerson”;
console.log(“added person responsible”);
this._editForm.addControl(personResponsible);
[/code]
To populate the dropdown with all the people known to my Office 365 site I’m using the following lines:
[code lang=text]
this._getListDataUsers()
.then((users: Users) => {
this._allUsers = users;
personResponsible.setValues(this._allUsers);
}
[/code]
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:
[code lang=text]
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();
});
}
[/code]
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:
[code lang=text]
this._editForm.render();
[/code]
