Ergonomics: javascript sliders all over eXo

eXo Platform Blog

One of the simplest method to increase ergonomics is to use javascript sliders in your application to be able to display in a small area (menus or toolbars) more information.

In the new version of eXo, we have extensively tested the cases where too much information in a menu could create a display bug. In all cases we have introduced a slider and we will now show you some of them.

The first one is the widget slider. Once logged in eXo, a user has an expandable/collapsable left column called the “User Workspace”. There he can access the portal administration features and navigate into the pages/desktop tree. He also has access to a set of categorized widgets. A widget container can contain several widgets and hence when the area is not height enough he can use the arrow to scroll and get all the widgets within a container.

From the User Workspace, it is also possible to navigate inside the portal pages or desktops (depending if you use usual portal layout or WebOS one, both can be mixed by the way). When a user is part of many groups, the pages of the group are aggregated into a single tree to be displayed to the user, hence a slider is needed to be able to nicely display all the pages a user can access:


A portal, in a default layout, also use an horizontal menu with a slider. Here we see it using the Mac skin:

Content templates, created for your own use, can also use those dynamic components for example when using tabs:

Content templates can be customized to fit your needs as in our own web site:

The user experience with slider is great as people already know how it works. We will continue to add more and more sliders in the future developments

Related Posts
Leave a Reply

Your email address will not be published.

I have read and accept terms of the privacy Policy. Learn More

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">