Document Editor · Mail Merge

Data Source from JavaScript

Use a client-side data source to design and preview templates.

Client-side data source

Design with JSON loaded in JavaScript

The editor starts empty and receives the invoice data after the page loads. Use the Reporting ribbon to insert fields, nested values, and repeating blocks from that live data source.

Data source ready in the browserJSON API

Try fields such as Customer_Customer.Name and the repeating Sales_SalesOrderDetail block. The data is loaded by TXTextControl.loadJsonData.

What this demonstrates

Data Source from JavaScript

This sample demonstrates the client-side half of a reporting workflow: the page obtains JSON asynchronously, passes it to the editor, and lets users design the template with the Reporting ribbon.

Key members

Load the JSON data source

TXTextControl.loadJsonData

Open the Reporting ribbon

TXTextControl.ribbon.selectedTab

How it works

The browser fetches the converted invoice JSON and passes it to TXTextControl.loadJsonData after the editor and Reporting ribbon are ready. Root properties become fields, nested objects expose dot-notation members such as Customer_Customer.Name, and arrays such as Sales_SalesOrderDetail supply repeating merge blocks.

Because the source is loaded in JavaScript, an application can obtain it from an API, let a user choose a record, or refresh it without rebuilding the Razor view. The same JSON shape can later be reused by server-side MailMerge.MergeJsonData.

Load the converted JSON source

const response = await fetch("/data-source");
const json = await response.text();

TXTextControl.loadJsonData(json, () => {
    TXTextControl.ribbon.selectedTab = "tabReports";
}, showError);