Skip to Content
Author's profile photo Abdul Rahman

Sap UI5 with Local JSON Model

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.

Image1.jpg

Provide the project name and click on next button.

Image1.jpg

Step 2: Create the Folder Json and file

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

Image1.jpg

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

Image1.jpg

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


Image1.jpg


Creating a File named Item.json under the folder json

Image1.jpg



Image1.jpg

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:

Image1.jpg

Assigned Tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Good Document for beginners

      Author's profile photo BHARANIDHARAN S P M
      BHARANIDHARAN S P M

      Simple and nice tutorial

      Author's profile photo Jerry Wang
      Jerry Wang

      very good article, simple and useful

      Author's profile photo Mohamed Yosufdeen J M H
      Mohamed Yosufdeen J M H

      Nice tutorial...

      Author's profile photo Former Member
      Former Member

      Worth & Thank you for this useful information !

      Author's profile photo Syed Nayeemuden S N
      Syed Nayeemuden S N

      Good document abdul and Keep on posting..

      Author's profile photo Farag Elfadaly
      Farag Elfadaly

      Simple and illustrative post , Thanks.

      Author's profile photo Former Member
      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

      Author's profile photo Former Member
      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

      Author's profile photo Farag Elfadaly
      Farag Elfadaly

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

      Author's profile photo GOVARDAN RAJ SHAMANNA
      GOVARDAN RAJ SHAMANNA

      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

      Author's profile photo Abdul Rahman
      Abdul Rahman
      Blog Post Author

      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

      Author's profile photo Savarimuthu Sagayaraj
      Savarimuthu Sagayaraj

      Hi Abdul,

      good article.

       

      Keep on posting more.

       

      Regards,

      Saga

      Author's profile photo Former Member
      Former Member

      Hi Abdul,

       

      Simple and useful article. Thanks for sharing your information.

       

      Regards,

      Geetha

      Author's profile photo Former Member
      Former Member

      Hi Abdul,

       

      Nice article. Very useful. Thanks for sharing.

       

      Regards,

      Karthikeyan JNG

      Author's profile photo Former Member
      Former Member

      Nice article. Thanks for sharing.

      Author's profile photo SINGANA RAJAREDDY
      SINGANA RAJAREDDY

      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

      Author's profile photo Former Member
      Former Member

      Hi,

       

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

      Its urgent.please help

      Author's profile photo Former Member
      Former Member

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

      Author's profile photo Michael Appleby
      Michael Appleby

      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

      Author's profile photo Pavan Golesar
      Pavan Golesar

      Short,Simple,Easy one.

       

      Thanks

      --PavanG

      Author's profile photo Former Member
      Former Member

      Hi Abdul,

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

      Author's profile photo Former Member
      Former Member

      hi abdul,

       

      really nice article can you help with a question?

       

      can we use this local json for a splitapp?

       

      thank you.