Skip to content

Instantly share code, notes, and snippets.

@dennisseah

dennisseah/gist:3222be69ef01231f218d

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dennisseah/3222be69ef01231f218d to your computer and use it in GitHub Desktop.
Save dennisseah/3222be69ef01231f218d to your computer and use it in GitHub Desktop.
Download ZIP
SAPUI5: Reorder a list of buttons and sync with model.
Raw
gistfile1.js
<!DOCTYPE html>
<html>
<head>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.horizontal {
border: 1px dotted #999;
border-radius: 10px;
padding: 10px;
margin: 10px;
width: 150px;
}
.horizontal>div {
width: 100%
}
.horizontal>div>button {
width: 100%
}
</style>
<script>
$.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');
// create a model with an array of items.
var model = new sap.ui.model.json.JSONModel([
{id: 1, label: 'One'},
{id: 2, label: 'Two'},
{id: 3, label: 'Three'},
]);
// create a horizontal box to contain the items.
var box = new sap.m.VBox({
items: {
path: '/',
template: new sap.m.Button({text: '{label}'}),
}
}).addStyleClass('horizontal');
box.setModel(model); // set model to this box
box.placeAt('content'); // place this box in body
box.onAfterRendering = function() {
if (sap.m.VBox.prototype.onAfterRendering) {
sap.m.VBox.prototype.onAfterRendering.apply(this);
}
// make the item in the box reorderable.
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];
data.splice(ui.item.index(), 0, o);
this.getModel().setProperty('/', data);
}.bind(this)
}).disableSelection();
}
new sap.m.Button({
text: 'Show order of key in model',
press: function() {
var d = box.getModel().getData();
sap.m.MessageToast.show(d.map(function (i) { return i.id; } ));
}
}).placeAt('content');
</script>
</head>
<body>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment