Step 3 - gunjandatta/spfx-forms GitHub 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.

src/extensions/customForm/CustomFormFormCustomizer.ts

import { Environment, Log } from "@microsoft/sp-core-library";
import {
  BaseFormCustomizer
} 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 BaseExtension.properties 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.
    Log.info(LOG_SOURCE, 'Activated CustomFormFormCustomizer with properties:');
    Log.info(LOG_SOURCE, JSON.stringify(this.properties, undefined, 2));
    return Promise.resolve();
  }

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

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

Next Step

⚠️ **GitHub.com Fallback** ⚠️