Sap UI5 with Local JSON Model
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
<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_bluecrystal”>
</script>
Right click on the index.html and select the option run on server
Result:
Good Document for beginners
Simple and nice tutorial
very good article, simple and useful
Nice tutorial...
Worth & Thank you for this useful information !
Good document abdul and Keep on posting..
Simple and illustrative post
, Thanks.
Hi Abdul,
First off all thanks for sharing your information ..
I Just wanted to know ,
How to add , delete and Upadte records in Local JSON table?
Kindly give to me your inputs.
Regards,
VREDDY
Hi VREDDY,
you may use the below code to delete a row from the table
new sap.ui.commons.Button({text: "Delete", press: function(oEvent) {
var selectedIndex =oTable.getSelectedIndex() ;
if(selectedIndex != -1){
var selectedRowContext = oEvent.getParameters().rowContext;
var tempTableData =oEvent.getSource().getModel().getProperty("/modelData");
tempTableData.splice(selectedIndex, 1);
oTable.getModel().setData({modelData :tempTableData});
oTable.setSelectedIndex(-1);
hope this helps !
Cheers
Pandu
Dear VREDDY,
you can retrieve items as array and change it and set it again to the json model:
var items = oModel.getProperty("/items");
var itemEntity =
{
"Manufacturer": "Toshiba",
"Type": "TV",
"Price": 500
};
items.push(itemEntity);
oModel.setProperty("/items", items);
hi abdull,
Thanks for sharing this document , i replicated the same but my table is empty , can u please help me
Regards
Govardan Raj S
Hi Govardan,
Remember to add : sap.ui.table in index html
Please check the local json name(It's case sensitive)
oTable.setModel(oModel);
oTable.bindRows("/Item");
Try to open the web app preview url in google chrome and open the developer tool and check for errors and share the screenshot of it.
Thanks
Abdul Rahman
Hi Abdul,
good article.
Keep on posting more.
Regards,
Saga
Hi Abdul,
Simple and useful article. Thanks for sharing your information.
Regards,
Geetha
Hi Abdul,
Nice article. Very useful. Thanks for sharing.
Regards,
Karthikeyan JNG
Nice article. Thanks for sharing.
but i want update/modify table again...then set new data to the model again....the table has to be changed with those new values
Hi,
Can anyone tell,how to bind the similar data to listbox.
Its urgent.please help
Abdul if i want to fetch data in textview instead of table . how can i achieve it ?
Please create a Discussion with your question. Adding a comment to a blog is not the right vehicle for asking questions unless it is clarification of some part of the content.
Regards, Mike (Moderator)
SAP Technology RIG
Short,Simple,Easy one.
Thanks
--PavanG
Hi Abdul,
Can yiu tell me how json model will get data from database in real time project
hi abdul,
really nice article can you help with a question?
can we use this local json for a splitapp?
thank you.