Accessing two Model in json format in UI5 in same view.
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.
- Create a UI5 Project with js as initial view.
- Create a local json file.
Inside webContent folder create a new folder json.Then create a json file inside json folder.
- Add the product data in Product.json file
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”);
},
- 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];
}
});
- 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>
- Save all the files.
Now run the index.html file as web app preview.
Although I appreciate your effort, why would you ever load an OData model as a JSONModel? IMHO, that is really bad practice
Thanks for your suggestion. 🙂
How to specify the different model names in an XML View?