Skip to Content

Accessing two Model in json format in UI5 in same view.

Here
in this example we are displaying data from local json file, and from odata service
in json format.

  1. Create a UI5 Project with js as initial view.
  2. Create a local json file.

             Inside webContent folder create a new folder json.Then create a json file inside json folder.

/wp-content/uploads/2015/08/file_772272.png     /wp-content/uploads/2015/08/json_772273.png

  

  1. Add the product data in Product.json file

/wp-content/uploads/2015/08/product_772319.png

  a) Inside the controller write the following code.

  b) To access the oData service in json format, we need to give the URL of the oData service while creating json model.

  c)To access the local json file we give the path of Json file while creating model   

  d) We have created two model but to differentiate between the two model we have given a key value while setting the model. Here in the      example “cust” and “products” is key.

      

onInit: function() {

                  var oModel= new sap.ui.model.json.JSONModel(http://services.odata.org/V3/northwind/northwind.svc/Customers?$format=json);           

  sap.ui.getCore().setModel(oModel,“cust”);

var oModel1= new sap.ui.model.json.JSONModel(“json/Product.json”);        

  sap.ui.getCore().setModel(oModel1,“products”);                    

 

},

  1. In the View we create two tables one to display data from local json and other two display data fromodata service. We access the data from model using key that we defined in controller for each model. Eg products>Price where products is key and Price is field

createContent
:
function(oController) {

                var oTable=new sap.ui.table.Table({

                       tableId: “myTable”,

                   visibleRowCount:5,

                       navigationMode:sap.ui.table.NavigationMode.Scrollbar,

                       editable: false

              });

                                         var oControl= new sap.ui.commons.TextView({text : “{cust>CompanyName}”});

                                    oTable.addColumn(new sap.ui.table.Column({

                       label: new sap.ui.commons.Label({

                           text: “Company Name”

                     }),

                         visible:true,

                       template:oControl

                }));

 

                                              var oControl= new sap.ui.commons.TextView({text: “{cust>ContactName}”});

                          oTable.addColumn(new sap.ui.table.Column({

                          label: new sap.ui.commons.Label({

                             text: “Contact Name”

                       }),

                                  visible:true,

                      template:oControl

             }));

                               var oControl= new sap.ui.commons.TextView({text : “{cust>ContactTitle}”});

                oTable.addColumn(new sap.ui.table.Column({

                        label: new sap.ui.commons.Label({

                            text: “Contact Title”

                       }),

                                            visible:true,

                       template:oControl

              }));

                                 

              var oControl= new
sap.ui.commons.TextView({text :
“{cust>City}”});

                oTable.addColumn(new sap.ui.table.Column({

                       label: new sap.ui.commons.Label({

                             text: “City”

                       }),

                                 visible:true,

                       template:oControl

              }));

             

              var oControl= new
sap.ui.commons.TextView({text :
“{cust>Country}”});

              oTable.addColumn(new sap.ui.table.Column({

                       label: new sap.ui.commons.Label({

                           text: “Country”

                      }),

                        

                     visible:true,

                       template:oControl

              }));

                               oTable.bindRows(“cust>/value”);

              

                               var oTable2= new sap.ui.table.Table({

                      tableId: “myTable”,

                       visibleRowCount:5,

                                editable: true

                });

                

              var oControl= new
sap.ui.commons.TextView({text :
“{products>ProductName}”});

                oTable2.addColumn(new sap.ui.table.Column({

                       label: new sap.ui.commons.Label({

                             text: “Product Name”

                       }),

                         visible:true,

                       template:oControl

                }));

                 

              var oControl= new
sap.ui.commons.TextView({text :
“{products>Price}”});

                oTable2.addColumn(new sap.ui.table.Column({

                       label: new sap.ui.commons.Label({

                             text: “Price”

                     }),

                                   visible:true,

                       template:oControl

                }));

                             oTable2.bindRows(“products>/Product”);

                                              return [oTable,oTable2];

                 }

   });

  1. Also in index.html you
    have to add
    sap.ui.table Library to access
    table.

<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_goldreflection”>

       </script>

  1. Save all the files.
    Now run the index.html file as web app preview.

/wp-content/uploads/2015/08/result_772321.png

To report this post you need to login first.

3 Comments

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

Leave a Reply