UI5-Table

lightUI5-Table

 

 


Create a UI5 project.

1


Choose SAPUI5 Application project.

2


Provide a name choose marked library and options.

3


The below screen appears with Index.html page.

4


The task is to display a table with static data.

First include the ‘sap.ui.table’ library in the first script section.

56


Code Snippet:

// Prepare static data set
oData = [
{firstName: “Test1”, lastName: “Demo1”},
{firstName: “Test2”, lastName: “Demo2”},
{firstName: “Test3”, lastName: “Demo3”},
{firstName: “Test4”, lastName: “Demo4”},
{firstName: “Test5”, lastName: “Demo5”},
{firstName: “Test6”, lastName: “Demo6”},
{firstName: “Test7”, lastName: “Demo7”},
{firstName: “Test8”, lastName: “Demo8”},
];
// Instantiate Table
oTable= new sap.ui.table.Table({
title: “Simple 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”, “firstName”)
});

oCol2 = new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: “Last Name”}),
template: new sap.ui.commons.TextView().bindProperty(“text”, “lastName”)
});
// 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”);
oTable.placeAt(“content”);


Here we have the table.

78


To enable sort property for the first column, add the SortProperty and pass the data field name.

9


Click on the first column name.

10


The sort options appear.

1112


To Enable the filter property, add the filterProperty to the column and pass the data field name.

13


Click on the first column name.

14


15


16


 

Advertisements

One thought on “UI5-Table

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s