Section:

DOCX Editor Tracked Changes

Requirements
View Demo
Package: DOCX Editor

Tracked changes in a DOCX file are a feature that allows you to suggest and review changes in a document. This is particularly useful for collaborative work, as it helps you keep track of who made which changes and when.

Apryse Docs Image

Tracked changes can be created by typing in reviewing mode. They may also be accepted or rejected from the reviewing panel while in reviewing mode or by clicking on the tracked change in editing mode.

Apryse Docs Image

Get Tracked Changes Using API

Tracked changes can be retrieved by using the getTrackedChanges API.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
4      const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
5      // retrieves a list of tracked changes in the document
6      const trackedChanges = await officeEditor.getTrackedChanges();
7    });
8  });

Related Links

Tracked changes will be represented by an array of TrackedChange objects.

JSON

1{
2  "id": "number - The unique identifier of the object",
3  "type": "'inserted'|'deleted' - The type of tracked change",
4  "author": "string - The author of the tracked change",
5  "date": "Date - The date of the tracked change",
6  "plainText": "string - The content of the tracked change to be inserted or deleted",
7  "getPagePositions": "function - Returns a promise that resolves to an array of objects containing {pageNumber: number, rect: Core.Math.Rect} for each annotation related to the tracked change"
8}

Tracked Changes Updated Event

Updates to tracked changes may be listened for by the trackedChangesUpdated event on the document. This will be triggered when a tracked change is added, modified, or deleted.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
4      const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
5      let trackedChanges = await officeEditor.getTrackedChanges();
6      
7      // set up a listener to respond to updates about tracked changes
8      instance.Core.documentViewer.getDocument().addEventListener('trackedChangesUpdated', async () => {
9        trackedChanges = await officeEditor.getTrackedChanges();
10      });
11    });
12  });

Related Links

Accept and Reject Tracked Changes Using API

Tracked changes can be programmatically accepted or rejected by calling the following APIs using the trackedChangeId retrieved from the list of tracked changes.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
4      const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
5      const trackedChanges = await officeEditor.getTrackedChanges();
6      
7      // accept a tracked change by ID
8      await officeEditor.acceptTrackedChange(trackedChanges[0].id);
9      
10      // reject a tracked change by ID
11      await officeEditor.rejectTrackedChange(trackedChanges[1].id);
12    });
13  });
14

Related Links

Get tracked change overlay positions

The page position of a tracked change can be retrieved by calling getPagePositions on a single tracked change. This is useful for knowing where the tracked change markup appears in the document at the time of calling this method.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
4      const officeEditor = instance.Core.documentViewer.getDocument().getOfficeEditor();
5      const trackedChanges = await officeEditor.getTrackedChanges();
6      
7      // check the positions of the first tracked change in the document
8      const trackedChangePositions = await trackedChanges[0].getPagePositions();
9      const startRect = trackedChangePositions[0].rect; // the first rect position of the tracked change
10      const startPageNumber = trackedChangePositions[0].pageNumber; // the first page the tracked change appears
11      const endRect = trackedChangePositions[trackedChangePositions.length - 1].rect; // the last rect position of the tracked change
12      const endPageNumber = trackedChangePositions[trackedChangePositions.length - 1].pageNumber; // the last page the tracked change appears
13    });
14  });
15

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales