Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Undo for Component Users


The Undo subcomponent is a special class of subcomponent called a component decorator. It can be used to provide undo support for any component that bears a model.

Currently, the Fluid components that support Undo are:

Enabling Undo on Components that Support it

The Undo subcomponent can be added to a parent component that supports it by specifying the subcomponent type and options in the componentDecorators option parameter to the parent component. (See Subcomponents for more information.)

var opts = {
    componentDecorators: {
        type: "fluid.undoDecorator",
        options: {
            selectors: myUndoSelectors,
            renderer: myUndoRenderer

var myComponent = fluid.component(container, opts);

If no customized options are desired, the string type can be provided as the componentDecorators value instead:

var opts = {
    componentDecorators: "fluid.undoDecorator"

var myComponent = fluid.component(container, opts);
On This Page
Still need help?

Join the infusion-users mailing list and ask your questions there.


The undo decorator can be customized by providing options in the componentDecorators object:






Javascript object containing selectors for various fragments of the Undo decorator

The object can contain any subset of the following keys:
Any values not provided will revert to the default.

selectors: {
    undoContainer: ".flc-undo-undoContainer",
    undoControl: ".flc-undo-undoControl",
    redoContainer: ".flc-undo-redoContainer",
    redoControl: ".flc-undo-redoControl"


a function that renders the markup for the undo controls


function defaultRenderer(that, targetContainer) {
    var markup = "<span class='flc-undo'>" + 
        "<span class='flc-undo-undoContainer'>[<a href='#' class='flc-undo-undoControl'>undo</a>]</span>" + 
        "<span class='flc-undo-redoContainer'>[<a href='#' class='flc-undo-redoControl'>redo</a>]</span>" + 
    var markupNode = $(markup);
    return markupNode;


The Undo dependencies can be met by including the minified InfusionAll.js file in the header of the HTML file:

<script type="text/javascript" src="InfusionAll.js"></script>

Alternatively, the individual file requirements (in addition to those of the component) are:

<... other dependencies ...>
<script type="text/javascript" src="components/undo/js/Undo.js"></script>