This tutorial explains how to create a table UI with SAP UI5.
Steps:
1. Create a data set to be displayed in the table.
2. Create a JSON Model with the data set
3. Create the instance of the table
4. Create columns for the table
5. Add the columns to the table
6. Bind the model data to the table
Step 1: Create an SAP UI5 application project. Go to Menu File à New à Project.
In the pop up that appears choose the SAP UI5 Application project and click on next.
Enter the name for the project and click on next.
Enter the name for the view and choose the development paradigm. Choose javascript as a development paradigm.
Click on finish to complete. Three files will be created.
Step 2: In the index.html file include the necessary javascript library that are needed for creation of table.
Step 3: In the file created for the view controller main.view.js, in create content function write the following coding.
1. Constructing the data set
2. Creating the model
3. Creating the instance of the table.
4. Creating columns for the table.
In this step, in the template we are providing the text view as the editor for the column, here we can provide whichever UI element we want. The bind property refers to which attribute (“Text”) we are binding in the UI element to which attribute (“firstName”) in the data set.
5. Adding the columns to the table.
6. Binding model to the table and return the table control.
Coding in the function createContent is as below:
// Creating a data set
var aData = [
{firstName: "Arun", lastName: "Krishnamoorthy", age:"26"},
{firstName: "Ravi", lastName: "Shankar", age:"20"},
{firstName: "Bala", lastName: "Kumar", age:"27"},
];
// Bind the data to the model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: aData});
// Create the instance of the table UI element
var oTable = new sap.ui.table.Table("tab_names",
{
title: "Employee Details" ,
visibleRowCount: 5
});
// Create columns
var oColumn1 = new sap.ui.table.Column("fname",
{
label : new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextView().bindProperty("text","firstName")
});
var oColumn2 = new sap.ui.table.Column("lname",
{
label : new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text","lastName")
});
var oColumn3 = new sap.ui.table.Column("age",
{
label : new sap.ui.commons.Label({text: "Age"}),
template: new sap.ui.commons.TextView().bindProperty("text","age")
});
// Add the columns to the table
oTable.addColumn(oColumn1);
oTable.addColumn(oColumn2);
oTable.addColumn(oColumn3);
// Bind model to the table
oTable.setModel(oModel);
oTable.bindRows("/modelData");
return oTable;
Output:
Place the cursor on file index.html and execute the application.
Execute on the local tomcat server configured.
Note: If you are not able to see the output, then copy the URL and run it on browser.
0 Comments:
Post a Comment