In order to create new and innovative products, we are working closely with customers to find new ways to work with documents. Mobile devices and sharing platforms change the way how documents are used in business processes. Document collaboration and sharing is one of the major research fields in our development.

Creating documents is an ongoing process and by using software that allows real-time updates and documents to be saved to a central repository in the cloud, different teams can contribute to these documents and work more effectively with ongoing updates.

Text Control provides customizable libraries to integrate document collaboration processes into business applications. Since version X16, MS Word compatible track changes is available as a new feature. TX Text Control enables document collaboration features in applications. Track Changes, also known as redline, or redlining, is a way to keep track of the changes different authors make to a document.

This sample shows how to use the TX Text Control API to visualize tracked changes outside the editor. This could be a useful feature in mobile applications to provide an overview of changes made in a document over a specific period of time.

The following screen video shows this project in action:

In the ASP.NET MVC project, the following model is used to show the tracked changes:

public class TrackedChangeModel
{
    public string DocumentName { get; set; }
    public DateTime FirstChange { get; set; } = DateTime.MaxValue;
    public List<TrackedChange> TrackedChanges { get; set; } = new List<TrackedChange>();
}

public class TrackedChange
{
    public string UserName { get; set; }
    public DateTime ChangeTime { get; set; }
    public string Text { get; set; }
    public string HighlightColor { get; set; }
    public ChangeKind ChangeKind { get; set; }
    public string Image { get; set; }
}

public enum ChangeKind
{
    InsertedText = 4096,
    DeletedText = 8192
}

For demo purposes, this model is created in the Controller Index method using a ServerTextControl instance that is used to loop through the TXTextControl.TextPartCollection class to retrieve all classes of type TXTextControl.TrackedChange class.

public ActionResult Index()
{
    // set document name to dummy document
    string sDocumentName = Server.MapPath("~/template.docx");

    // create a new TrackedChangeModel
    TrackedChangeModel model = new TrackedChangeModel() {
        DocumentName = sDocumentName
    };

    // use a temporary ServerTextControl to retrieve the
    // changes and to create the thumbnails
    using (ServerTextControl tx = new ServerTextControl())
    {
        tx.Create();

        // load the document
        tx.Load(sDocumentName, StreamType.WordprocessingML);

        // loop through all text parts including headers and footers
        foreach (IFormattedText textPart in tx.TextParts)
        {
            // loop through all changes
            foreach (TXTextControl.TrackedChange trackedChange in textPart.TrackedChanges)
            {
                if (trackedChange.ChangeTime < model.FirstChange) // get first change time stamp
                    model.FirstChange = trackedChange.ChangeTime;

                // create a new TrachedChange object
                Models.TrackedChange tc = new Models.TrackedChange()
                {
                    ChangeTime = trackedChange.ChangeTime,
                    HighlightColor = ColorTranslator.ToHtml(trackedChange.HighlightColor),
                    ChangeKind = (Models.ChangeKind)trackedChange.ChangeKind,
                    Text = trackedChange.Text,
                    UserName = (trackedChange.UserName == "") ? "Unknown User"
                        : trackedChange.UserName
                };

                // highlight the change in the document
                trackedChange.ScrollTo();
                trackedChange.Select();
                textPart.Selection.TextBackColor = Color.Yellow;

                // create a thumbnail of the page and the highlighted change
                tc.Image = ImageToBase64(
                    tx.GetPages().GetItem().GetImage(100, Page.PageContent.All)
                , ImageFormat.Jpeg);

                // add the change to the model
                model.TrackedChanges.Add(tc);
            }
        }
    }

    return View(model);
}

All information that should be visualized are added to the model and finally an image thumbnail of the specific page is created where the tracked change is highlighted. This document page is rendered in the view next to the document history time line.

When hovering over a time line item, the thumbnail image is replaced with the associated image representation.

Try this demo on your own by downloading the project sources from our GitHub repository.