In the previous tutorial “Table in SAP UI5” we have created a simple table UI element. In this tutorial we will create a custom button in the table toolbar.
It was assumed that you have already created a table and we are going to extend that application to place a custom button in the toolbar.
Steps:
1. Create a custom button
2. Assign the button to the toolbar of the table.
Modify the createContent function of the main.view.js as below.
1. Create a custom button.
2. Assign the button to the Table Toolbar property
Output: Click on the toolbar button
You could also create the extension button in the similar way. We just have to assign the button to the extension attribute of the table.
Create an extension button.
Assign it to the table extension property.
Output:
Coding’s in the createContent function.
// 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 a button for toolbar
var oToolButton = new sap.ui.commons.Button("toolbutton",
{
text : "ToolBar Button",
press: function(){
alert("Toolbar event handled");
}
});
// Create an extension button
var oExtButton = new sap.ui.commons.Button("extbutton",
{
text : "Extenstion Button",
press: function(){
alert("Extension button event handled");
}
});
// Create the instance of the table UI element
var oTable = new sap.ui.table.Table("tab_names",
{
title: "Employee Details" ,
visibleRowCount: 5,
// Toolbar for table
toolbar : new sap.ui.commons.Toolbar({items : [oToolButton] }),
extension: [oExtButton]
});
// 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;
0 Comments:
Post a Comment