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/