Sap Ui5 With Local Json Model

SAPUI5 Developer Center: Sap UI5 with Local JSON Model Posted by Abdul Rahman Dec 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" Development " -->Application -->Application Project and click on next button.

Provide the project name and click on next button.

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.


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

Right click on the index.html and select the option run on server Result:


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,


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


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


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


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

Sap Ui5 With Local Json Model

Recommend Documents