Universal Autosave for DNN platform

Universal Autosave for DNN Platform (former DotnetNuke)

Purpose of “Universal Autosave Solution”

Universal Autosave (UA) is extension for DNN Platform (former DotNetNuke). It allows easy and fast to configure autosave functionality for any form/control without any lines of code. Main features:

  • Easy and fast configuration.
  • WYSIWYG configuration Wizard.
  • Automatic and manual data restore.
  • Periodical and "smart" autosave.
  • Unlimited autosave history and autosave expiration feature.
  • Client-side and server-side history location.
  • Different permissions for different groups/users.
  • Admin history of changes for any user/control/page.
  • Canned replies/values.

1 Installation

1.1 How to install

To install Universal Autosave Extension (UA) please do the next steps:

  • Login with SuperUser credentials.
  • Go to the “Host/ Extensions”.
  • From the action menu select “Install Extenson Wizard”.
  • Select file forDNN.UniversalAutosave_PA_xx.xx.xx.zip and go thru the installation process.

1.2 Adding Autosave module to the page

Universal Autosave Extension includes “Admin Module” and “httpModule”. Admin module is the primary place where all configuration process runs. httpModule is necessary to work at the site pages to track history of changes. To add UA Admin Module it needs to create new page and add “forDNN.UniversalAutosave” module to the page. Please check access permissions for this page are granted for users with admin rights only.

1.3 Checking httpModule status

Universal Autosave httpModule installs automatically during installation process. Installation adds 2 lines to the web.config file:

  • To the path “/configuration/system.webServer/modules/” it adds line

    <add name="UniversalAutosave" type="forDNN.Modules.UniversalAutosave.UAHttpModule, forDNN.Modules.UniversalAutosave" />

  • To the path “/configuration/system.web/httpModules/” it adds the same line

    <add name="UniversalAutosave" type="forDNN.Modules.UniversalAutosave.UAHttpModule, forDNN.Modules.UniversalAutosave" />

To be sure everything has been installed successfully, just open web.config file and check lines at the necessary places.

2 Configuration

2.1 List of configurations

After Universal Autosave Admin module been added to the page, as described above (1.2) its possible to start configuration process. UA allows to create unlimited number of configurations. Each configuration belongs only single page and has own set of permissions. However its possible to create multiple configurations per page (with different permissions). All configurations are located within single standard grid. Also presents button to add new configuration and edit/delete existing one.

DNN (DotNetNuke) Universal Autosave, List of Configurations

2.2 Add/Edit autosave configuration

WARNING! New configuration requires to “Update” after “Permissions” tab will be populated and before continue with next tabs. Before “Upgrade” clicked, tabs “Controls list”, “Close session events” and “Manage saved values” are not active (grayed out). To continue please click “Update”.

2.2.1 Basic Settings

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Basic Settings
Field Name Description
Name Contains name of the configuration. This name displays in the grid.
Description Description of the autosave configuration.
Autosave enabled Defines whether configuration is enabled or not.
Autosave icon Defines to display or to hide service icon DNN (DotNetNuke) Universal Autosave, Work icon at the top right corner of the controls, selected to track changes of values.
Autosave on focus lost When checked, then value of the control automatically stores every time control loses focus (equal onBlur JavaScript event).
Autosave period Interval in seconds to track changes of the controls. When “Autosave period” is equal 0, then periodical autosave is Off.
Autosave history length Number of records to keep in DB per each control. Old records delete by FIFO method (first in first out), so the oldest one will be deleted first. When “Autosave history length” is equal 0, then history of changes is not limited. Be careful with this option, this can make unlimited DB grown.
History expiries in Number of days to keep history of values. After defined number of days values will be deleted. When “Autosave history length” is equal 0, then history of changes keeps forever. Be careful with this option, as soon this can make unlimited DB grown.
Autosave location Location, wheку history of changes have to be placed. Its possible to store history of changes at the Server (by default) and in the Cookies. Advantages and disadvantages of each type you can see in the table below:
Params Server Cookie
Speed Slower Faster
Secure More secure Less secure
Access from different browsers Yes No
Admin stored values Yes No
Allows canned values Yes No
URL-independent By default history of changes tracks by 4 params: Page (TabID), ControlID (uniq selector of the control), UserID and UrlID (creates based on the params passed for the page). It means, for example, Product Name textbox has different history for products with different ProductID. But when it needs to have common history of changes within the same page and the same control and independent on URL, then “URL-independent” checkbox should be checked.

Important! This param can be changed any time. In DB always keeps right UrlID, so history always will be displayed properly (ever for old values).

2.2.2 Page to use on

Its necessary to select what page this configuration belongs to. Tree contains all pages structure of the current site.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Page to use on

At the top of tree “Quick Search” textbox is located. It allows to run quick pages search.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Page to use on quick search

Just click on the page, you want configuration to be applied to.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Page to use on select

2.2.3 Permissions

List of permissions should be defined per each configuration. This is standard DNN permissions grid. It allows Roles/Users enabled to use this configuration.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Permissions

WARNING! New configuration requires to “Update” after “Permissions” tab will be populated and before continue with next tabs. Before “Upgrade” clicked, tabs “Controls list”, “Close session events” and “Manage saved values” are not active (grayed out). To continue please click “Update”.

2.2.4 What is “uniq controls selector”

Info: “Uniq controls selector” is identifier of the controls at the form. It can be ID of the DOM element, name of this element or pair “element type + element class”. Sometimes its impossible to identify uniq selector – controls without it can’t be served by autosave functionality (only very small amount of controls like this).

2.2.5 Controls list

“Controls list” is list of controls, autosave functionality should be applied to. List contains uniq selector of each control and autosave settings per each control. By default list of controls is empty. There are 2 ways to populate list of controls:

  • WYSIWYG controls management – allows easy and fast select controls for autosave functionality. Click “Start controls wizard” button to start WYSIWYG controls management. This will start WYSIWYG controls wizard.
  • Manually – just type uniq selector at the “Quick add selector” textbox and click “Add” button. This will add new selector to list.
DNN (DotNetNuke) Universal Autosave, Edit Configuration, Controls list empty grid

Once list of controls is populated, it looks like this:

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Controls list populated grid
Field Name Description
Selector Uniq selector of the control. Textbox next to it allows easy and fast filter grid by selector.
Enabled Autosave feature enabled or disabled.
Restore On Load When checked, last value from history will be restored in the control on page load.
Restore If Empty Restores value only if control does not have own value, prepopulated at the server side.
Show canned only Displays in the history for user only “canned” values. This feature is very usefull in situations, when controls required predetermined values for common situations.

2.2.6 Close session events

“Close session events” – are events generated by click on A or INPUT[type=”submit”] controls. Why they need? These events are important to know current autosave session is closed and current control does not require to restore automatically last value from history on the next page load. These events are not required, but make work more flexible. For example:

  • Feedback form contains controls: Email, Name, Subject, Body and “Send feedback” button.
  • User can populate fields, close browser or open form at another browser (for registered users only). Values will always be at the same place.
  • Once user finished form population and clicked “Send feedback” – it means current session with this form is done. It has no sense to restore last values automatically, on the next page load.
  • So admin selects “Send feedback” button as source of the “close session event” and autosave session for current controls will be closed. On the next page load user will get an empty form.
  • User always can check history of changes he made for these controls and to restore values manually.

Close session events can be selected in the same ways as Controls. Populated list of events looks like this:

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Populated list of eevents

All controls at this tab are exactly the same as for Controls tab.

2.2.7 WYSIWYG controls/events wizard

WYSIWYG controls/events wizard is easy and fast way to add controls and close session events. When wizard is called, it opens page it belongs to. At the top right corner of the each control (available to use autosave functionality) appears special config icon DNN (DotNetNuke) Universal Autosave, Work icon. Its enough just to click on this icon to enable autosave for this control. Once autosave enabled, icon changes to DNN (DotNetNuke) Universal Autosave, Work icon. That is really easy and fast. WYSIWYG wizard uses these DOM types for:

  • Controls - INPUT[type="text"], INPUT[type="radio"], INPUT[type="checkbox"], TEXTAREA, SELECT.
  • Close session events - A, INPUT[type="submit"].
DNN (DotNetNuke) Universal Autosave, Edit Configuration, Autosave configuration wizard info window

At the end of work with Wizard click “Stop Wizard” button at the bottom right corner of the screen.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Stop wizard button Example with selected controls and close events. DNN (DotNetNuke) Universal Autosave, Edit Configuration, Wizard is done

2.2.8 Manage saved values

Autosave admin module allows to manage history of changes for all users in easy and flexinle way.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Manage saved values

Tab “Manage saved values” allows to manage all stored values. There is a filter to find required values in simple and fast way. It allows to filter values by control/user (belong to the current configuration) and by dates interval. Grid of values allows to edit and delete items also. Also it allows to manage Canned values.

2.2.9 Canned replies/values configuration

“Canned replies/values” – feature of universal autosave. It allows to display only limited number of values (only “canned values”) from the history of changes. This feature is very usefull in situations, when controls required predetermined values for common situations. Rather than typing the same answer repeatedly or pasting from some other resource, user can insert a canned response from drop-down menu.

To enable “Canned values” admin should put a tick for necessary control at the Controls tab. Once it checked, then history will display “canned values” only.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Canned values for controls

To define set of “Canned values” per control at the “Manage saved values” tab its necessary to select values you want to use. Column “Canned value” exists for this purpose.

DNN (DotNetNuke) Universal Autosave, Edit Configuration, Canned values checking

After these actions only values, marked as “canned” will be displayed in the history of changes.

2.3 Delete autosave configuration

Configuration can be deleted from the grid of configurations or from the edit form by clicking “Delete” button.

WARNING! Be very carefully with configuration deleting! All nested information (includes history of changes) will be deleted permanently. This process can’t be undone!

3 Autosave usage

3.1 Changes tracking

Changes tracking works automatically, based on the configuration made by admin. There are two events fired changes saving: focus lose and by timer. User should not perform any actions, he just have to work in the same way as worked before. Single difference is only an icon DNN (DotNetNuke) Universal Autosave, Work icon at the top right corner of control, supports autosave feature. If necessary, admin can disable these icons at the configuration, “Basic settings” by unchecking “Autosave icon”.

DNN (DotNetNuke) Universal Autosave, Usage, Changes tracking

3.2 View history of changes

User can get full history of changes in easy way – he just needs to click at the autosave icon at the top right corner of the control DNN (DotNetNuke) Universal Autosave, Work icon. It will cause dialog opening with full list of changes related to current control.

DNN (DotNetNuke) Universal Autosave, Usage, View history of changes

History of changes shows a grid. Grid contains information about date and time when change has been done. By clicking on the row user can restore value back to the control.

3.3 Restore old values

There are two ways to restore old values:

  • Autosave automatically restores the last value was in the control on page load (if “Restore On Load” is enabled for this control).
  • User can manually restore any value from the grid with history of changes just by clicking on row.

For registered users full history is always available, ever browser or computer has been changed.

3.4 Canned values usage

Based on example we have made in Canned values configuration, result for user should look like this:

DNN (DotNetNuke) Universal Autosave, Usage, Canned values

Difference from the results, displayed in the full history of changes is obvious – only limited number of values displays. This can be a great time saver if you frequently find yourself typing the same thing. You can create and save as many canned values as you like!