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.

 $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
 $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
 $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
 $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');

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}'}),
        }
     });
     box.setModel(model);

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.

    this.$().sortable({
        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
        }.bind(this)
    }).disableSelection();

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