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 |
| 4/5 | |
| 1002 | Ajith | Cheruvally | Male | False |
| 4.5/5 | |
| 1003 | Sarah | M | Female | True |
| 5/5 | |
| 1004 | Ayyappan | Venugopal | Male | True |
| 4/5 | |
| 1005 | Sabariraj | M | Male | False |
| 4.3/5 | |
| 1006 | Saran | Raju | Male | False |
| 5/5 | |
| 1007 | Arun | Prakash | Male | True |
| 3.9/5 | |
| 1008 | Ravi | Shankar | Male | True |
| 3/5 | |
| 1009 | Priyanka | R | Female | False |
| 2/5 | |
| 1010 | Gautham | Ji | Male | False |
| 4/5 |
Step 1: Create an application Project.
Enter the name for the view and click on finish.
In the index.html file, include the javascript library necessary for table.
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.
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.
3. Create a JSON Model and assign the data set to the model
4. Create the instance of the table.
5. Create the columns for the table.
Employee ID, First Name and Last Name
Gender as Drop Down
Approved as Check Box
Image of Employee as Image UI element
Url as Link
Ratings as Rating indicator
Step 6: Add the columns to the table:
Step 7: Bind the model to the table
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:
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.
Hi,
ReplyDeleteTutorial is really helpful, could you please share the next tutorial which you mentioned navigation on list.