Hi All,
This blog shows the step by step procedure to use the local json model with Sap UI5.
Tools used:
- Eclipse Luna Service Release 1
- Tomcat Apache (Server)
- SAP UI5 Plug-in installed in Eclipse.
- Google Chrome
Step 1: Create the Sap UI5 Application project
In Eclipse, File-->New-->Other and select "SAP UI5 Application Development"-->Application Project and click on next button.
Provide the project name and click on next button.
Step 2: Create the Folder Json and file
Then provide the name of the view and click on Finish.
Then select the Project JsonDemo and create a new folder using the context wizard
Create a new folder named “JSON” in the Web Content directory of the project JsonDemo
Creating a File named Item.json under the folder json
STEP 3: Add the below mentioned content to the JSON File.
{
"Item": [
{
"Manufacturer": "Microsoft",
"Type": "Optical Mouse",
"Price": 300
},
{
"Manufacturer": "Intex",
"Type": "Laptop Mouse",
"Price": 200
},
{
"Manufacturer": "Iball",
"Type": "Traditional Mouse",
"Price": 150
},
{
"Manufacturer": "Dell",
"Type": "Gaming Mouse",
"Price": 400
},
{
"Manufacturer": "Logitech",
"Type": "Wireless mouse",
"Price": 500
},
{
"Manufacturer": "HP",
"Type": "Optical Mouse",
"Price": 300
}
]
}
Implement the following code in JsonDemo.view under the createcontent method.
// Create instance of JSON model
var oModel = new sap.ui.model.json.JSONModel();
// Load JSON in model
oModel.loadData("json/Item.json");
// Create instance of table control
var oTable = new sap.ui.table.Table({
title : "Computer Accessories",
visibleRowCount : 6,
firstVisibleRow : 0
});
// First column "Manufacturer"
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Make"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"Manufacturer"),
width : "100px"
}));
// Second column "Type"
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Model"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"Type"),
width : "100px"
}));
// Third column "Price"
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Amount"
}),
template : new sap.ui.commons.TextView().bindProperty("text",
"Price"),
width : "100px"
}));
// Bind model to table control
oTable.setModel(oModel);
oTable.bindRows("/Item");
oTable.placeAt("content");
Remember to include the library “sap.ui.table” in the index.html
<scriptsrc="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
Right click on the index.html and select the option run on server
Result:
