Skip to Content
0

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

Jun 30, 2017 at 11:04 AM

558

avatar image
Former Member

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)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

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

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");
		}
	});


Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Jul 06, 2017 at 06:36 AM
0

Closed

Thanks for help.

Share
10 |10000 characters needed characters left characters exceeded