This document describes you about how to create a simple table with JSON object in SAPUI5 from the scratch.
UI5 is implemented in JavaScript, so for loading UI5, its bootstrap just needs to be included with a <script> tag. The last two attributes select the visual design to apply initially (other choices would be "sap_hcb" or "sap_platinum" or “sap_goldreflection”) and the UI control library/libraries to use ("sap.ui.dev" would be another one). In your scenario you need to make sure the URL points to a SAPUI5 installation.
<!-- 1.) Load SAPUI5, select theme and control library -->
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table "
data-sap-ui-theme="sap_goldreflection">
//themes : sap_platinum, sap_goldreflection
</script>
Now, you have included the library file & theme for visual design.
Create a JSON object “vData” to hold the contents of an employee such as Associate ID, Associate Name, Company Name associated with weblink, gender, mobile & rating.
<!-- 2.) Create a UI5 Table and place it onto the page -->
// define some sample data using JSON
var vData=[
{assID:"EM123456", name:"Bharath S", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9934307162", rating:5},
{assID:"EM263521", name:"Arun M", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9786721460", rating:3},
{assID:"EM323455", name:"Anitha", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Female", mobile:"9524396759", rating:4},
{assID:"EM237652", name:"Ganesh", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9876543210", rating:1},
{assID:"EM398454", name:"Ajai", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9576113218", rating:4},
{assID:"EM348092", name:"Pranav", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9576113218", rating:5}
];
Now, we are created 6 sample rows in JSON then define a table to place the contents created via JSON
// Define a table [Note: you must include the table library to make the Table class work]
var oTable = new sap.ui.table.Table({
title: "Employee Details", // Displayed as the heading of the table
visibleRowCount: 3, // How much rows you want to display in the table
selectionMode: sap.ui.table.SelectionMode.Single, //Use Singe or Multi
navigationMode: sap.ui.table.NavigationMode.Paginator, //Paginator or Scrollbar
fixedColumnCount: 3, // Freezes the number of columns
enableColumnReordering:true, // Allows you to drag and drop the column and reorder the position of the column
width:"1024px" // width of the table
});
// Use the Object defined for table to add new column into the table
oTable.addColumn(new
label: new sap.ui.commons.Label({text: "Associate ID"}), // Creates an Header with value defined for the text attribute
template: new sap.ui.commons.TextField().bindProperty("value", "assID"), // binds the value into the text field defined using JSON
sortProperty: "assID", // enables sorting on the column
filterProperty: "assID", // enables set filter on the column
width: "125px" // width of the column
}));
oTable.addColumn(new
label: new sap.ui.commons.Label({text: "Associate Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
width: "125px"
}));
oTable.addColumn(new
label: new sap.ui.commons.Label({text: "Company"}),
template: new sap.ui.commons.Link().bindProperty("text", "linkText").bindProperty("href", "href"),
sortProperty: "linkText",
filterProperty: "linkText",
width: "200px"
}));
oTable.addColumn(new
label: new sap.ui.commons.Label({text: "Gender"}),
template: new sap.ui.commons.ComboBox(
{items: [new sap.ui.core.ListItem({text: "Female"}),
new sap.ui.core.ListItem({text: "Male"})]}).bindProperty("value","gender"),
sortProperty: "gender",
filterProperty: "gender",
width: "75px"
}));
oTable.addColumn(new
label: new sap.ui.commons.Label({text: "Contact Number"}),
template: new sap.ui.commons.TextField().bindProperty("value", "mobile"),
sortProperty: "mobile",
filterProperty: "mobile",
width: "75px"
}));
oTable.addColumn(new
label: new sap.ui.commons.Label({text: "Rating"}),
template: new sap.ui.commons.RatingIndicator().bindProperty("value", "rating"),
sortProperty: "rating",
filterProperty: "rating",
width: "100px"
}));
Now, create a model to bind the table rows.
//Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel(); // created a JSON model
oModel.setData({modelData: vData}); // Set the data to the model using the JSON object defined already
oTable.setModel(oModel);
oTable.bindRows("/modelData"); // binding all the rows into the model
//Initially sort the table
oTable.sort(oTable.getColumns()[0]);
After binding the table into the model, bring the table into the UI(i.e., to display in the web)
//Bring the table onto the UI
oTable.placeAt("EmpTbl");
Place the table inside the <DIV> tag.
<div id="EmpTbl"> </div>
Here is your full code :
Sample Outputs (After executing the code):
Output screen 1:
Output Screen2 :
Shows the Sorting & filtering features in the table.
You can also customize the code as per your requirement to display more than 3 rows and having scrollable option instead of pagination to view the data.
Hope the comments I used in the code will help in understanding the functionality of the code(line by line).
- SAP Managed Tags:
11 Comments
