Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
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
2 Comments
Labels in this area