MixUp your List

A design trend for 2015 is to use micro UX effects (micro transitions) to nicely tell the user that something is going on in the background.

Imagine, you have a list (or grid) and wants to change the sort order, or do some filtering on it.

What happens inside UI5? The items will be sorted/filtered and the DOM will be rerendered. The result is, that the list will be removed and rerendered to the matching items without a visually hint, that this has happened in place.

Luckily, UI5 depends on jQuery and there are some libraries that will do the job for us like MixItUp or Isotope. The libraries have their own licensing concerning private and commercial usage, so please read the licencing section before using it.

I prefer the MixItUp approach, so i devided to give it a try.

MixUp your List in action

Now let us go into details and see the live demo...

I think, the result is quite nice and performs very well, because the library heavily takes care on CSS3 animations (instead of using jQuery animations) and that is the reason, why the animations also works quite well on phones and tablets.

Here is a working (and shared ;-) example, how to use it. (if you do not see any data, please reload! Maybe I need to figure out some latency issues, but sometimes plunker is very slow ;-)



The used approach is good for lists with an element set of maybe ~150 items. For larger lists, you normally will use server side sort and filtering and then showing only the matching results, but then you will not be able to use the nice animations ;-(

If you use OData, there will be a nice option comming with 1.28.x to be able to download the whole dataset and then use local filtering/sorting. So this approach will also be able to use on OData (v2) models, if the total result set will be small.

oTable.bindRows({
   path: "/Product_Sales_for_1997",
   parameters: {
      operationMode: sap.ui.model.odata.OperationMode.Client
   }
});

Another useful feature of 1.28.x is the new posibility of setting the ListBinding startIndex and length, because you are able to control how many items will be shown from a given starting point (thanks to goligo for implementing the github enhancement feature request).

items="{
    path : '/SysJobs',
    sorter: [{
        path: 'startedAt',
        descending : true
    }],
    startIndex : 0, // bound to $skip in OData model
    length : 3      // bound to $top in OData model
}"

MixItUp uses inline data attributes for sort order and css classes for filtering (jQuery like). Currently, css classes can not easily be set using DataBinding inside ListTemplates, so this needs some extra coding inside your code. Upcomming with 1.28.x, you will be able to use Expression Binding, but i think the css class attribute will still not be bindable (for whatever reason). There a some outstanding feature requests concerning this topic inside the corresponding git issues section.

Besides the "nice-to-have-features" on my OpenUI5 wishlist, you can see, that the library is currently able to be used with some additional effort.

Hopefully, there will be some/more out-of-the-box transtitions or micro UX effects in upcomming releases of UI5. Especially more control possibilities for lists (eg. using ListItems as Grid Layout container would be great).