Step 4 - gunjandatta/spfx-forms GitHub Wiki

Previous Step

Customizing the List Forms

SPFx List Form WebPart

The SharePoint REST Framework w/ Bootstrap has new webpart designed for SPFx. For this example, we will use the SPFxListFormWebPart to render the custom list form. This component will also be used for the webpart we will create to help apply/remove the custom list form.

onRender Method

The render method for the SPFx extension will simply need to pass the SPFx extension information and the environment type. It will render the ListForm component also available in the library.

  public render(): void {
    // Render the custom form webpart
    WebParts.SPFxListFormWebPart({
      envType: Environment.type,
      spfx: this as any
    });
  }

SPFxListFormWebPart Properties

The relevant properties for customizing a list form are shown below.

Name	Type	Description
envType	number	The environment type.
onGetListInfo	(props: Helper.IListFormProps) => Helper.IListFormProps	Customize the list query that loads the item/list information.
onDisplayFormRendering	(props: IListFormDisplayProps) => IListFormDisplayProps;	Allows you to customize the list form display properties before rendering the display form.
onDisplayFormRendered	(form?: IListDisplayForm) => void;	Triggered after the display form is rendered.
onEditFooterRendering	(props: ITooltipGroupProps) => ITooltipGroupProps;	Allows you to customize the footer buttons.
onEditFormRendering	(props: IListFormEditProps) => IListFormEditProps;	Allows you to customize the list form edit properties before rendering the edit form.
onEditFormRendered	(form?: IListEditForm) => void;	Triggered after the edit form is rendered.
onSaving	(values: any) => any;	Allows you to customize/default the item properties before saving/updating the item.
onSaved	(item: any) => void;	Triggered after the list item is created.
spfx	any	The SPFx extension/webpart object.

onGetListInfo

The get list information properties can be updated to control the fields to render, and allows for an OData query for expanding complex field types.

Name	Type	Description
contentType	string	The content type name to use to render the form.
excludeFields	string[]	The internal field names to exclude from the form.
fields	string[]	The internal field names to render. By default, the content type will determine the fields to render.
itemId	number	The item id to load.
listName	string	The list name.
loadAttachments	boolean	Flag to load and render the attachments.
query	OData	The OData query used to load an item. This is useful for expanding lookup field types.
webUrl	string	The web containing the list.

onDisplayFormRendering

To further customize the list form, you can use the following properties.

Name	Type	Description
className	string	The class name to apply to the element.
displayAttachments	boolean	Flag to display the attachments.
groupClassName	string	The class name to apply to the group element.
rowClassName	string	The class name to apply to the row element.
onControlRendered	(ctrl: IFormControl, field: Types.SP.Field) => void;	Triggered after the field control is rendered.
onControlRendering	_(ctrl: IFormControlProps, field: Types.SP.Field) => IFormControlProps	Promise;_
onFormRendered	(form:IForm) => void	Triggered after the form is rendered.

onEditFormRendering