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

To report this post you need to login first.

23 Comments

You must be Logged on to comment or reply to a post.

  1. Venkata Reddy

    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

    (0) 
    1. pandu j

      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

      (0) 
  2. 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);

    (0) 
    1. Abdul Rahman 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

      (0) 
    1. 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

      (0) 

Leave a Reply