Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
SAP UI5

Table with toolbar and Extension toolbar

 

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]

 

 

2. Assign the button to the Table Toolbar property

clip_image002[4]

 

Output: Click on the toolbar button

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]

Assign it to the table extension property.

clip_image006[4]

 

Output:

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;

About Arun

0 Comments:

Post a Comment

Powered by Blogger.