Alternative for Tree table in Mobile View

Dear Readers,

I hope this blog post will be helpful for SAP UI5 /SAP Fiori app developers who are searching for an alternative for tree table in mobile view.

As we all know tree table is used to display the data to the users in hierarchy structure. It’s getting tricky when it comes to mobile view to show the data in hierarchy structure as tree table is not a adaptive control in Mobile View. So here I am going to show how can we build a solution merging 2 or 3 SAP UI5 controls for hierarchy level 0 and 1.

Let’s see the demo directly,

Create a SAP UI5 application from the template

Select SAPUI5 application and click on “Next”

Give Project Name and Namespace and click on “Next”

Give the view name and click on “Finish”

I have used Northwind service as a data source and added it to my destination,

http://services.odata.org/V3/Northwind/Northwind.svc.

Else, you can use your own json data.

If you are not using Northwind Service in destination you can skip the below steps.

In neo-app.json

Add your target destination

If you are not using Northwind Service in destination you can skip the below steps.

In Manifest.json

Lets add the data source and create a default model without name.

In View.xml

Let’s see the interesting part now. We are going to use the list inside the panel. Where Panel to hold Headers details (Customer Details) and list to hold item details (Order Details).

<VBox items="{oModel>/}">
	<Panel expandable="true" width="auto">
		<headerToolbar>
			<OverflowToolbar>
				<Title text="{oModel>CustomerID}"/>
				<ToolbarSpacer/>
				<Label text="{oModel>Phone}"></Label>
			</OverflowToolbar>
		</headerToolbar>
		<content>
			<List items="{oModel>Orders/results/}">
				<StandardListItem title="{oModel>OrderID}" info="{oModel>Freight}" infoState="Success"></StandardListItem>
			</List>
		</content>
	</Panel>
</VBox>

In controller.js

onAfterRendering: function () {
	this.getView().getModel().read("/Customers", {
		urlParameters: {
			$expand: "Orders"
		},
		success: function (oData, oResp) {
			var oModel = new JSONModel(oData.results);
			this.getView().setModel(oModel, "oModel");
		}.bind(this),
		error: function (oError) {
			MessageBox.error(oError);
		}
	});
}

or

onAfterRendering: function () {
	var oData = {
		"results": [{
			"CustomerID": "ALFKI",
			"Phone": "030-0074321",
			"Orders": {
				"results": [{
					"OrderID": "10643",
					"Freight": "29.4600"
				}, {
					"OrderID": "10692",
					"Freight": "61.0200"
				}, {
					"OrderID": "10702",
					"Freight": "23.9400"
				}, {
					"OrderID": "10835",
					"Freight": "69.5300"
				}, {
					"OrderID": "10952",
					"Freight": "40.4200"
				}]
			}
		}, {
			"CustomerID": "ANATR",
			"Phone": "(5) 555-4729",
			"Orders": {
				"results": [{
					"OrderID": "10308",
					"Freight": "1.6100"
				}, {
					"OrderID": "10625",
					"Freight": "43.9000"
				}, {
					"OrderID": "10759",
					"Freight": "11.9900"
				}]
			}
		}, {
			"CustomerID": "ANTON",
			"Phone": "(5) 555-3932",
			"Orders": {
				"results": [{
					"OrderID": "10365",
					"Freight": "22.0000"
				}, {
					"OrderID": "10507",
					"Freight": "47.4500"
				}]
			}
		}]
	};
	var oModel = new JSONModel(oData.results);
	this.getView().setModel(oModel, "oModel");
}

Our application look like

In View.xml

Let’s try to change the list with table.

<VBox items="{oModel>/}">
	<Panel expandable="true" width="auto">
		<headerToolbar>
			<OverflowToolbar>
				<Title text="{oModel>CustomerID}"/>
				<ToolbarSpacer/>
				<Label text="{oModel>Phone}"></Label>
			</OverflowToolbar>
		</headerToolbar>
		<content>
			<!--	<List items="{oModel>Orders/results/}">
				<StandardListItem title="{oModel>OrderID}" info="{oModel>Freight}" infoState="Success"></StandardListItem>
			</List>-->
			<Table items="{oModel>Orders/results/}">
				<columns>
					<Column >
						<Text text="{i18n>OrderId}" class="tableheaderClassMaterial"/>
					</Column>
					<Column >
						<Text text="{i18n>Freight}" class="tableheaderClass"/>
					</Column>
				</columns>
				<items>
					<ColumnListItem>
						<cells>
							<Text text="{oModel>OrderID}"/>
							<Text text="{oModel>Freight}"/>
						</cells>
					</ColumnListItem>
				</items>
			</Table>
		</content>
	</Panel>
</VBox>

And now our application looks like

Conclusion

In this blog post, We have learnt how to show the hierarchical data in Mobile. We have seen how to add the destination in neo-app.json and data source in manifest.json file, how to build a view with different controls and how to fetch data from our data source also with an alternative of creating local json data.Based on the business requirement you can change the solution with any two UI5 controls which has aggregation binding.

I would suggest not to use this approach for larger hierarchy level.

Suggestions are welcome

Thanks you:)

#HappyLearning

Original Article:
https://blogs.sap.com/2020/05/26/alternative-for-tree-table-in-mobile-view/