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