SAPUI5 TreeTable in Eclipse with XML View

Question

I'm trying to create a Hierarchical Tree Table in Eclipse Neon for a SAPUI5 Project.

I've looked at the following SDK for TreeTables : https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.BasicODataTreeBinding/preview

I'm not getting any joy when executing my project, nothing is displayed in my chrome web browser.

Please see below my various code snippets, where am I going wrong?

Common.view.xml :

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tree="sap.ui.table"
        controllerName="testcommon.Common" xmlns:html="http://www.w3.org/1999/xhtml">
<Page>
    <content>

        <tree:TreeTable id="treeTable"
    selectionMode="Single"
    enableColumnReordering="false"
    expandFirstLevel="false"
    rows="{
        path : '/table',
        parameters : {
            countMode: 'Inline',
            treeAnnotationProperties : {
                hierarchyLevelFor : 'HierarchyLevel',
                hierarchyNodeFor : 'NodeID',
                hierarchyParentNodeFor : 'ParentNodeID',
                hierarchyDrillStateFor : 'DrillState'
            }
        }
    }">
    <tree:columns>
        <tree:Column label="Description">
                <Text text="Description"/>
        </tree:Column>
        <tree:Column label="HierarchyLevel">
                <Text text="HierarchyLevel" wrapping="false" />
        </tree:Column>
        <tree:Column label="NodeID">
                <Text text="NodeID" wrapping="false" />
        </tree:Column>
        <tree:Column label="ParentNodeID">
                <Text text="ParentNodeID" wrapping="false" />
        </tree:Column>
  </tree:columns>
</tree:TreeTable>
    </content>
</Page>

Common.controller.js :

sap.ui.controller("testcommon.Common", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf testcommon.Common
*/
	onInit: function() {
		var model1 = new sap.ui.model.json.JSONModel();
		model1.loadData("model/mock.json");
		this.getView().setModel(model1, "model1");	
			
		jQuery.sap.require("sap.m.MessageBox");
	},

index.html :

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("testcommon");
				var view = sap.ui.view({id:"idCommon1", viewName:"testcommon.Common", type:sap.ui.core.mvc.ViewType.XML});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

mock.json file which is in folder model under WebContent :

{"table": [ { "NodeID": 1, "HierarchyLevel": 0, "Description": "1", "ParentNodeID": null, "DrillState": "expanded" }, { "NodeID": 2, "HierarchyLevel": 0, "Description": "2", "ParentNodeID": null, "DrillState": "expanded" }, { "NodeID": 3, "HierarchyLevel": 0, "Description": "3", "ParentNodeID": null, "DrillState": "expanded" }, { "NodeID": 4, "HierarchyLevel": 1, "Description": "1.1", "ParentNodeID": 1, "DrillState": "leaf" }, { "NodeID": 5, "HierarchyLevel": 1, "Description": "1.2", "ParentNodeID": 1, "DrillState": "expanded" }, { "NodeID": 6, "HierarchyLevel": 2, "Description": "1.2.1", "ParentNodeID": 5, "DrillState": "leaf" }, { "NodeID": 7, "HierarchyLevel": 2, "Description": "1.2.2", "ParentNodeID": 5, "DrillState": "leaf" }, { "NodeID": 8, "HierarchyLevel": 1, "Description": "2.1", "ParentNodeID": 2, "DrillState": "leaf" }, { "NodeID": 9, "HierarchyLevel": 1, "Description": "2.2", "ParentNodeID": 2, "DrillState": "leaf" }, { "NodeID": 10, "HierarchyLevel": 1, "Description": "2.3", "ParentNodeID": 2, "DrillState": "leaf" }, { "NodeID": 11, "HierarchyLevel": 1, "Description": "3.1", "ParentNodeID": 3, "DrillState": "expanded" }, { "NodeID": 12, "HierarchyLevel": 2, "Description": "3.1.1", "ParentNodeID": 11, "DrillState": "expanded" }, { "NodeID": 13, "HierarchyLevel": 3, "Description": "3.1.1.1", "ParentNodeID": 12, "DrillState": "leaf" }, { "NodeID": 14, "HierarchyLevel": 3, "Description": "3.1.1.2", "ParentNodeID": 12, "DrillState": "leaf" }, { "NodeID": 15, "HierarchyLevel": 3, "Description": "3.1.1.3", "ParentNodeID": 12, "DrillState": "leaf" }, { "NodeID": 16, "HierarchyLevel": 3, "Description": "3.1.1.4", "ParentNodeID": 12, "DrillState": "leaf" } ]}

When run index.html as Web App Preview I only see a blank screen and I don't see any errors in F12 Developer tools in Chrome. Please assist.

Thanks lots, Mark

Hi Binh I have all the SAPUI5 Core Libraries loaded in the project, what do you mean with above statement? — Mark Bailey
Hi, blank screen mostly appears because of wrong source or maybe, wrong file path. I think at least there is one error in the console tab of Chrome Dev Tools. — Binh
Thanks Binh, I'm still finding my way around SAPUI5, how would I know if the local json model was read and loaded successfully and how I would I be able to see the contents in model1? — Mark Bailey
Hi, you can try to define the local model in 'manifest.json' file. That way, SAPUI5 will automatically load your model while initiate itself. — Binh

Guilherme Maeda Guilherme Maeda · Accepted Answer · 2018-10-29T21:44:34

You can only use treeAnnotationProperties with an OData model. It won't work with a JSON model.

Try to structure your data differently and bind it using the arrayNames parameter, like in the example below:

https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.JSONTreeBinding/code

SAPUI5 TreeTable in Eclipse with XML View

1 Answers