<!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>OData Date Formats</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.unified"
data-sap-ui-xx-bindingSyntax="complex"></script>
</script>
<script>
var app = new sap.m.App("myApp", {
initialPage:"page1"
});
var model = {oRunners : [
{
"displayName" : "Tree 1",
"id" : "tr_1",
"configs": [
{
"displayName": "config 11",
"id": "config_11",
"settings" : {}
},
{
"displayName": "config 12",
"id": "config_12",
"settings" : {}
}
]
},
{
"displayName" : "Tree 2",
"id" : "tr_2",
"configs": [
{
"displayName": "config 21",
"id": "config_21",
"settings" : {}
},
{
"displayName": "config 22",
"id": "config_22",
"settings" : {}
}
]
}
]};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(model);
sap.ui.getCore().setModel(oModel);
var oTable = new sap.m.Table({columns:[new sap.m.Column({header:new sap.m.Text({text:"displayName"})}),
new sap.m.Column({header:new sap.m.Text({text:"id"})})],
items:{
path: "/oRunners/0/configs/1",
template: new sap.m.ColumnListItem({cells:[new sap.m.Text({text:"{displayName}"}),
new sap.m.Text({text:"{id}"})]})
}
});
var oPopOver = new sap.m.Popover({content:[oTable]});
var oTreeNodeTemplate = new sap.ui.commons.TreeNode({selected:function(oEvent){
// oTable.bindItems(oPath, oListTemplate);
oPopOver.openBy(oRunConfigurationTree);
}});
oTreeNodeTemplate.bindProperty("text", "displayName");
var oRunConfigurationTree = new sap.ui.commons.Tree("tree1", {title:"Tree with Header", width:"30%",height:"300px",showHearderIcons:true, showHorizontalScrollbar:false, minWidth:"100px"});
oRunConfigurationTree.bindAggregation("nodes", {
path : "/oRunners",
template : oTreeNodeTemplate,
parameters : { arrayNames : ['configs', 'oRunners'] }
}
);
var oPage = new sap.m.Page({title:"Customer Data", content:[oRunConfigurationTree]}).setModel(oModel);
var oDialog = new sap.m.Dialog({showHeader:false, stretch:true, content:[oPage], endButton : new sap.m.Button({text:"OK",icon:"sap-icon://action",
press:function(oEvent){
oDialog.close();
}})});
var oButton = new sap.m.Button({text:"Open Tree",icon:"sap-icon://tree",
press:function(oEvent){
oDialog.open();
}});
var oFlexBox = new sap.m.FlexBox({alignItems:"Start",justifyContent:"Center",items:[oButton]});
var page1 = new sap.m.Page("page1", {
title:"Customer Data",
content : [oFlexBox],
enableScrolling: false
});
app.addPage(page1);
app.placeAt("body");
</script>
</head>
<body class='sapUiBody'>
<div id='body'></div>
</body>
</html>
// Code goes here
/* Styles go here */