Document Editor · Mail Merge

Drag and Drop Fields

Add merge fields through a custom drag-and-drop interface.

Custom reporting workflow

Drag fields into the document

Choose a field from the palette and drag it to the exact document location where the merge field should be inserted.

Customer field paletteDrag to insert

The drop handler converts the pointer location into a document position before creating the merge field.

What this demonstrates

Drag and Drop Fields

This sample replaces the standard Reporting field picker with an application-owned palette. It demonstrates how a custom UI can still use the editor's field model and preserve the user's exact drop location.

Key members

Create the field object

new TXTextControl.MergeField

Insert at the caret

TXTextControl.addMergeField

Set the drop position

TXTextControl.setInputPositionByLocation

How it works

Each palette item carries a field name in data-merge-field. During dragover, the demo translates browser pixels into TX Text Control twips and updates the editor's input position so the caret follows the pointer.

On drop, the exact location is applied once more, then a MergeField is created with its name and display text. The field is inserted only after the editor confirms the new position.

Insert the field at the drop location

TXTextControl.setInputPositionByLocation(location, () => {
    const field = new TXTextControl.MergeField();
    field.name = name;
    field.text = `«${name}»`;
    TXTextControl.addMergeField(field);
}, showError);