Skip to Content

How to create sap.m.Tree table using ODATA Service (Its in Table Structure)

Hello Friends,

Need small help on sap.m.Tree Table. Kindly help me how to create Tree Table as per below screen shot using XML View

ODATA Service is

Kindly help me how to create Tree table using above ODATA Service.?

Regards

Vijay

capture1.png (11.7 kB)
untitled.png (35.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Jun 30, 2017 at 12:05 PM

    Hi,

    Try this;

    https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.ui.table.sample.TreeTable.JSONTreeBinding/preview

    <mvc:View controllerName="test.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
    	xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout" xmlns:table="sap.ui.table" xmlns:smartTable="sap.ui.comp.smarttable"
    	xmlns:commons="sap.suite.ui.commons">
    	<App>
    		<pages>
    			<Page title="Org. Unit">
    				<content>
    					<table:TreeTable id="TreeTable" rows="{path:'nodeModel>/nodeRoot', parameters: {arrayNames:['children']}}" enableSelectAll="false"
    						expandFirstLevel="true">
    						<table:columns>
    							<table:Column>
    								<Label text="Type"/>
    								<table:template>
    									<Text text="{nodeModel>id}"/>
    								</table:template>
    							</table:Column>
    							<table:Column width="20rem">
    								<Label text="Orgeh"/>
    								<table:template>
    									<Text text="{nodeModel>text}"/>
    								</table:template>
    							</table:Column>
    							<table:Column width="4rem">
    								<Label text="Type"/>
    								<table:template>
    									<Text text="{nodeModel>type}"/>
    								</table:template>
    							</table:Column>
    							<table:Column >
    								<Label text="Tag"/>
    								<table:template>
    									<Text text="{nodeModel>tag}"/>
    								</table:template>
    							</table:Column>
    							<table:Column >
    								<Label text="Betrag"/>
    								<table:template>
    									<Text text="{nodeModel>betrag}"/>
    								</table:template>
    							</table:Column>
    						</table:columns>
    					</table:TreeTable>
    
    
    					<!--					<Tree items="{path:'nodeModel>/nodeRoot', parameters: {arrayNames:['children']}}">
    						<StandardTreeItem title="{nodeModel>text}"/>
    					</Tree>-->
    
    
    				</content>
    			</Page>
    		</pages>
    	</App>
    </mvc:View>
    
    
    		onInit: function() {
    			var flatData = this.readFile();
    			var deepData = this.transformTreeData(flatData);
    			this.setModelData(deepData);
    
    
    
    		},
    
    
    		readFile: function() {
    
    
    			var flatData = null;
    			//load the data from the JSON file
    			//NB same format as gateway service could be
    			var inModel = new sap.ui.model.json.JSONModel();
    			inModel.loadData("/sap/opu/odata/SAP/Z_ECA_TEST02_SRV/SubOrgsSet?$format=json", "", false);
    
    
    			var data = inModel.getData();
    	
    			if (data) {
    				flatData = data.d.results;
    			}
    
    			return flatData;
    		},
    
    
    		transformTreeData: function(nodesIn) {
    
    
    			var nodes = []; //'deep' object structure
    			var nodeMap = {}; //'map', each node is an attribute
    
    
    			if (nodesIn) {
    
    
    				var nodeOut;
    				var parentOrgeh;
    
    
    				for (var i = 0; i < nodesIn.length; i++) {
    					var nodeIn = nodesIn[i];
    					nodeOut = {
    						id: nodeIn.Orgeh,
    						text: nodeIn.Stext,
    						type: nodeIn.Otype,
    						tag: nodeIn.Tag,
    						betrag: nodeIn.Betrag,
    						children: []
    					};
    
    
    					parentOrgeh = nodeIn.ParentOrgeh;
    
    
    					if (parentOrgeh && parentOrgeh.length > 0) {
    						//we have a parent, add the node there
    						//NB because object references are used, changing the node
    						//in the nodeMap changes it in the nodes array too
    						//(we rely on parents always appearing before their children)
    						var parent = nodeMap[nodeIn.ParentOrgeh];
    
    
    						if (parent) {
    							parent.children.push(nodeOut);
    						}
    					} else {
    						//there is no parent, must be top level
    						nodes.push(nodeOut);
    					}
    
    
    					//add the node to the node map, which is a simple 1-level list of all nodes
    
    
    					nodeMap[nodeOut.id] = nodeOut;
    
    
    				}
    
    
    			}
    
    
    			return nodes;
    		},
    
    
    		setModelData: function(nodes) {
    			//store the nodes in the JSON model, so the view can access them
    			var nodesModel = new sap.ui.model.json.JSONModel();
    			nodesModel.setData({
    				nodeRoot: {
    					children: nodes
    				}
    			});
    			this.getView().setModel(nodesModel, "nodeModel");
    		}
    	});
    

    Add comment
    10|10000 characters needed characters exceeded

  • Jul 06, 2017 at 06:36 AM

    Closed

    Thanks for help.

    Add comment
    10|10000 characters needed characters exceeded