Skip to content

Instantly share code, notes, and snippets.

@dennisseah

dennisseah/gist:bf96f9ca5399685d429d

Last active August 29, 2015 14:05
Show Gist options
  • Save dennisseah/bf96f9ca5399685d429d to your computer and use it in GitHub Desktop.
Save dennisseah/bf96f9ca5399685d429d to your computer and use it in GitHub Desktop.
Download ZIP
SAPUI5: Traverse up and down hierarchically in sap.m.List
Raw
gistfile1.js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
data-sap-ui-libs="sap.ui.table,sap.ui.commons,sap.m"
data-sap-ui-theme="sap_bluecrystal"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script>
$(function() {
var data = [
{
"title": "Folder1",
"type": "folder",
"icon":"folder-blank",
"children": [
{
"title": "Sample Document1",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document",
"children": [
{
"title": "Sample Document11",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
}
]
},
{
"title": "Sample Document2",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document3",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document4",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document5",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Folder1a",
"type": "folder",
"icon":"folder-blank",
"children": [
{
"title": "Sample Document1",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document2",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document3",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document4",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document5",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
}
]
}
]
},
{
"title": "Folder2",
"type": "folder",
"icon":"folder-blank",
"children": [
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
},
{
"title": "Sample Document",
"link": "http://www.hollywood-arts.org/wp-content/uploads/2014/05/pdf-sample.pdf",
"description":"This is the description for the document",
"type": "document",
"icon": "document"
}
]
}
];
var model = new sap.ui.model.json.JSONModel();
model.setData(data);
(
new sap.m.Button('btnUp', {
enabled: true,
text: 'Move up',
press: function() {
console.log(list.getBindingInfo('items'));
var path = list.getBindingInfo('items').path;
path = path.substring(0, path.lastIndexOf('/children'));
path = path.substring(0, path.lastIndexOf('/'));
if (path == '') {
path = '/';
}
console.log(path);
bindItem(path);
}
})
).placeAt('content');
var list = new sap.m.List("list", {
mode : sap.m.ListMode.None
});
function bindItem(p) {
list.bindItems(p, new sap.m.ObjectListItem({
title: '{title}',
type: {
path: 'children',
formatter: function(c) {
return (c) ?sap.m.ListType.Navigation : sap.m.ListType.Active;
}
},
press: function(e) {
if (this.getType() === sap.m.ListType.Navigation) {
var path = this.getBindingContext().getPath();
var obj = this.getModel().getProperty(path);
bindItem(path+ '/children');
}
}
}));
sap.ui.getCore().byId('btnUp').setEnabled(p != '/');
}
bindItem('/');
list.setModel(model);
list.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