Undo & Changes history

Overview

Your users will have the ability to rewind and fast-forward to any point in their recent edit history. Once Undo is enabled in the Beefree SDK Console, the application immediately begins tracking changes. Behind the scenes, this is accomplished via a new callback event – called onChange – which can also be used “stand-alone” without enabling Undo. No client-side configuration is required to use this feature. Continue reading to learn how to activate and use Undo. And if you can’t wait to try it yourself, you can immediately do so at beefree.io

How it works

When changes are detected, a compact Undo widget displays in the bottom left corner of the stage:

The widget displays 3 actions:

• Undo and Redo arrows that offer the classic pattern to move back and forth between changes.

• A history icon that expands a timeline of the latest changes:

Timeline

The timeline allows the user to browse through the most recent changes.

All the steps display:

• An icon to identify the content element type (an image, text, etc.)

• A description of what changed, giving the new property value (if any)

• The exact time it happened

All these details provide enough information for users to understand what modification was applied, and, if desired, rewind the message to that state:

When the user selects a previous step, the content or row that triggered the history record displays as the selected item, providing further context.

The timeline for more recent changes is still available, allowing the user to move forward without losing any changes:

The Undo widget currently displays the last 15 edits in the timeline, but users can always rewind to the Message opened state to undo all changes since the message was initially opened in the builder.

We are also doing additional testing to see if the number of recent edits can be increased beyond 15 without negatively impacting the browser’s performance. We will update this section if the number is increased.

The last saved edits are only available at the session level, so they reset every time the builder is loaded. If you need to provide a complete message history, you can build a custom one based on the onSave and onChange events (see below).

Activating the Widget

The Undo option is available at the application level in the Beefree SDK Console. Select your application from the list and open the Application configuration in the bottom-right. The option to enable this widget is available in the Services list:

The widget uses the onChange callback information to work. However, it doesn’t need a client-side configuration for the callback: once Undo is enabled, the application starts tracking changes even if the trackChanges parameter is not set in beeConfig.