API Reference > ui-core > Form > Form

Form Class

Component used to create a Form using supplied properties to specify the fields of the Form.

example
// Example of using a form as contents of a modal dialog. export class ExampleForm extends React.Component { public static open() { const form = new ExampleForm({}); ModalDialogManager.openDialog(form.render()); }

protected async handleSubmit(values: FieldValues): Promise { await this.processFormSubmission(values); ModalDialogManager.closeDialog(); const msg = JSON.stringify(values); IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg)); }

protected async processFormSubmission(values: FieldValues): Promise { // if error occurs during async processing throw an Error and return error message back to form. throw new Error("Error processing form"); }

protected handleCancel() { ModalDialogManager.closeDialog(); }

public render() { const fields: FieldDefinitions = { Name: { label: this._nameLabel, editor: "textbox", value: "John Smith", }, PickList: { label: this._pickListLabel, editor: "dropdown", value: "one", options: ["one", "two", "three", "four"], }, };

return (

<Dialog title="Example Form" opened={true} onClose={() => this.handleCancel()}> <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)} fields={fields} />
); }

Extends

Methods

Name Description
constructor(props: FormProps): Form    
render(): Element    

Defined in

Last Updated: 29 November, 2022