JavaScript Plugins

The interface of the Easy Edit Suite can be customised through the use of JavaScript plugins. These user-created snippets of code are referenced in the Design of a Site via a nested Standard Page and loaded at the time the Easy Edit Suite is initialised.

Plugins can be created in JSON using the namespace EasyEdit.plugins.<pluginName> - anything within this namespace will be processed as a plugin. Please also note that the method init is required within the format of a plugin to properly initialise within the Easy Edit Suite.

The EES event manager can be used to trigger custom JavaScript when an event occurs within the system. For example, you could configure your function to run when the save button is clicked by using the EasyEditSaveClick event.

A list of supported events is shown in the table below:

Event Name	Description
EasyEditBeforeLoad	Before the interface is loaded, or any EES code is executed.
EasyEditAfterLoad	After the EES interface initial loading is completed.
EasyEditAssetStatusChange	After the EES updates the status of an asset (EES code).
EasyEditScreenLoad	After EES loads an editing screen.
EasyEditModeChange	After EES mode is changed (eg. Preview to Edit).
EasyEditSaveButtonEnable	When EES enables the Save button for the editor.
EasyEditSaveButtonDisable	When EES disables the Save button for the editor.
EasyEditSaveClick	When the Save button is clicked.
EasyEditSaveComplete	After a Save has been completed on a screen.
EasyEditUnsavedChanges	After the user has been warned they have unsaved changes (transitioning between editing screens).
EasyEditURLChange	After the URL of the Easy Edit Suite has changed (eg. URL/_edit#mode=edit to URL/_edit#mode=edit&screen=details).
AssetFinderBeforeInit	When the Asset Finder is invoked, but before any asset finder code is executed.
AssetFinderAfterInit	After the Asset Finder has finished loading.
AssetFinderAssetSelected	When the user has used the select button on an asset in the Asset Finder.
CreationWizardBeforeInit	When the Asset Creation Wizard is invoked, but before any Asset Creation Wizard code is executed.
CreationWizardAfterInit	After the Asset Creation Wizard has finished loading.
CreationWizardAssetTypeSelected	When an asset type has been selected on the Asset Creation Wizard.
CreationWizardValidationSucces	When the Asset Creation Wizard successfully validates the user input, before and asset is created.
CreationWizardValidationFailed	When the Asset Creation Wizard reports validation errors to the user.
CreationWizardComplete	After the Asset Creation Wizard completes the steps to create an asset.

Once authored, plugins should be created as a separate JS File asset in your system and referenced in your EES Styles and Scripts Standard Page. This page is then nested in the Design of your Site. For more information on the EES Styles and Scripts page, refer to the Installation Guide chapter in this manual.

Example

The following plugin (lastUpdatedBy) has been created to display the username of the user who last updated an asset. This information will be displayed in the Asset Details section of an asset in Edit Mode.

The JSON code of the plugin is as follows:

/**
 * Sample EES plugin - Adds 'Last updated by' to the info box
 */

EasyEdit.plugins.lastUpdatedBy = {
    
    /**
     * Initialise the plugin
     */
    init: function()
    {
        var self = this;
        
        // Add a function to the after ees load event
        EasyEditEventManager.bind('EasyEditAfterLoad',self.addLastUpdatedBy);
    },// End init
    
    /**
     * Add last updated element to the information box
     */
    addLastUpdatedBy: function()
    {
        // Get the current asset
        EasyEditAssetManager.getCurrentAsset(function(asset){
            // Append some HTML before the 'trash' option in the information box
            jQuery('#ees_assetInfo div.infoTools').before(
                '<div class="row clearfix">' +
                    '<span class="label">Last updated by: </span>' + 
                    '<span id="ees_assetLastUpdatedBy" class="data">' + asset.attribute('updated_username') + '</span>' +
                '</div>');
        });
    }// End addLastUpdatedBy
};

The lastUpdatedBy plugin

The plugin has been configured to bind to the EasyEditScreenLoad event. This means that the addLastUpdatedBy function will run after the EES loads an editing screen.

The plugin is uploaded to the system as a JS File, shown in the figure to the right, and referenced on the Edit Contents screen of your EES Styles and Scripts Standard Page, as shown in the example below:

<script type="text/javascript" src="path/to/EasyEditpluginslastUpdatedBy.js"></script>   

When the Easy Edit Suite is initialised, the plugin will be loaded. After the EES loads an editing screen, the addLastUpdatedBy function will run and the user update information will be displayed in the Asset Details section, as shown in the figure below.

The lastUpdatedBy plugin information

PreviousNext