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 for ASP.NET.
The complete JavaScript API documentation can be found in our online docs:
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 add ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ addTextFormField Method
Adds a new TextFormField. 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 get ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TextFieldCollectionBase Object
╰ getCanAdd Method
Gets a value indicating whether a new text field can be inserted at the current input position. method should be used for all fields inherited from Text ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TextField Object
Represents a text field in a document. . 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 ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl.TextField Object
╰ name Property
Obsolete. property that is defined using the set ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TextField Object
╰ setName Method
Sets the name of a text field. method.
Get Form Field By Name
While the get ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ getItem Method
Gets the form field at the current text input position or the form field with the specified id. method returns a field at the current input position or based on a given ID, the for ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ Collection Object
╰ forEach Method
Executes a callback function for each element. 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 add ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ addCheckFormField Method
Adds a new CheckFormField. 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 get ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ FormFieldCollection Object
╰ getItem Method
Gets the form field at the current text input position or the form field with the specified id. 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 set ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ SelectionFormField Object
╰ setSelectedIndex Method
Sets the index of the selected item of the SelectionFormField. 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.