Version X18 (28.0) is shipped with a complete new JavaScript API to program the online document editor that comes with TX Text Control .NET Server.

The complete JavaScript API documentation can be found in our online docs:

JavaScript API

This article describes typical tasks for inserting and processing form fields such as check boxes, drop-down boxes and form text fields.

Adding Form Text Fields

Form text fields can be used to retrieve textual content from users. A form text field has a default empty width (first parameter in the addTextFormField method) and it is auto-extending.

function addTextFormField() {
        TXTextControl.formFields.getCanAdd(canAdd => {
                if (canAdd) {
                        TXTextControl.formFields.addTextFormField(0, function(insertedFormField) {
                                insertedFormField.setName("Field1");
                        });
                } else {
                        alert("Form field cannot be added at this location.");
                }
        });
}

The getCanAdd method should be used for all fields inherited from TextField. It returns true, if the field can be added at the current input position. A text field (or form fields) cannot be nested and therefore they cannot be inserted at positions that already contain a field. The addtextformfield method returns the field itself in the callback and can be directly used to set additional properties such as the name property that is defined using the setName method.

Get Form Field By Name

While the getItem method returns a field at the current input position or based on a given ID, the forEach method can be used to iterate through all elements of form field collections.

The following asynchronous function loops through all form fields and checks for the name property. If found, the Promise is resolved by returning the form field itself.

function getFormFieldByName(name) {
        return new Promise(resolve => {
                TXTextControl.formFields.forEach(function(formField) {
                        formField.getName(function(formFieldName){
                                if (formFieldName === name)
                                {
                                        resolve(formField);
                                }
                        })
                })
        });
}

var formField = await getFormFieldByName("Field1");

This function needs to be called from an async function with the await operator to wait for the response.

Inserting Check Form Fields

Analogically with form text fields, check boxes can be added using the addCheckFormField method.

function addCheckFormField() {
        TXTextControl.formFields.getCanAdd(canAdd => {
                if (canAdd) {
                        TXTextControl.formFields.addCheckFormField(true);
                }
        });
}

Getting Form Fields at the Input Position

In order to get the field at the current input position, the getItem method can be used. The following code snippet shows how to change the state of a check form field when the field retrieves the input position. Usually, a check box is first activated and then checked and therefore requires two clicks initially to change the state of the check box.

function textFieldEnteredHandler(enteredField) {

    if (enteredField.textField.type === "CHECKFORMFIELD")
    {
        TXTextControl.formFields.getItem(function(checkFormField) {
            checkFormField.getChecked(function(checked) {
                checkFormField.setChecked(!checked);
            })
        })
    }
}

TXTextControl.addEventListener("textFieldEntered", textFieldEnteredHandler);

Adding Selection Form Fields

The following code shows how to insert a non-editable selection form field with pre-defined items. The setSelectedIndex method pre-selects a specific item in the list of items.

function addDropDownFormField(items) {

        TXTextControl.formFields.getCanAdd(canAdd => {
                if (canAdd) {

                        TXTextControl.formFields.addSelectionFormField(0, sff => {
                                
                                // no custom text
                                sff.setEditable(false);
                                sff.setItems(items);

                                // select "Uber"
                                sff.setSelectedIndex(3);
                        });
                }
        });
}

var transportation = ["Bicycle", "Car", "Scooter", "Uber", "Cab"];

addDropDownFormField(transportation);

Test this on your own using all document editor versions including Angular, Node.js, MVC and Web Forms that all share the same JavaScript API.