Skip to Content

Reorder items in sap.m.VBox and sync binding model

In this document, we discuss how to reorder items in a sap.m.VBox. To make things simple, I have a few buttons in the box and we want to reorder them.

First and foremost, we need jqueryui support.


Next, we create a JSON model, a vertical box and set the model to the box.

    var model = new sap.ui.model.json.JSONModel([
        {id: 1, label: 'One'},
        {id: 2, label: 'Two'},
        {id: 3, label: 'Three'},

      var box = new sap.m.VBox({
        items: {
          path: '/',
          template: new sap.m.Button({text: '{label}'}),

Next, we have to add some code so that the buttons in the box can be reorder. And sync the model after button was moved.

        cancel: '',
        start: function(event, ui) {
            ui.item.startPos = ui.item.index();
        // sync the model after reordering in the box
        stop: function(event, ui) {
            var data = this.getModel().getProperty('/');
            var o = data.splice(ui.item.startPos, 1)[0];   // extract
            data.splice(ui.item.index(), 0, o);                 // re-insert
            this.getModel().setProperty('/', data);           // update model

And we are done. About 10 lines of code, we now have a reorder list. Demo. And in Gist.

You must be Logged on to comment or reply to a post.