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

Creating a Table in UI5

 

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.

clip_image001

 

In the pop up that appears choose the SAP UI5 Application project and click on next.

clip_image002

 

Enter the name for the project and click on next.

 

clip_image003

 

Enter the name for the view and choose the development paradigm. Choose javascript as a development paradigm.

clip_image004

 

Click on finish to complete. Three files will be created.

 

clip_image005

 

 

Step 2: In the index.html file include the necessary javascript library that are needed for creation of table.

clip_image006

 

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

clip_image007

2. Creating the model

clip_image008

 

3. Creating the instance of the table.

clip_image009

 

4. Creating columns for the table.

clip_image010

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.

clip_image011

 

6. Binding model to the table and return the table control.

clip_image012

 

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.

clip_image013

 

Execute on the local tomcat server configured.

clip_image015

 

Note:  If you are not able to see the output, then copy the URL and run it on browser.     

About Arun

0 Comments:

Post a Comment

Powered by Blogger.