TX Text Control X15 allows the insertion and manipulation of text fields of type TXText
╰ TXTextControl Namespace
╰ ApplicationField Class
The ApplicationField class supports text field formats of applications such as Microsoft Word. and TXText
╰ TXTextControl Namespace
╰ TextField Class
An instance of the TextField class represents a text field in a Text Control document. . A TextField is a TX Text Control internal field and ApplicationFields are MS Word compatible MergeFields, FormFields or any other supported field type.
Javascript: TXText
╰ JavaScript API
╰ TXTextControl.MergeField Object
Represents an MS Word specific MERGEFIELD field. can be added using the Reporting ribbon tab that allows the insertion of fields from a specified data source such as Json or an XML string. These fields can now be added programmatically using the Java
╰ JavaScript API
JavaScript API .
The following JavaScript code creates and inserts a new merge field into the document at the current input position:
var mergeField = new TXTextControl.MergeField(); | |
mergeField.name = "company_name"; | |
mergeField.text = "«" + mergeField.name + "»"; | |
mergeField.editable = false; | |
TXTextControl.addMergeField(mergeField); |
The textFieldEntered event that can be attached using the Javascript: TXText
╰ JavaScript API
╰ TXTextControl Object
╰ addEventListener Method
The addEventListener function registers event listener functions on the TXTextControl object. is fired when the input position enters a text field. The event arguments return the properties of the current field. In order to manipulate the field object directly, the Javascript: TXText
╰ JavaScript API
╰ TXTextControl Object
╰ getTextFields Method
Obsolete. can be used which returns all fields or the field at the current input position.
The following JavaScript code changes the field text when the input position enters the text field:
function textFieldEnteredHandler(e) { | |
TXTextControl.getTextFields(function (e) { | |
var currentField = e[0]; | |
currentField.text = "New Field Text"; | |
}, true); | |
} |
ApplicationFields are technically all field types that are supported by MS Word including merge fields, content controls and legacy form fields. The following JavaScript code inserts a legacy form drop down field into the TX Text Control:
var comboBox = new TXTextControl.ApplicationField(); | |
comboBox.typeName = "FORMDROPDOWN"; | |
comboBox.parameters = ["w:name w:val=\"Dropdown1\"", | |
"w:enabled w:val=\"true\"", | |
"w:calcOnExit w:val=\"false\"", | |
"w:listEntry w:val=\"Test1\"", | |
"w:listEntry w:val=\"Test2\""]; | |
comboBox.text = "ComboBox"; | |
comboBox.editable = false; | |
comboBox.doubledInputPosition = true; | |
TXTextControl.addTextField(comboBox); |
In the document, form element fields are represented by their display text (as they would be printed or exported to PDF). All field objects provide a Javascript: TXText
╰ JavaScript API
╰ TXTextControl.TextField Object
╰ bounds Property
Obsolete. that provides the size and the location of a field. This information can be used to render the actual form element at that location. The following code renders an HTML drop down box at the field location:
function drawOverlay() { | |
_divOvr = document.getElementById("divOvr"); | |
var sParams = ""; | |
// create the options based on the drop down items | |
for (let param of _currentField.parameters) { | |
if (param.startsWith("w:listEntry")) { | |
var arrStr = param.split(/["]/); | |
sParams += "<option>" + arrStr[1] + "</option>"; | |
} | |
} | |
// create a new html select object | |
if (!_divOvr) { | |
_divOvr = document.createElement("select"); | |
_divOvr.className = "overlay"; | |
_divOvr.id = "divOvr"; | |
_divOvr.innerHTML = sParams; | |
_container.appendChild(_divOvr); | |
} | |
// retrieve the field location in the document | |
var fldPos = _currentField.bounds.location; | |
// and calculate the offset location and zoom factor | |
var x = _textView.offsetLeft + (fldPos.x - _txtViewLoc.x) * _zoom; | |
var y = _textView.offsetTop + (fldPos.y - _txtViewLoc.y) * _zoom; | |
// set position and size | |
_divOvr.style.fontSize = (8 * _zoom) + "pt"; | |
_divOvr.style.zIndex = _textView.style.zIndex + 10; | |
_divOvr.style.left = x + "px"; | |
_divOvr.style.width = (_currentField.bounds.size.width * _zoom) + "px"; | |
_divOvr.style.minHeight = (_currentField.bounds.size.height * _zoom) + "px"; | |
_divOvr.style.top = y + "px"; | |
// add change event to change text of the field | |
// when an option has been selected | |
$('#divOvr').change(function () { | |
var val = $("#divOvr option:selected").val(); | |
_currentField.text = val; | |
removeElement(); | |
}); | |
$('#divOvr').focus(function () { | |
this.selectedIndex = -1; | |
this.focus(); | |
}); | |
_divOvr.focus(); | |
} |
The following screen cast shows the inserted drop down box in action. A custom button has been added to a new ribbon group to insert a drop down field.
Try this on your own and download the sample hosted on GitHub.