SAPUI5 Table in XML view with different controllers.

Tables are the widely used UI controls in any applications. In UI5 we have tables in many forms such as sap.ui.table.Table, sap.m.Table, Smart Tables etc.. These tables are constructed using aggregation binding. Aggregation binding will help to create tables rows according to data model.

Suggested Reading: sap.m.Table with different UI controllers.

Requirement : Creating SAPUI5 table in XML view. For data it should use JSON data model. Table should have different UI controllers such as text, input, button.

Step-by-step procedure :

First we need to create data model for table. For that we can use oData service, northWind data services or local JSON model. For this example we are using local JSON model since it is simple and easy to understand.

In controller file we are defining an array with two objects, which are indirectly two rows of our table. Then we are setting that data array to JSON model as shown below.

main.controller.js

oData is the array that is containing data objects. JSON model name is oTableModel and we are setting data as an array inside model. We can access the array using oTableModel>/data path.

main.view.xml

In view we are defining namespaces first. For sap.ui.table we used namespace t. That is why we are using t:Table, t:columns instead of sap.ui.table.Table or sap.ui.table.columns.

For table we need to set the model first. We binded oTableModel>/data, which we created in controller file. We are defining 4 columns, label controls are used to give column names. Templates are used to create rows for table.

For each column we are using different controllers such as Text, Icon, Button and you can use any controller according to your requirement. For column controllers we are binding data model properties such as oTableModel>col1.

Output Screen :

table

Are you new to SAPUI5? May be you would like to learn SAPUI5 from beginning. Start your learning process with us for FREE!! Read More at SAPUI5 Complete Tutorials