We'll need to define our custom field type within the interface of the project. In this example, we are creating a password field:
-
Start by opening the interface file within your /src/webparts/{web-part-name} folder. This is the I{web-part-name}Props.ts filename.
- Within the file, modify the existing interface by adding your custom field type. In this example, we'll call it password and it will be a type of string:
export interface IHelloCustomPropertyPaneFieldWebPartProps {
description: string;
password: string;
}
- Next, we’ll need to import the custom field type to our WebPart class. The custom field type is now available as PropertyPaneCustomField, Visual Studio Code’s fantastic Intellisense will help you right away:
- Since SPFx has no knowledge of how our custom field type might work, or look visually, we need to provide code to actually render the element. We are going to create label element and input...
