介绍
So far we have worked with local JSON data, but now we will access a real OData service to visualize remote data.
1.练习效果
2.源码
You can view and download all files at Walkthrough – Step 26.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
{ "_version": "1.12.0", "sap.app": { ... "ach": "CA-UI5-DOC", "dataSources": { "invoiceRemote": { "uri": "https://services.odata.org/V2/Northwind/Northwind.svc/", "type": "OData", "settings": { "odataVersion": "2.0" } } } }, "sap.ui": { ... }, "sap.ui5": { ... "models": { "i18n": { "type": "sap.ui.model.resource.ResourceModel", "settings": { "bundleName": "sap.ui.demo.walkthrough.i18n.i18n" } }, "invoice": { "dataSource": "invoiceRemote" } } } } |
In the sap.app section of the descriptor file, we add a data source
configuration. With the invoiceRemote, key we specify a
configuration object that allows automatic model instantiation. We specify the type
of the service (OData) and the model version
(2.0). In this step, we want to use the publicly available
Northwind OData service located at
https://services.odata.org/V2/Northwind/Northwind.svc/.
Therefore, the URI points to the official Northwind OData service.
In the models section, we replace the content of the
invoice model. This key is still used as model name when the
model is automatically instantiated during the component initialization. However,
the invoiceRemote value of the dataSource key is a
reference to the data source section that we specified above. This configuration
allows the component to retrieve the technical information for this model during the
start-up of the app.
Our component now automatically creates an instance of sap.ui.model.odata.v2.ODataModel according to the settings we specified
above, and makes it available as a model named invoice. When you use the invoiceRemote data source,
the ODataModel fetches the data from the real Northwind OData service. The invoices we receive from the Northwind
OData service have identical properties as the JSON data we used previously (except for the status property, which is
not available in the Northwind OData service).
3.Note
If you want to have a default model on the component, you can change the name of the model to an empty string in the descriptor file. Automatically instantiated models can be retrieved by calling this.getModel in the component. In the controllers of component-based apps you can call this.getView().getModel() to get the automatically instantiated model. For retrieving a named model you have to pass on the model name defined in the descriptor file to getModel, that is, in the component you would call this.getModel(“invoice”) to get our automatically generated invoice model that we defined in the descriptor.
You can now try to run the app and see what happens – we will see an error related to our new configuration in the console:
Violations of the same-origin policy in Google Chrome
Due to the so called same-origin policy, browsers deny AJAX requests to service endpoints in case the service endpoint has a different
domain/subdomain, protocol, or port than the app. The browser refuses to connect to a remote URL directly for security reasons.
Depending on your development enviroment you have different options to overcome this limitation:
- SAP Web IDE: Configure a destination
- Local Development: Configure a local proxy (CORS anywhere)
- Workaround: Disabling the same-origin policy in the
browser (not recommended, only for testing)