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.

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: