A highly requested feature for our HTML5-based Web.TextControl is the ability to show field overlays or custom elements such as HTML form elements on top of all types of fields.

In version X15, fields provide it's location using the bounds property that can be used to render a custom overlay at this location. The following screen video shows a sample implementation of these custom overlays:

The pop-up overlay can be used to display the field name and specific properties of a merge field. Additionally, a button has been added to open a field properties dialog directly from the overlay.

The textFieldEntered event returns the TextFieldEventArgs object that contains the bounds property (in version X15):

function textFieldEnteredHandler(e) {
    _fieldBounds = e.bounds;
    _fieldName = e.fieldName;
    _fieldParameters = e.parameters;
    drawOverlay();
}

Based on the relative bounds location and the text view offset location, the position of the field relative to the Web.TextControl can be easily calculated and used to display any overlay at that location. By listening on the zoomFactorChanged and textViewLocationChanged events, the layover can be also moved when the document is scrolled and zoomed.

This concept can be used for many different applications including the rendering of form elements on top of MS Word form fields and content control fields. All of these fields are accessible in version X15 using the new TXTextControl.getTextFields method that returns an ApplicationField object. This allows the development of MS Word compatible form completion applications based on Web.TextControl.