Skip to Content
Author's profile photo Dennis Seah

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Dennis,

      It looks like someone didn't like your JS Bin...




      Author's profile photo Dennis Seah
      Dennis Seah
      Blog Post Author


      And I created another one 🙂

      Thanks for letting me know.


      Author's profile photo SAP Seeker
      SAP Seeker

      Thanks for all your blogs Dennis.

      Author's profile photo manjunatha nennavath
      manjunatha nennavath

      Nice blog, its use full  for freshers. Thank you Dennis