TX Text Control .NET Server

Tracked Changes

Topic

Reviewers accept or reject the tracked changes of a document in the Document Viewer without editing the document. Your code opens the tracked changes toolbar and reads the decisions users made.

The examples change the view of the ASP.NET Core tutorial.

How Reviewing Works

A tracked change is an insertion or a deletion that was recorded with its author while the document was edited, for example in the Document Editor, as described in Track Changes, or in MS Word. Documents keep their tracked changes in DOCX, RTF and the TX Text Control format; the Core engine doesn't load DOC.

When a document with tracked changes is loaded into the viewer, the tracked changes toolbar is enabled automatically. With it, users move through the changes of the document and accept or reject each one. The viewer marks the decision at the place of the change. From left to right, the buttons of the toolbar are First Change, Previous Change, Accept and Move to Next, Reject and Move to Next, Next Change and Last Change:

The tracked changes toolbar below the main toolbar of the Document Viewer and a service agreement with marked insertions and deletions, the first change accepted and marked with a green check mark

Insertions and deletions are shown in the color of their author, and brackets mark where each change begins and ends. In the mobile view, the toolbar is at the bottom of the viewer.

Show the Toolbar and Read the Decisions

TXDocumentViewer.trackedChanges returns the TrackedChanges object. The following view opens the toolbar and logs the decisions when users click Export Decisions. Put a DOCX document with tracked changes into the App_Data folder as contract.docx, and replace the content of Views/Home/Index.cshtml:

@using TXTextControl.Web.MVC.DocumentViewer

<div style="width: 800px; height: 600px;">

@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentPath = "App_Data/contract.docx";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
}).Render()

</div>

<input type="button" onclick="exportDecisions()" value="Export Decisions" />

<script>
    window.addEventListener("documentViewerLoaded", function () {
        TXDocumentViewer.trackedChanges.showToolbar(true);
    });

    function exportDecisions() {
        // One entry for each tracked change
        var decisions = TXDocumentViewer.trackedChanges.getItems();
        console.log(JSON.stringify(decisions));
    }
</script>

The code works as follows:

  • showToolbar shows the tracked changes toolbar with true and hides it with false.
  • getItems returns an array with an object for each tracked change. Its accept property is true for an accepted change, false for a rejected change and null for a change the user hasn't decided on yet.

Run the application, accept the first change, reject the second and click Export Decisions. The console shows an array such as [{"accept":true},{"accept":false},{"accept":null}].

getItems returns only the decisions, not the author, text or kind of the changes. The viewer raises no events for tracked changes, so read the decisions when your application needs them, for example when users click a button of your own.

Process the Decisions on the Server

The reference doesn't document how the array of getItems corresponds to the tracked changes of the document on the server, or whether saving the document from the viewer applies the decisions. To accept or reject changes in a stored document on the server, use ServerTextControl.TrackedChanges: TrackedChangeCollection.Remove accepts a change with true and rejects it with false.

The blog article Document Viewer: Processing Tracked Changes introduces the toolbar, and Building a Modern Track Changes Review Workflow in ASP.NET Core C# builds a review process on the server.

Next Steps