Skip to content

Instantly share code, notes, and snippets.

@ikiw
Created July 22, 2015 13:46
Show Gist options
  • Save ikiw/a2f6c29272ced8c43a92 to your computer and use it in GitHub Desktop.
Save ikiw/a2f6c29272ced8c43a92 to your computer and use it in GitHub Desktop.
Mobile List Navigation
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Mobile App with data-bound List</title>
<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>
<!-- load the mobile lib "sap.m", the layout lib and the "sap_bluecrystal" theme -->
<script type="text/javascript">
// create the data
// create some dummy JSON data
var data = {
names: [
{firstName: "Julia", lastName: "GEFFE"},
{firstName: "Theo", lastName: "GEFFE"},
{firstName: "Mathias", lastName: "GEFFE"},
{firstName: "Sarah", lastName: "GEFFE"}
],
ages: [
{age:"11", firstName: "Julia"},{age:"9", firstName: "Theo"},{age:"5", firstName: "Mathias"},{age:"3", firstName: "Sarah"}]
};
// create a Model with this data
var model = new sap.ui.model.json.JSONModel();
model.setData(data);
// create the UI
// create a List control
var list = new sap.m.List({
headerText:"Names"
});
// create a List control
var list2 = new sap.m.List({
headerText:"Names"
});
list2.bindItems({
path : "/ages",
sorter : new sap.ui.model.Sorter("age"),
template : new sap.m.StandardListItem({
title: "{firstName}",
description: "{age}",
type: sap.m.ListType.Navigation,
press:function(evt){
var oBindingContext = evt.getSource().getBindingContext(); // evt.getSource() is the ListItem
page2.setBindingContext(oBindingContext); // make sure the detail page has the correct data context
app.to("page2");
}
})
});
// bind the List items to the data collection
list.bindItems({
path : "/names",
sorter : new sap.ui.model.Sorter("firstName"),
template : new sap.m.StandardListItem({
title: "{lastName}",
description: "{firstName}",
type: sap.m.ListType.Navigation,
press:function(evt){
var oBindingContext = evt.getSource().getBindingContext(); // evt.getSource() is the ListItem
page3.setBindingContext(oBindingContext); // make sure the detail page has the correct data context
app.to("page3");
}
})
});
// create the page holding the List
var page1 = new sap.m.Page({
title: "List Page",
content : list
});
// create the detail page
var page2 = new sap.m.Page("page2", {
title: "Detail Page",
showNavButton: true,
navButtonPress: function(){
app.back();
},
content : [
new sap.ui.layout.form.SimpleForm({
title: "Details for {firstName} {lastName}",
content: [
new sap.m.Label({text: "First Name"}),
new sap.m.Text({text: "{firstName}"}),
new sap.m.Label({text: "Last Name"}),
new sap.m.Text({text: "{lastName}"})
]
})
]
});
// create the page holding the List
var page3 = new sap.m.Page("page3", {
title: "Paul's List",
showNavButton: true,
navButtonPress: function(){
app.back();
},
content : list2
});
// create a mobile App holding the pages and place the App into the HTML document
var app = new sap.m.App({
pages: [page1, page2, page3]
}).placeAt("content");
// set the model to the App; it will be propagated to the children
app.setModel(model);
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment