Easy Edit Suite in Squiz Matrix - SIUC 2011

Easy Edit Suite

The Easy Edit Suite – What is it?

>  An editing interface for Squiz Matrix >  Replaces the Matrix simple edit interface “_edit” >  Empowers users of all skill levels to easily create and

manage content >  Customisation possible to tailor the editing experience to

your authors >  3rd Major Release on Sept 5

What's changed?

>  Enhanced JS API •  Request batching, •  New JavaScript code base, •  additional functions

>  Re-vamped core code for performance >  Bug Fixes >  Improved error handling >  New features

•  Show differences for safe edit in preview mode •  Asset thumbnails •  Future status

Performance changes

>  Load straight into edit mode by default >  Asset Finder re-written >  Reduction in the amount of HTTP requests required to

load/save information (batched requests and optimised code)

>  More configuration options available to reduce features to improve page load times (linking screen child list, asset thumbnails)

New Features

>  Manage thumbnail images attached to assets from the details screen

>  Manage future status from the details screen >  Bookmark-able URLs and browser history for screen

navigation >  In safe edit a new option will appear in preview mode that

allows “Compare to live” version to be toggled >  Asset Finder pagination >  Small tweaks like a new refresh button on the Asset

Finder

New Feature: Thumbnails

>  You can now add, edit or remove a thumbnail from the details screen of any supported asset type

New Feature: Future Status

>  Future status can now be enabled on the details screen of supported asset types. Appears as a new button:

New Feature: URLs

>  URLs now change as you navigate screens and are now bookmark-able and available as browser history

New Feature: Compare to live

>  By popular demand a new button will now allow users to enable or disable the ‘show differences’ view in preview mode.

New Feature: Asset Finder Pagination >  In addition to a significant performance boost the Asset

Finder is now paginated

Geek speak ahead.

Enhanced JS API

>  “Enhanced JS API” is a new mode configurable on the JavaScript API asset

>  PHP code uses a more object oriented approach making it more flexible, maintainable, and adds performance improvements for existing core functions.

>  Enhanced mode uses completely new JavaScript •  More object oriented •  Function calls now extensible and “Future proofed” •  Only load the functions we need

Request Batching

>  Request batching takes several JS API functions that would have been run synchronously (or asynchronously) and combines them into a single HTTP request

Customisation. What’s possible?

>  Most aspects of the interface can be customised to deliver a tailored editing experience

>  Simple changes like logos or wording >  Advanced changes like:

•  Adding/removing editing screens; •  Using EES as a framework to deliver custom applications •  Connecting to external data repositories like a human

resources database, TRIM or SharePoint

The customisation toolset

>  EES has re-usable elements so you don’t have to re-invent the wheel; date picker, option slider, Asset Finder, asset picker, JS API wrapper and more…

>  Event system that can be used to trigger code at runtime >  Plugin system so external code can be easily integrated >  We use jQuery, a popular and well respected JavaScript

library. Existing JavaScript and jQuery knowledge can be easily transferred

>  It sits on top of Squiz Matrix, almost anything you can implement you can use in EES

Customisation: Plugins

>  Plugins offer a namespace for custom JavaScript >  Init() function that runs before EES is loaded

EasyEdit.plugins.myCustomPlugin = { init: function() { // Custom javascript } }

Customisation: Events

>  Events are points in the execution of the code >  Event manager can bind custom functions to events >  Examples: screen load, interface load, url change, save

complete, mode change, and more… >  Used in conjunction with plugins to customise EES

EasyEditEventManager.bind('EasyEditAfterLoad',function(){ // Javascript triggered after the interface has loaded });

Customisation: Existing code

>  Time saving code already exists for many common tasks >  3 quick examples:

•  EasyEditAPI •  EasyEditAssetManager •  jQuery and Matrix implementation

Summary

>  An extensible, easy to use editing interface with, or without customisation

>  Non-technical authors are not overwhelmed with concepts and require a relatively small amount of training to start publishing

>  Ideal for devolved authoring

Thanks

>  Scott Hall (Other half of the EES Team) >  Ashish Karelia (SquizLabs - JS API development) >  Josh Sherwood (SquizLabs - Documentation and testing) >  Chris Smith (SquizLabs - Packaging and VMs) >  Jerome Bonnet (Matrix/EES Testing)