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

Table with different types of UI

 

This tutorial explains table with different type of UI elements used in it.

1.      Link to action

2.      Checkbox

3.      Image

4.      Drop down

5.      Ratings Indicator

Assume below is the table which we wanted to display. We wanted the gender to be displayed in the drop down, Approved to be checkbox, display the image icon, URL as link and their rating indicator.

Emp ID

First name

Last name

Gender

Approved

Img

URL

Ratings

1001

Arun

Krishnamoorthy

Male

True

 

www.teamabap.com

4/5

1002

Ajith

Cheruvally

Male

False

 

www.ajith.com

4.5/5

1003

Sarah

M

Female

True

 

www.isarah.com

5/5

1004

Ayyappan

Venugopal

Male

True

 

www.ayyappan.com

4/5

1005

Sabariraj

M

Male

False

 

www.sabariraj.com

4.3/5

1006

Saran

Raju

Male

False

 

www.saran.com

5/5

1007

Arun

Prakash

Male

True

 

www.ap.com

3.9/5

1008

Ravi

Shankar

Male

True

 

www.ravi.com

3/5

1009

Priyanka

R

Female

False

 

www.lavanaya.com

2/5

1010

Gautham

Ji

Male

False

 

www.gautham.com

4/5

 

 

Step 1: Create an application Project.

clip_image001

 

Enter the name for the view and click on finish.

 

clip_image002


 

In the index.html file, include the javascript library necessary for table.

clip_image003

 

In the file created for the view, main.view.js write the following code in create content function.

1. Insert the images into the project folder. Create a folder images in the application project and copy paste the images into the folder.

clip_image004

2. Construct the dataset.  

Note: We are not fetching data from any data source. For that we need oData services. Hence we are manually creating the dataset here to be displayed in table.

clip_image006

 

3. Create a JSON Model and assign the data set to the model

clip_image007

 

4. Create the instance of the table.

clip_image008

 

5. Create the columns for the table.

Employee ID, First Name and Last Name

clip_image009

 

Gender as Drop Down

clip_image010

 

Approved as Check Box

clip_image011

 

Image of Employee as Image UI element

clip_image012

 

Url as Link

clip_image014

 

Ratings as Rating indicator

clip_image015

Step 6: Add the columns to the table:

clip_image016

 

Step 7: Bind the model to the table

clip_image017

Coding’s in the function CreateContent:

// Constructing the dataset               

                        var aEmpData = [

                                    {empId: "1001", fName:"Arun",lName:"Krishnamoorthy", gender:"Male", approved: true, image: "images/male.png", url: "www.arun.com",rating:4},

                                    {empId: "1002", fName:"Ajith",lName:"Cheruvally", gender:"Male", approved: true, image: "images/male.png", url: "www.ajith.com",rating:4},

                                    {empId: "1003", fName:"Sarah",lName:"M", gender:"Female", approved: false, image: "images/female.png", url: "www.arun.com",rating: 2},

                                    {empId: "1004", fName:"Ayyappan",  lName:"Venugopal", gender:"Male", approved: true, image: "images/male.png", url: "www.ayyappan.com",rating: 5},

                                    {empId: "1005", fName:"Sabariraj",lName:"M", gender:"Male", approved: true, image: "images/male.png", url: "www.sabari.com",rating: 2},

                                    {empId: "1006", fName:"Saran",lName:"Raju", gender:"Male", approved: false, image: "images/male.png", url: "www.saran.com",rating: 3},

                                    {empId: "1007", fName:"Arun",lName:"Prakash", gender:"Male", approved: true, image: "images/male.png", url: "www.arunap.com",rating: 5},

                                    {empId: "1008", fName:"Arun",lName:"SK", gender:"Male", approved: true, image: "images/male.png", url: "www.arunsk.com",rating: 1},

                                    {empId: "1009", fName:"Priyanka",lName:"K", gender:"Female", approved: false, image: "images/female.png", url: "www.priya.com",rating: 2},

                                    {empId: "1010", fName:"Gautham",lName:"Karthik", gender:"Male", approved: true, image: "images/male.png", url: "www.gautham.com",rating: 4}

                                                                        ];

 

// Create a JSON Model

                        var oModel = new sap.ui.model.json.JSONModel();

                        oModel.setData({modelData: aEmpData});

           

// Create the instance of the table

                        var oTable = new sap.ui.table.Table("t_empdet",

                                                                                    {

                                                                                    title : "Employee Details",

                                                                                    visibleRowCount: 5

                                                                                    });

 

// Create columns for the table                    

// Employee ID- Text View                

                        var oColumn1 = new sap.ui.table.Column("c_empid",

                                                                                    {

                                                                                    label: new sap.ui.commons.Label({text: "Employee ID"}),

                                                                                    template: new sap.ui.commons.TextView().bindProperty("text","empId")

                                                                                    });

// First Name- Text View

                        var oColumn2 = new sap.ui.table.Column("c_fname",

                                                {

                                                label: new sap.ui.commons.Label({text: "First Name"}),

                                                template: new sap.ui.commons.TextView().bindProperty("text","fName")

                                                });

// Last Name- Text View

                        var oColumn3 = new sap.ui.table.Column("c_lname",

                                                {

                                                label: new sap.ui.commons.Label({text: "Last Name"}),

                                                template: new sap.ui.commons.TextView().bindProperty("text","lName")

                                                });

// Gender - Drop down                      

                        // Drop down items

                        oMale = new sap.ui.core.ListItem({text: "Male"});

                        oFemale = new sap.ui.core.ListItem({text: "Female"});

                       

                        var oColumn4 = new sap.ui.table.Column("c_gender",

                                                {

                                                label: new sap.ui.commons.Label({text: "Gender"}),

                                                template: new sap.ui.commons.ComboBox(

                                                                                                                        {items : [oMale, oFemale ]}

                                                                                                                        ).bindProperty("value","gender")

                                                });

                       

                       

// Approved - Check box                    

                       

                        var oColumn5 = new sap.ui.table.Column("c_approved",

                                                {

                                                label: new sap.ui.commons.Label({text: "Approved"}),

                                                template: new sap.ui.commons.CheckBox().bindProperty("checked","approved")

                                                });                    

                       

// Image - Image UI               

                        var oColumn6 = new sap.ui.table.Column("c_image",

                                                {

                                                label: new sap.ui.commons.Label({text: "Image"}),

                                                template: new sap.ui.commons.Image().bindProperty("src","image"),

                                                });

                       

// URL - Link               

                        var oColumn7 = new sap.ui.table.Column("c_url",

                                                {

                                                label: new sap.ui.commons.Label({text: "URL"}),

                                                template: new sap.ui.commons.Link().bindProperty("text","url").bindProperty("href","url")

                                                });

           

// Ratings- Ratings indicator UI

                        var oColumn8 = new sap.ui.table.Column("c_rating",

                                                {

                                                label: new sap.ui.commons.Label({text: "Ratings"}),

                                                template: new sap.ui.commons.RatingIndicator().bindProperty("value","rating")

                                                });

 

                       

// Add the columns to the table

                       

        oTable.addColumn(oColumn1);

        oTable.addColumn(oColumn2);

        oTable.addColumn(oColumn3);

        oTable.addColumn(oColumn4);

        oTable.addColumn(oColumn5);

        oTable.addColumn(oColumn6);

        oTable.addColumn(oColumn7);

        oTable.addColumn(oColumn8);

       

// Bind the model to the table

       

        oTable.setModel(oModel);

        oTable.bindRows("/modelData");

      

        return oTable;

                       

                       


 

Output:

clip_image019

 

If you have noticed the output, we will not be able to see all the data’s. We will only see 5 out of 10 records as we have set visibleRowCount property of the table to 5.  We will see how to set page navigator in the next tutorial.

About Arun

1 Comments:

  1. Hi,

    Tutorial is really helpful, could you please share the next tutorial which you mentioned navigation on list.

    ReplyDelete

Powered by Blogger.