Sunday, March 11, 2018

OData Visualizer

While writing my former blog OData Explorer, i always had in mind to be able to visualize the OData Model and be able to export it for including into customer documentations.

And now, i found a first solution, that fits my needs.

OData Explorer - Visualizer

The new Visualizer is integrated into the OData Explorer.

For the impatient, launch the explorer and get your hands on the visualizer.

It is based on the sapui5 Network Graph, so it is not really an OpenUI5 widget because it needs SAPUI5. But as always, borders are fluid ;-)

The network graph is available since 1.50 and still has some layout issues, but is currently useable to render graphs as inline SVG images. After investigating this control, i figured out, that it will fit my needs to render a parent/child graph of odata dependencies.

I copied all the options from the sample to be able to play around with the options of the control. This is not only for fun, because all the options will be rendered into the exported graph also.

Sadly, the control currently does not support out-of-the-box export options, so after some research i figured out a working solution by myself.

In short, the solution clones the SVG while including all referenced external styles as inline styles and serializes it for download.

The export to PNG option uses the same approach, but internaly creates a canvas to render/draw the SVG and then using canvas.toDataURL to convert it into PNG while converting the Base64 into Blob.

Both approaches uses sap.ui.core.util.File to allow locally saving of file data.

Here is an example of the generated model for the used Northwind demo service.

Northwind OData v2 service

Have fun...

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


  • 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.

Wednesday, August 2, 2017

SAP Fiori Client (Part II)

Some years ago i wrote a blog SAP Fiori Client pointing out the possibilities of running an UI5 app inside the SAP Fiori Client application.

In the meantime, there is an update on the documentation available here!

I have created a playground to make it easier to see the benefits in real life.
The following demo is hosted on my trial hcp account.

Fiori Client Demo

To be able too see all the goodies, link you SAP Fiori Client to the following URI:

You can easily use a QR code to configure the Fiori URL (new with version 1.8) .

Demo App URL

Maybe this makes it easier for you to start using the SAP Fiori Client.


  • demo how to use native device features inside the SAP Fiori Client
  • detection of client inside bootstrap
  • custom QRCode control to render FioriURL for easy setup
  • Plugin examples for:
    • Attachment Viewer
    • Barcode Scanner
    • Calendar
    • Camera
    • Contacts
    • Geolocation
    • InAppBrowser
    • Printer
    • Voice Recording

Source is located in the github repository.

Wednesday, July 5, 2017

New UI5 Logo Experience

Last week i have been visiting the first UI5con offered by SAP.

Besides socializing and all the great news one aspect has been, that some renovations on the way to evolution has taken place by changing the UI5 logo.

New UI5 Logo

We learned to know, that the original library was internally called phoenix and that is the reason, why they used a phoenix as the logo.

Now since everything is growing up and there is maybe the time for some renovation by Teodora Angelova

UI5 Logo UX Redesign Process

The final result can be seen in the upcomming OpenUI5 SDK, which is public available in the nightly build SDK.

OpenUI5 Nightly Build SDK

Personally i love this kind of UX especially if there is a story behind it.

Thursday, May 4, 2017


OpenUI5 contains a lot of cool and useful controls, but when it comes to a need of ordering or rearanging some data, there is no out-of-the-box support.

After some googling, i figured out that the internal used jQuery UI library contains something cool called Sortable.

It contains everything you need and the best thing is, that the needed resources are still part of the UI5 framework hidden inside the package "sap/ui/thirdparty/jqueryui/jquery-ui-sortable".

SortableList Demo

Gotcha, but sadly jQuery only support desktop events and therefore the functionality does not work on touch based devices ;-(

Luckily i figured out jQuery UI Touch Punch that enables Touch Event Support for jQuery UI without additional needs.

So besides all the blogs that i have read, this is the first working demo that supports both device types.

On touch devices, i also added a swipe delete action for demonstration purposes, because this coding is part of my karafun karaoke playlist app to manage the singers song list.


  • demo how to use jquery-ui-sortable with div elements on top of sap.m.List
  • adding touch support using touch-punch
  • adding nice css shadow and transparency effect while dragging

Source is located in the github repository.

Friday, March 31, 2017


Again it is demo time.

Playing around with some libs i discovered ScrollReveal.

It is a small library for easy scroll animations for web and mobile browsers.

So maybe give it a try (best viewed on small devices like phones ;-)

ScrolReveal Demo


  • custom control to extend sap.m.List
  • support of binding and growing by resyncing dom elements
  • using JSON model initialized inside manifest.json

Source is located in the github repository.

Sunday, March 12, 2017


I am not that fellow Old West fan (maybe a little one) and it is not High Noon.

Showdown is not a gun battle, instead it is a JavaScript Markdown to HTML converter that can be used server side (nodejs) and client side (browser).

My little UI5 control wrapper should be seen as a starting point for your own implementation, because i also added the prettify extension to highlight code (css, js, etc.) and remotely load content using ajax.

Showdown Demo

Source is located in the github repository.