sap ui5 with local json model
Post on 05-Jul-2018
273 Views
Preview:
TRANSCRIPT
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 1/14
Generated by Jive on 2016-05-17+02:00
1
SAPUI5 Developer Center: Sap UI5 withLocal 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.
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 2/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
2
Step 2: Create the Folder Json and file
Then provide the name of the view and click on Finish.
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 3/14
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 4/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
4
Create a new folder named “JSON” in the Web Content directory of the project JsonDemo
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 5/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
5
Creating a File named Item.json under the folder json
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 6/14
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 7/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
7
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",
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 8/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
8
"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"
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 9/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
9
}));
// 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:
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 10/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
10
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,
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 11/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
11
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
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 12/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
12
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
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 13/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
13
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...
8/16/2019 Sap Ui5 With Local Json Model
http://slidepdf.com/reader/full/sap-ui5-with-local-json-model 14/14
SAPUI5 Developer Center: Sap UI5 with Local JSON Model
Generated by Jive on 2016-05-17+02:00
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
top related