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.
![clip_image001[4]](http://lh4.ggpht.com/-tt83h0ujedY/U4GLkdupIQI/AAAAAAAAHDw/H-FdUka85V8/s1600-h/clip_image001%25255B4%25255D%25255B2%25255D.png "clip_image001[4]")
2. Assign the button to the Table Toolbar property
![clip_image002[4]](http://lh6.ggpht.com/-mnlbOO5Vuko/U4GLlzjNoZI/AAAAAAAAHEA/qD0oQaXTLX8/s1600-h/clip_image002%25255B4%25255D%25255B2%25255D.png "clip_image002[4]")
Output: Click on the toolbar button
![clip_image004[4]](http://lh3.ggpht.com/-ZEheJWPPyRg/U4GLm-CCYwI/AAAAAAAAHEQ/t-1nqt0LMvA/s1600-h/clip_image004%25255B4%25255D%25255B2%25255D.jpg "clip_image004[4]")
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.
![clip_image005[4]](http://lh4.ggpht.com/-KlmcHD97ZJE/U4GLoWPxvhI/AAAAAAAAHEg/ppI5V2FsnVg/s1600-h/clip_image005%25255B4%25255D%25255B2%25255D.png "clip_image005[4]")
Assign it to the table extension property.
![clip_image006[4]](http://lh3.ggpht.com/-k2KL0mWLvlM/U4GLpo9Xv4I/AAAAAAAAHEw/uoUJLe8oSuM/s1600-h/clip_image006%25255B4%25255D%25255B2%25255D.png "clip_image006[4]")
Output:
![clip_image008[4]](http://lh5.ggpht.com/-JQ3gWgib4wI/U4GLq9ng76I/AAAAAAAAHFA/_JSbKp8qtnI/s1600-h/clip_image008%25255B4%25255D%25255B2%25255D.jpg "clip_image008[4]")
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