Friday, December 1, 2017

OData Explorer

If you are working with UI5 and OData in general, you will quickly figure out the benefits of the OData v2 Model, especially if you have an existing OData service in the backend, UI5 makes it quite easy to bind a widget directly against the data including sorting, limiting, filtering, etc.

SAP itself is heavily focusing on OData as the prefered service layer, to offer services with the possibility to use metadata driven, autogenerated user interfaces.

The nice thing about an odata service is, that it describes himself with the containing metadata information, if you add $metadata as a parameter to the service url.

To make this information more readable, i created the OData Explorer to visualize the content of the odata metadata information.

OData Explorer





Highlights

  • app to explorer a given OData v2 service
  • demo HCP destination pointing out to northwind example service
  • included coding to add service browser for SAP Gateways using /sap/opu/odata/iwfnd/catalogservice/
  • some css fixes for token (avoid clipping in Tablet, float)

This app is quite useful, if you are working with Fiori Elements like SmartFields, etc. that extremely makes use of semantic annotations like labels. Therefore i deploy this app on the HCP of most of my customers to easily discover existing SAP Gateway services even without the need to logon to the SAP system itself.

If you have a destination from your HCP pointing out to /sap/opu/iwfnd/catalogservice and also activated the catalog service, the OData Explorer allows to select any of the services and dynamically load the corresponding metadata.

Since i negotiated the visualisation, expecting that most properties are generally allowed and the app only show icons, if a feature is not allowed, this makes it visually quicker understandable than to watch the $metadata sap:createable:true/false for example.

SAP Service Browser

If you will use the app to explorer services on an SAP Gateway, you can enable the service catalog to discover and search for all existing services. The selected service will be loaded automatically. To enable this feature you have to
  • inside the manifest.json copy the xmodel/catalog model to the existing model section and delete xmodel (preload: false currently does not work, maybe a bug)
  • inside the Metadata.controller.js set property "_bUseCatalogService: true" to true to show service selector instead of using demo service

Source is located in the github repository.