Skip to content

Instantly share code, notes, and snippets.

@gbvaibhav
Created August 18, 2016 05:28
Show Gist options
  • Save gbvaibhav/ea07b0b023a3205f6cfd6a85499d8222 to your computer and use it in GitHub Desktop.
Save gbvaibhav/ea07b0b023a3205f6cfd6a85499d8222 to your computer and use it in GitHub Desktop.
SAPUI5 List example with local JSON model and sorting - gbvaibhav
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 List example with local JSON model and sorting" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAPUI5 List Example with sorting gbvaibhav</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
var list = new sap.m.List({
columns:[
new sap.m.Column({
hAlign:sap.ui.core.TextAlign.Center,
header:[
new sap.m.Text({
text:"Name"
})
]
})
] });
// creating some data for binding
var data = {
results:[ { first:"Rachana" },
{ first:"Vaibhav" },
{ first:"Anoop" },
{ first:"Jk" },
{ first:"Pachu" },
{ first:"ABS" } ]
};
var model = new sap.ui.model.json.JSONModel(data);
list.bindAggregation("items",{
path:"/results",
template:new sap.m.ColumnListItem({
cells:[
new sap.m.Text({
text:"{first}"
})
]
})
});
list.setModel(model);
var decidingFac = null;
var button = new sap.m.Button({
text:"Sort Name",
press:function(){
debugger;
var binding = list.getBinding("items");
var aSorters = [];
var sPath = "first";
if(decidingFac){
decidingFac = true;
}else{
decidingFac = false
}
aSorters.push(new sap.ui.model.Sorter(sPath, decidingFac));
binding.sort(aSorters);
}
});
var page = new sap.m.Page({
title:"SAPUI5 Table Example",
content:[
list,
button
]
});
// finally place the App into the UI
var app = new sap.m.App({
pages: [page]
}).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