Easy Undo Redo with Wijmo

Being able to undo and redo actions makes applications more user- friendly and users are happier and more productive.

Unfortunately, HTML only offers very basic undo/redo capabilities, and even this support is inconsistent among browsers. There is a proposal for an HTML UndoManager class that is not currently implemented by any browsers.

We recently published a blog that explains the motivation and implementation of a flexible and easy-to-use form-level undo/redo stack class.

Here's a link to that resource:

##### **<a href="/blogs/easy-undo-redo-for-html-forms" target="_blank">Easy Undo/Redo for HTML Forms</a>** 

Since the article and sample were published, we got a lot of feedback from users who adopted the UndoStack class, and after a while we decided it was time to bring that class into Wijmo. In the latest version of Wijmo (2019/V2), we added an "undo" module with an UndoStack class.

You can use the UndoStack class to provide undo/redo functionality to and web page or form. The UndoStack class automatically monitors all HTML input elements as well as Wijmo controls such as the FlexGrid, ComboBox, InputDate, and Gauge.

To use the UndoStack class, create an instance of the class and pass it the selector for the element it should manage (typically an HTML form, a DIV, or the whole page).

For example:

import { UndoStack } from '@grapecity/wijmo.undo';

// create the UndoStack
let undoStack = new UndoStack('#undoable-form', {
    maxActions: 50,
    stateChanged: (s: UndoStack, e) => {
        btnUndo.disabled = !s.canUndo;
        btnRedo.disabled = !s.canRedo;
        cnt.textContent = s.actionCount.toString();
    }
});

// hook up undo/redo/clear buttons
btnUndo.addEventListener('click', () => {
    undoStack.undo();
});
btnRedo.addEventListener('click', () => {
    undoStack.redo();
});

The code above creates an UndoStack that keeps track of up to 50 actions. It automatically monitors the keyboard to handle the standard undo/redo keys (ctrl+Y, ctrl+Z). The code the UndoStack's stateChanged event to enable/disable custom undo/redo buttons, and the undo and redo methods to handle the buttons.

What do you think of Wijmo's new functionality? Be sure to leave your thoughts and comments below. Happy coding!