You are on page 1of 14

SAPUI5 Developer Center: Sap UI5 with

Local JSON Model


Posted by Abdul Rahman Dec 10, 2014
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.

Generated by Jive on 2016-05-17+02:00


1

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Step 2: Create the Folder Json and file


Then provide the name of the view and click on Finish.

Generated by Jive on 2016-05-17+02:00


2

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Then select the Project JsonDemo and create a new folder using the context wizard

Generated by Jive on 2016-05-17+02:00


3

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Create a new folder named JSON in the Web Content directory of the project JsonDemo

Generated by Jive on 2016-05-17+02:00


4

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Creating a File named Item.json under the folder json

Generated by Jive on 2016-05-17+02:00


5

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Generated by Jive on 2016-05-17+02:00


6

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

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",

Generated by Jive on 2016-05-17+02:00


7

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

"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"

Generated by Jive on 2016-05-17+02:00


8

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

}));
// 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:

Generated by Jive on 2016-05-17+02:00


9

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

9764 Views Tags: json, html5;, ui5_demoapps, ui5_portal

Sushil Sahu
Apr 25, 2016 7:59 AM
Hi Abdul,
Can yiu tell me how json model will get data from database in real time project
Pavan Golesar
Sep 24, 2015 7:54 AM
Short,Simple,Easy one.
Thanks
--PavanG
Michael Appleby in response to Mohit Zanwar on page 10
Sep 1, 2015 3:35 PM
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
Mohit Zanwar
Sep 1, 2015 7:38 AM
Abdul if i want to fetch data in textview instead of table . how can i achieve it ?
Snigdha Singh
Jul 24, 2015 11:59 AM
Hi,

Generated by Jive on 2016-05-17+02:00


10

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Can anyone tell,how to bind the similar data to listbox.


Its urgent.please help
SINGANA RAJAREDDY
Apr 2, 2015 3:31 PM
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
kailasam N
Mar 10, 2015 3:01 PM
Nice article. Thanks for sharing.
karthikeyan JNG
Mar 9, 2015 10:55 AM
Hi Abdul,
Nice article. Very useful. Thanks for sharing.
Regards,
Karthikeyan JNG
Geetha Ganesan
Mar 9, 2015 7:14 AM
Hi Abdul,
Simple and useful article. Thanks for sharing your information.
Regards,
Geetha
Savarimuthu Sagayaraj
Feb 25, 2015 11:26 AM
Hi Abdul,
good article.
Keep on posting more.
Regards,
Saga
Abdul Rahman in response to govardan raj on page 12
Feb 24, 2015 9:28 AM
Hi Govardan,
Remember to add : sap.ui.table in index html

Generated by Jive on 2016-05-17+02:00


11

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

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
pandu j in response to VREDDY S on page 13
Feb 24, 2015 8:28 AM
Hi VREDDY,
you may use the below code to delete a row from the table

first get the selected index of the row you want to delete
get the Row context
Splice the data
bind the Data model again to 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
govardan raj
Feb 24, 2015 7:06 AM
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

Generated by Jive on 2016-05-17+02:00


12

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Farag Elfadaly
Feb 19, 2015 9:14 PM
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);
VREDDY S
Jan 23, 2015 6:42 AM
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
Farag Elfadaly
Jan 8, 2015 10:56 PM
Simple and illustrative post

, Thanks.

Syed Nayeemuden S N
Dec 31, 2014 1:56 PM
Good document abdul and Keep on posting..
ramkumar ganesan
Dec 30, 2014 2:10 PM
Worth & Thank you for this useful information !
Mohamed Yosufdeen JMH
Dec 30, 2014 1:28 PM
Nice tutorial...

Generated by Jive on 2016-05-17+02:00


13

SAPUI5 Developer Center: Sap UI5 with Local JSON Model

Jerry Wang
Dec 30, 2014 7:42 AM
very good article, simple and useful
BHARANIDHARAN S P M
Dec 11, 2014 11:23 AM
Simple and nice tutorial
indrasena reddy
Dec 10, 2014 6:25 PM
Good Document for beginners

Generated by Jive on 2016-05-17+02:00


14