Sap UI5 with Local JSON Model

[abdul_rahman5]

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:

[Former Member]

Good Document for beginners

[bharanidharan]

Simple and nice tutorial

[JerryWang]

very good article, simple and useful

[Mohamed_Yousuf]

Nice tutorial...

[Former Member]

Worth & Thank you for this useful information !

[former_member184893]

Good document abdul and Keep on posting..

[faragelfadaly]

Simple and illustrative post , Thanks.

[Former Member]

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

[faragelfadaly]

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);

[govardan_raj]

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

[Former Member]

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

[abdul_rahman5]

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

[asavarimuthu]

Hi Abdul,

good article.

Keep on posting more.

Regards,

Saga

[Former Member]

Hi Abdul,

Simple and useful article. Thanks for sharing your information.

Regards,

Geetha

[Former Member]

Hi Abdul,

Nice article. Very useful. Thanks for sharing.

Regards,

Karthikeyan JNG

[Former Member]

Nice article. Thanks for sharing.

[singanaraja]

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

[Former Member]

Hi,

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

Its urgent.please help

[Former Member]

Abdul  if i want to fetch data in textview instead of table . how can i achieve it ?

[agentry_src]

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

[Pavan_Golesar]

Short,Simple,Easy one.

Thanks

--PavanG

[Former Member]

Hi Abdul,

Can yiu tell me how json model will get data from database in real time project

[Former Member]

hi abdul,

really nice article can you help with a question?

can we use this local json for a splitapp?

thank you.