The History tracker in JSS automatically logs all changes made to the sheet. So, the user can undo (CTRL+Z) their actions and restore the sheet to a previous state or redo (CTRL+Y) their changes. This feature provides valuable safety for users, allowing them to restore changes and prevent losing their work.
If you are migrating from previous versions
The new JSS version 10 significantly improves the history of changes. The change tracker is now decoupled from a specific grid instance and will track changes across all sheets on the screen. The new feature aligns the changes-tracking capabilities with other spreadsheet applications, allowing for safer cross-worksheet operations and providing a more comprehensive history of changes made to the worksheets available on the screen.
Documentation
Methods
The undo and redo methods are normally invoked by the CTRL+Z, CTRL+Y keyboard shortcut. The following methods can be called programmatically, as follows:
Method
Description
history.undo()
Undo the last spreadsheet changes. jspreadsheet.history.undo() : void
history.redo()
Redo the most recent spreadsheet changes. jspreadsheet.history.redo() : void
history.reset()
Remove all history entries. jspreadsheet.history.reset() : void
Advance usage
history(object)
Add a new entry on the history tracker. jspreadsheet.history(changes: Object) : void
Events
Events related to the history changes tracker.
Event
Description
onredo
onredo(worksheet: Object, info: Object) : null The info array contains all necessary information about the history and depends on which change was performed.
onundo
onundo(worksheet: Object, info: Object) : null The info array contains all necessary information about the history and depends on which change was performed.
Interface
The history tracker interface is composed of the following attributes:
Event
Description
index: number;
History index cursor
actions: [];
History items
cascade: boolean;
When true the next item is cascaded in the same existing history element
ignore: boolean;
When true no history will be added to the tracker
progress: string;
Tell if a history process is ongoing.
undo: () => void;
Undo last action
redo: () => void;
Redo most recent action
reset: () => void;
Reset history tracker
Examples
Controlling the changes programmatically
As explained above, the history actions are available on the spreadsheet level.
Source code
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id='spreadsheet'></div>
<input type="button" value="Undo" onclick="jspreadsheet.history.undo()" />
<input type="button" value="Redo" onclick="jspreadsheet.history.redo()" />
<input type="button" value="Reset" onclick="jspreadsheet.history.reset()" />
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTBmZjdlOWQyMjEzMDhhZGY1YjM0MGRlZmI5MGQwMThmNDEwN2YzOTU1ZmZmMmYzNGU5ZTNmMjE3ZjIyMjRjMjVlOTVmY2ZhZTZlOWVjOTRlZGMyMmJhYjYwZGM2ZTQyZjJlYWQ3N2RhY2M1ZDA2NzFjZWVjOTlmOThiNjQ5ZTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURRd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [8, 8],
}],
});
</script>
</html>
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTBmZjdlOWQyMjEzMDhhZGY1YjM0MGRlZmI5MGQwMThmNDEwN2YzOTU1ZmZmMmYzNGU5ZTNmMjE3ZjIyMjRjMjVlOTVmY2ZhZTZlOWVjOTRlZGMyMmJhYjYwZGM2ZTQyZjJlYWQ3N2RhY2M1ZDA2NzFjZWVjOTlmOThiNjQ5ZTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURRd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create component
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type="button" value="Undo" (click)="jspreadsheet.history.undo()" />
<input type="button" value="Redo" (click)="jspreadsheet.history.redo()" />
<input type="button" value="Reset" (click)="jspreadsheet.history.reset()" />`;
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
minDimensions: [8, 8],
}],
});
}
}
Releases notes
Differences from version 9
As previously mentioned, the history tracker in JSS version 10 can register changes across all spreadsheets on the screen, regardless of the worksheet instance. Therefore, the syntax to access this feature need revision to the following:
Attribute
Description
worksheet.resetHistory()
Please use jspreadsheet.history.reset()
worksheet.setHistory()
Please use jspreadsheet.history()
Create applications with spreadsheet-like controls