Autosave Widget

Last modified by Simon Urli on 2023/10/10

This is a Javascript widget bundled by default with the XWiki platform.

The Autosave widget provides support for periodical automatic saving of a document. It is loaded by default in both Wiki and WYSIWYG edit modes (stand-alone and in-place), but not enabled: you need to check the Autosave checkbox from the action buttons toolbar in order to enable the autosave. The In-line Form edit mode doesn't load it by default, but you can do it manually from your application sheet, using its JavaScript API, as we'll see below.

Usage

To learn how to use the AutoSave feature check the Page Editing guide.

This API is available since XWiki 4.4 Milestone 1.

To load the autosave widget in an application you have to include the js/xwiki/editors/autosave.js script in the application sheet, along with a custom JSX that initializes the widget.

In the content of your application sheet:

{{velocity}}
#set ($discard = $xwiki.jsfx.use('js/xwiki/editors/autosave.js'))
## Include the CSS only if you show the Autosave configuation UI. See the showConfigurationUI option below.
#set ($discard = $xwiki.ssfx.use('js/xwiki/editors/autosave.css'))
## Use to the correct name of the sheet, or the document where the JSX is located, if not in the sheet
#set ($discard = $xwiki.jsx.use('MyApplication.MyApplicationSheet'))
...
{{/velocity}}

The widget depends on the actionbuttons.js script which is loaded by all edit modes, including the In-line Form edit mode. If you want to integrate the autosave widget in some custom edit mode or some custom form then you need to make sure this script is loaded before autosave.js.

In the JSX object attached to your application sheet:

require(['jquery'], function($) {
  $(function() {
   new XWiki.editors.AutoSave({
     // Hook on the form generated by the In-line Form edit mode.
     form : 'inline',
     // Activate the autosave by default, without the need to click on the checkbox.
     enabled: true,
     // Auto save once per minute.
     frequency: 1,
     // Don't show the autosave checkbox.
     showConfigurationUI: false
    });
  });
});

Parameters

The constructor accepts a map of parameters as its only argument, with the following property keys known (all are optional):

ParameterDescriptionDefault value
formthe ID (or DOM node) to saveby default the form containing the element with the "xwikieditcontent" ID is used, which is the main form in wiki edit mode
enabledthe initial state of the autosavefalse - the user must click the checkbox to activate autosaving
frequencythe interval between consecutive saves, in minutes5
showConfigurationUIis the UI for configuring the autosave enabled or nottrue
disabledOpacitythe opacity of the configuration UI (the frequency input) when the autosave is disabled, a number between 0 and 10.2

Get Connected