Search results

Form fields in JavaScript DocumentEditor control

22 Oct 2021 / 2 minutes to read

DocumentEditorContainer component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.

Form Fields

Insert form field

Form fields can be inserted using insertFormField method in editor module.

Copied to clipboard
//Insert Text form field
documentEditor.editor.insertFormField('Text');
//Insert Checkbox form field
documentEditor.editor.insertFormField('CheckBox');
//Insert Drop down form field
documentEditor.editor.insertFormField('Dropdown');

Get form field names

All the form fields names form current document can be retrieved using getFormFieldNames().

Copied to clipboard
let formFieldsNames: string[] = documentEditor.getFormFieldNames();

Get form field properties

Form field properties can be retrieved using getFormFieldInfo().

Copied to clipboard
//Get Text form field by using bookmark name.
let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
//Checkbox form field by using bookmark name.
let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
//Dropdown form field by using bookmark name.
let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;

Set form field properties

Form field properties can be modified using setFormFieldInfo.

Copied to clipboard
// Set text form field properties
let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
textfieldInfo.defaultValue = "Hello";
textfieldInfo.format = "Uppercase";
textfieldInfo.type = "Text";
documentEditor.setFormFieldInfo('Text1', textfieldInfo);

// Set checkbox form field properties
let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
checkboxfieldInfo.defaultValue = true;
documentEditor.setFormFieldInfo('Check1', checkboxfieldInfo);

// Set checkbox form field properties
let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
dropdownfieldInfo.dropDownItems = ['One', 'Two', 'Three']
documentEditor.setFormFieldInfo('Drop1', dropdownfieldInfo);

Export form field data

Data of the all the Form fields in the document can be exported using exportFormData.

Copied to clipboard
let formFieldDate: FormFieldData[] = documentEditor.exportFormData();

Import form field data

Form fields can be prefilled with data using importFormData.

Copied to clipboard
let textformField: FormFieldData = { fieldName: 'Text1', value: 'Hello World' };
let checkformField: FormFieldData = { fieldName: 'Check1', value: true };
let dropdownformField: FormFieldData = { fieldName: 'Drop1', value: 1 };
//Import form field data
this.container.documentEditor.importFormData([textformField, checkformField, dropdownformField]);

Reset form fields

Reset all the form fields in current document to default value using resetFormFields.

Copied to clipboard
documentEditor.resetFormFields();