UI5-Table in View

light UI5-Table- Design table in a view

In the last post UI5-Table , the project is created without a view and all the code is put in index.html file. In this post we will design the table in a view and link the view to the index.html.

Create a SAP UI5 project.

Provide project name, from options choose Create an Initial view.

Provide view name and choose JavaScript as Development Paradigm.

The project created with 3 files as highlighted.

The view “table_view.view.js”.

The view controller.

The index.html which already linked to the view .

As we are going to design a table, so add the sap.ui.table library in the index.html file.

Now in the “table_view.view.js” design a table with JSON model.

Code Snippet in “table_view.view.js”

sap.ui.jsview(“simple_table_display.table_view”, {

/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.
* @memberOf simple_table_display.table_view
*/
getControllerName : function() {
return “simple_table_display.table_view”;
},

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf simple_table_display.table_view
*/
createContent : function(oController) {
// Prepare static data set
oData = [
{fName: “Test1”, lName: “Demo1”},
{fName: “Test2”, lName: “Demo2”},
{fName: “Test3”, lName: “Demo3”},
{fName: “Test4”, lName: “Demo4”},
{fName: “Test5”, lName: “Demo5”}
];
// Instantiate Table
oTable= new sap.ui.table.Table({
title: ‘Table Demo’,
visibleRowCount: 5,
selectionMode: sap.ui.table.SelectionMode.Single
});
// Instantiate Column
oCol1 = new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: “First Name”}),
template: new sap.ui.commons.TextView().bindProperty(“text”, “fName”)
});

oCol2 = new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: “Last Name”}),
template: new sap.ui.commons.TextView().bindProperty(“text”, “lName”)
});
// Add columns to the Table
oTable.addColumn(oCol1);
oTable.addColumn(oCol2);
// Instantitae JSON Model
oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: oData});
// Add model to the table
oTable.setModel(oModel);
oTable.bindRows(“/modelData”);
return oTable;
}