Intro
When using an OData service for SAPUI5 development, you need some information about the service like the contained entities, their navigation properties between each other and their properties. You need this information for data binding inside the SAPUI5 application so that you can display the correct/desired data. You can find this information about the service in the metadata of the OData service.
If you have access to the backend URL, you could easily add $metadata at the end of the service URL, but, depending on your browser, the information is more or less readable. My Safari on macOS Sierra just displayed a blank page… The best browser to view this information out-of-the-box is Microsoft Internet Explorer or Firefox.
Viewing metadata
Let’s have a quick look at the public available SAP Demo Gateway System ES4. You can sign up here and get started: https://archive.sap.com/documents/docs/DOC-40986
The ES4 system contains the demo service EPM_REF_APPS_PO_APV_SRV which is also available in your own SAP system, it is delivered with the SAP_BASIS 740 SP10 (SAPKB74010). The URL for the EPM_REF_APPS_PO_APV_SR in the public ES4 system is: https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/$metadata
Here, I have an overview about the entities and their properties, but this is a lot of text, and it is very hard to see the navigation properties between the different entities. One hint here: it is possible to right-click on the document → “Save Page as” → metadata.xml.
When you create a new SAPUI5 project with, for example, the SAP Fiori Master-Detail application – which needs an OData backend connection – the SAP Web IDE automatically creates this metadata.xml file for you.
OData Model Viewer
Previously, I would have used an external web tool like http://pragmatiqa.com/xodata/ to display information about the OData service in a graphical representation. Other ways would have been to display the metadata.xml file with Eclipse or Visual Studio, but now it is also possible to display this information with the SAP Web IDE. This is great, because I can stay in the same tool when developing SAPUI5 application and getting information about the OData service.
To activate this feature, we need to enable the OData Model Editor in the plugins of the SAP Web IDE. You need to click Preferences → Plugins and then activate the OData Model Editor and click Save at the bottom of the screen. The SAP Web IDE will then ask you to refresh with the activated plugin.
For the sake of simplicity, let’s use an SAPUI5 sample application and explore the metadata of the service. You can find the sample applications in the SAP Web IDE in the menu via File → New → Project from Sample Application.
Select the Approve Purchase Orders application and click Next at the bottom of the screen. Agree to the licence agreement on the next screen and click Finish.
You should now have a folder called nw.epm.refapps.ext.po-apv in your workspace. In the subfolder webapp/localService, you’ll find the metadata.xml file.
If you double-click the file, you will see a textual representation of the service as we have seen before:
But, if you look at the bottom, you can see two tabs labelled Source and Design:
If you don’t see those two tabs, then right click on the metadata.xml file and click Open With→ OData Model Editor. If you still don't see this option make sure you have reloaded the SAP Web IDE after you have activated the plugin.
If you click the Design tab, you’ll see a graphical representation of the OData service. You can easily see the relationship between the purchase order and the purchase order items. Also information about function imports and complex types are displayed.
If you click a property, additional information like the data type is displayed:
Conclusion
I think the OData Model Editor is a very handy – but not well known - plugin for the SAP Web IDE which helps me to get a quick overview about a service in a graphical representation.
You can find additional information in the document Using Graphical Viewer.
Link Collection
ES4 Demo Gateway
How to get access to the ES4 Demo Gateway System
https://archive.sap.com/documents/docs/DOC-31221
$metadata
Displaying the $metadata of EPM_REF_APPS_PO_APV_SRV in ES4
https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/$metadata
When using an OData service for SAPUI5 development, you need some information about the service like the contained entities, their navigation properties between each other and their properties. You need this information for data binding inside the SAPUI5 application so that you can display the correct/desired data. You can find this information about the service in the metadata of the OData service.
If you have access to the backend URL, you could easily add $metadata at the end of the service URL, but, depending on your browser, the information is more or less readable. My Safari on macOS Sierra just displayed a blank page… The best browser to view this information out-of-the-box is Microsoft Internet Explorer or Firefox.
Viewing metadata
Let’s have a quick look at the public available SAP Demo Gateway System ES4. You can sign up here and get started: https://archive.sap.com/documents/docs/DOC-40986
The ES4 system contains the demo service EPM_REF_APPS_PO_APV_SRV which is also available in your own SAP system, it is delivered with the SAP_BASIS 740 SP10 (SAPKB74010). The URL for the EPM_REF_APPS_PO_APV_SR in the public ES4 system is: https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/$metadata
Here, I have an overview about the entities and their properties, but this is a lot of text, and it is very hard to see the navigation properties between the different entities. One hint here: it is possible to right-click on the document → “Save Page as” → metadata.xml.
When you create a new SAPUI5 project with, for example, the SAP Fiori Master-Detail application – which needs an OData backend connection – the SAP Web IDE automatically creates this metadata.xml file for you.
OData Model Viewer
Previously, I would have used an external web tool like http://pragmatiqa.com/xodata/ to display information about the OData service in a graphical representation. Other ways would have been to display the metadata.xml file with Eclipse or Visual Studio, but now it is also possible to display this information with the SAP Web IDE. This is great, because I can stay in the same tool when developing SAPUI5 application and getting information about the OData service.
To activate this feature, we need to enable the OData Model Editor in the plugins of the SAP Web IDE. You need to click Preferences → Plugins and then activate the OData Model Editor and click Save at the bottom of the screen. The SAP Web IDE will then ask you to refresh with the activated plugin.
For the sake of simplicity, let’s use an SAPUI5 sample application and explore the metadata of the service. You can find the sample applications in the SAP Web IDE in the menu via File → New → Project from Sample Application.
Select the Approve Purchase Orders application and click Next at the bottom of the screen. Agree to the licence agreement on the next screen and click Finish.
You should now have a folder called nw.epm.refapps.ext.po-apv in your workspace. In the subfolder webapp/localService, you’ll find the metadata.xml file.
If you double-click the file, you will see a textual representation of the service as we have seen before:
But, if you look at the bottom, you can see two tabs labelled Source and Design:
If you don’t see those two tabs, then right click on the metadata.xml file and click Open With→ OData Model Editor. If you still don't see this option make sure you have reloaded the SAP Web IDE after you have activated the plugin.
If you click the Design tab, you’ll see a graphical representation of the OData service. You can easily see the relationship between the purchase order and the purchase order items. Also information about function imports and complex types are displayed.
If you click a property, additional information like the data type is displayed:
Conclusion
I think the OData Model Editor is a very handy – but not well known - plugin for the SAP Web IDE which helps me to get a quick overview about a service in a graphical representation.
You can find additional information in the document Using Graphical Viewer.
Link Collection
ES4 Demo Gateway
How to get access to the ES4 Demo Gateway System
https://archive.sap.com/documents/docs/DOC-31221
$metadata
Displaying the $metadata of EPM_REF_APPS_PO_APV_SRV in ES4
https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/$metadata
- SAP Managed Tags:
4 Comments
