eTemplate is a rendering engine used in previous EGroupware versions to generate user interface for most apps. It takes content from an app plus a template and renders it on the server as HTML. When user submits that HTML form in its browser eTemplate engine receives it again on server, validates the input and passes it back to the application.
All this was done on the server and reaction to user input mostly required a server round trip. There were no API to manipulate an already rendered template on client aka browser side.
All that changes with eTemplate2 in 14.1:
apps use a largely identical API on server-side, they are easy to port to 14.1
that eT2 API sends content as JSON (JavaScript Object Notation) incl. an url to a XML template description to browser
eTemplate2 engine in browser loads template and renders user interface (UI)
client-side part of app interacts directly with eTemplate: eg. show or hides a UI element / widget or changes its appearance
eTemplate and app use client-side EGroupware API eg. to query a user preference, an account detail or a link title
if a new tabbed template is used, e.g. 14.1 Pixelegg template, API persists on client and caches data requested from server
You might ask: All that’s very theoretical, what do I have from it? I will describe a couple of new widgets, to illustrate big usability improvements in 14.1 and new possibilities available:
Context menus and toolbars
Lists, trees in facts all UI elements can now have a context menu showing what actions are available on a row or a tree element. This replaces sometimes huge number of icons we had in lists before. Some apps eg. new mail use now toolbars to show available actions. User can reorder these icons to his own needs and even hide less used ones in a “more…” drop-down.
Drag and drop inside EGroupware and to and from your desktop
Files can be uploaded by dragging them from your desktop onto a popup editing an entry eg. an InfoLog or a mail composed. You can also drag a file on a row in a list.
File can be dragged out eg. from Filemanager app onto your desktop, if your browser supports that, currently only Chrome does.
File uploads
are no longer limited by PHPs memory-limit, thanks to our support of html5 file API.
Filemanager app is now a first class citizen and files stored in it are available everywhere for attaching or linking, where previous EGroupware versions required one to download and re-upload such a file.
EGroupware entries can also linked by dragging them on an other entry.
Endless scrolling in lists
Before EGroupware 14.1 all web applications had to implement something called pagination for their lists. The app only showed a limited number of rows in a list and arrows to load next or previous set of rows. Users always had to choose between a quick and short or a long and slower list.
eTemplate2 lists now show a scrollbar for the whole list and load further entries on demand while you scroll up or down.
eTemplate2 lists now also allow to resize their columns and have keyboard navigation. They allow to select multiple rows and run actions on them.
Loading of UI parts on demand
eTemplate2 can postpone rendering and even loading of non-visible UI elements. Eg. a history tab does not load its content before a user changes to it. Then it employs above described endless scrolling list to show all history of an entry, but only loads a couple of lines from the server.
Framed templates sets like new Pixelegg one also only load the active app, postponing loading all other open ones until user chooses to look at them.
This is only an excerpt of new UI elements and usability improvements made available by eTemplate2 and its focus on rendering and interacting with the user on client- aka. browser side.
With 14.1 we mostly focused on developing eTemplate2 engine and porting apps to it with features they already had. Next versions will see even higher use of this new possibilities and complete rewrites of apps like we did it in 14.1 with mail and partially with admin. I will blog about them in my next articles.
Ralf Becker
Director Software Development
