<!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 */