Document Editor · Advanced Features

Form Fields

Create smart forms with checkboxes, drop-downs and form text fields.

Live form field API

Build and inspect smart forms

Place the caret in the document, insert a Word-compatible field, and use the live model to understand how form fields remain addressable document objects.

Insert a form field

Choose a field type and configure its document identity.

AT CARET

Field name

Move into a form fieldThe inspector follows the field containing the current input position.

Fields in this text part

Select an entry to move the editor to that field.

0 FIELDS

No form fields have been inserted yet.

What this demonstrates

Form fields are structured document data

TX Text Control combines visual, Word-compatible form controls with a JavaScript object model. Applications can build forms dynamically, react to user input, inspect field metadata, and navigate to fields without parsing document text.

Field collection

TXTextControl.formFields

Insertion

FormFieldCollection.addTextFormField / addSelectionFormField

Current field

FormFieldCollection.getItem

Navigation

TextField.scrollTo

How it works

TXTextControl.formFields represents the fields in the active text part. Its insertion methods create TextFormField, SelectionFormField, CheckFormField, and DateFormField objects at the current caret position.

A SelectionFormField becomes a fixed drop-down when setEditable(false) is used. With setEditable(true), the same field becomes a combo box that accepts either a configured item or custom text.

FormFieldCollection.getItem returns the form field containing the current input position. Common TextField members expose its name, ID, text range, and value, while type-specific members provide items, checked state, or date information.

The collection map combines getCount and elementAt to discover fields dynamically. Calling scrollTo on an entry moves the input position into that field and brings it into view.

Create and configure a drop-down field

TXTextControl.formFields.addSelectionFormField(1000, field => {
    field.setName("ShippingMethod", () => {
        field.setEditable(false, () => {
            field.setItems(["Standard", "Express", "Overnight"]);
        });
    });
});

Read the field at the caret

TXTextControl.formFields.getItem(field => {
    if (!field) return;
    field.getName(name => console.log(name));
    field.getStart(start => console.log(start));
});