Step 3 - gunjandatta/spfx-forms Wiki

Previous Step

Code Custom Forms

Import Components

We will include the Environment component from the core library, and the WebParts component from the SharePoint REST Framework.

import { Environment, Log } from "@microsoft/sp-core-library";
import { WebParts } from "gd-sprest-bs";

Code Updates

Complete the following:

  • Clear the contents of the sass file
  • Clear the properties interface
  • Remove the _onSave and _onClose methods
  • Set the onRender method to render the custom list form The next step will give an overview of customization options.


import { Environment, Log } from "@microsoft/sp-core-library";
import {
} from '@microsoft/sp-listview-extensibility';

import * as strings from 'CustomFormFormCustomizerStrings';
import styles from './CustomFormFormCustomizer.module.scss';

import { WebParts } from "gd-sprest-bs";

 * If your form customizer uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the object.
 * You can define an interface to describe it.
export interface ICustomFormFormCustomizerProperties { }

const LOG_SOURCE: string = 'CustomFormFormCustomizer';

export default class CustomFormFormCustomizer
  extends BaseFormCustomizer<ICustomFormFormCustomizerProperties> {

  public onInit(): Promise<void> {
    // Add your custom initialization to this method. The framework will wait
    // for the returned promise to resolve before rendering the form., 'Activated CustomFormFormCustomizer with properties:');, JSON.stringify(, undefined, 2));
    return Promise.resolve();

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

  public onDispose(): void {
    // This method should be used to free any resources that were allocated during rendering.

Next Step

⚠️ ** Fallback** ⚠️