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.
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
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.
Hooray! Two years ago, i requested the CacheBuster feature for the SAP Cloud Plattform (SCP) to be able to control users cache for UI5 apps and and on 2018-04-12 my wishes has been heard (or implemented). The SAP WebIDE Full Stack update news told me, that the grunt-sapui5-bestpractice-build plugin has been updated to version 1.3.50 with a new task for generation of the CacheBusterInfo.json file.
I tried out the new feature, but it took more time than expected. One issue has been, that the sap grunt script does not run correctly on linux and therefore our automated CI build process was not able to deliver everything as expected. The issue is reported here and confirmed by SAP.
Finally i thought it would be good, to have a working example and i started to create an example app. Doing this i realized, that maybe my whole developing workflow should be part of this project and the example started to grow.
Starting some years ago with UI5 and Eclipse as IDE, i liked the features of the SAP Web IDE, but to be honest, this tool was sometimes horrible slow and sometimes after the regularly 14days innovation updates, the plattform was not available for half a day. This was the time, were a collegue off mine started to shift his developments from Web IDE to PhpStorm, but with the focus to be compatible with the neo environment.
This was the birth of localneo, a node based proxy that handles routes from neo-app.json and allows local solving of destinations using a destinations.json file. From that time on, he was able to develop locally in his PhpStorm, having a local preview http server that handles /resources, odata destinations and everything else automatically.
Right now, most of my collegues are moving back to develop locally using the JetBrains IntelliJ Platform, at least the WebStorm for modern JavaScript Development. This is because the SAPUI5 plugins for eclipse has been deprecated and there is a much better support for all this new build tools like grunt, npm or nodejs and the git integration is very handy.
What does this mean for my daily work? I have projects depending on our custom PHP Framework using OpenUI5, then the regular SAP Fiori App development where apps are deployed on AS ABAP and cloud projects, where UI5 is deployed directly on the cloud. For some clients i am still developing on Web IDE, but this is mostly focused on easy access to the BackEnd using the destinations via CloudConnector. In all other cases, where i have direct access to the backend api (maybe using a VPN tunnel) i am using IntelliJ.
Do i still need SAP Web IDE? This depends on you scenario and environment! From my perspective, the answer is yes, because most innovations will first been seen in th Web IDE, especially in the templates and plugins. This are features, that sometimes are even not documented. While extending a Fiori App, i had to extend the existing oData service using the UI5 extension mechanism. But how to figure out the correct configuration inside manifest without debugging the SAP scaffold app. Luckily there was an wizard inside SAP Web IDE, that exactly does this for you. Also the whole UI5 extension mechanism is much more handy and useable using tools instead of doing this handcraftet. So the answer is, depending on your knowledge and your target platform or technology, SAP Web IDE will help you very much (maybe only for learning purposes). If it comes to custom control development or using Smart Elements (currently not supported by layout editor) the benefits has been gone.
Local UI5 development on SCP (Best Practise)
Even if i am developing for the SCP, i am still using my local development environment (PhpStorm) for stability, performance and modern development tools support.
PhpStorm with opened CacheBuster project
The CacheBuster template contains everthing, that is neccessary to do all this tasks locally. For further detailed information you should also have a look into the README.md file. The readme explains all the prerequisites that are needed to work with the tools. This blog should only demonstrate the workflow inside PhpStorm (similar in WebStorm) called IDE, that is used to develop apps.
If you have cloned the repo and opens the project inside IDE, you have to install the packages.json dependencies running npm install. If your IDE is configured using nodejs, that will be suggested automatically (also on updates on packages.json).
IDE package.json install/update
Test
During development, you generally need a http web server that serves your application and in most situations you need a backend system that is included using a proxy to get this api service inside the same uri of your webserver. On SCP this proxy setup is configured inside the neo-app.json file.
neo-app.json
The "/resources" section is pointing out to the used SAPUI5 version linked in your index.html file, referenced as src="../../resources/sap-ui-core.js". This is automatically resolved by the SCP using the project settings. You can select the most up-to-date sapui5 version or select a dedicated one like 1.52.9. This is useful, if your later deployed app is running onPremise AS ABAP and the system uses SAPUI5 1.52.9, so you can make sure you have the same environment like your server.
Another section is the one with the name "NorthwindOData". This one uses exactly the SCP connectivity destination with this name.
SCP Destination: NorthwindOData
To be able to mimik this behavior offline, my collegue #themasch has created a cool node based utility called "localneo". The localneo offers a web server, that delivers the core libary (sapui5 or openui5) under the "/resources" path and also handles destinations excatly the same way, SCP does. It reads the neo-app.json to get to know the service (proxy) endpoints (routes) and is controlled by a local file calles "destinations.json". This file setups localneo and also declares to destinations, because inside SCP they are not part of the project itself.
destinations.json
destinations.json
server
You can configure your host/port and open will automatically open the uri inside your default browser.
service
controlls using the most up-to-date sapui5 or openui5 from CDN or a hardcoded (maybe local) one.
destinations
the target paths for used destinations inside neo-app.json. You can declaratively use a hardcoded BasicAuth user/password.
Serve
The included serve task starts the localneo server using the configuration inside destinations.json. It can easily launched using the npm window (open by right click on packages.json and "Show npm Script").
npm task launcher window
or by using the top right runner bar
runner bar
The script start the local neo and opens youor default browser with the configured uri
serve task
Now you have a working and lightning fast (competed to SCP) webserver, that serves your web app by relative access to CDN UI5 version and also be able to access NorthwindOdata destinations the same way as done inside SAP Web IDE using SCP destination. Code changes will directly be reflecting after reloading the app in the browser.
Concerning CacheBuster, the app is currently not using the used/declared CacheBuster functionality, because this file is missing in the /webapp folder. Therefore the app false back to the generall behavior of loading it the classic approach. The needed CacheBusterInfo.json will be generated during build process.
Build
If you have successfully developed your app and tested it in the browser, you can use the build task to generate the productive version of your code.
The build process produces a new build output in the ./dist folder of your project that is ready and optimized for better performance in the productive environment. The following tasks are executed during the build:
Minification of .css files.
Minification of JavaScript files (minified files).
Copying of the original files to the dist folder with -dbg suffix added for debugging purposes.
Generation of the Component-preload.js and Component-preload-dbg.js preload files for the debug and minified files.
Minification of the preload file.
Generation of the CachebusterInfo.json file.
Generation of the changes-bundle.json file. The file contains a collection of all the changes that are made to an SAP Fiori element application and are located in the changes folder.
With localneo version 1.6.0 Mark added support for the relevant CacheBuster uri rewriting rules to be able to test the build inside browser. You only have to change the /webapp folder to /dist and localneo will serve the productive version of you app (see picture on top of blog). Since the build task jsut does some copying and uglifiying, this process is quite fast.
Deploy
If your builded app is running as expected, you maybe wants to deploy the application to the SCP. This can be done by using the deploy task. The task is using the MTA Archive Builder to produce an mtar (Multi Target Archive) configured via mta.yaml as html5 container and then deploying this file to the SCP using SAP Cloud Platform Neo Environment SDK. The tools are provided by SAP and needs to be copyied into the /ci/tools folder of the cachebuster project to be used.
CI tools
The archive builder is included in the "mta.jar" container (renamed after download from SAP One Support Launchpad). The Neo SDK needs to be copied to the folder "neo-java-web-sdk" (here i stripped off the whole package by deleting samples, etc.). Finally you have to enter your SCP account settings inside "deploy-mta.properties" to be able to deploy to SCP.
Continous Integration and Delivery (CI / CD)
As desribed in the CI Best Practices Guide – SAPUI5/SAP Fiori on SAP Cloud Platform, instead of doing this tasks manually, you can also push this tasks to a runner/pipeline. We are using gitlab and all this build / deploy stuff is done automatically after committing new sources. That means, i only need localneo for local development and testing and then i will commit my working changes to gitlab. Gitlab has a defined pipeline using a clean docker image with linux environment to build the app and deploy to SCP or AS ABAP or our open source based PHP runtime. This makes it even possible for small changes/fixes to directly do this changes inside gitlabs browser based code editor and commit it to reflect changes directly on dev system (this is useful maybe if customer wants to do changes in i18n files, which automatically leads to an build/deploy process for the dev system landscape.
Special Thanks
To be able to do everthing as described in my blog, special thanks goes to:
Mark #themasch Schmale (for providing the incredible localneo)
Peter Müssig (for bringing async support to CacheBuster)
All the guys working on SAP CI tools like Wolfram Kramer, Alex, #avizov
Gregor Wolf for pushing CI especially for onPremise ABAP
Resumee
This can be seen as my private best practise guide on developing UI5 on SCP and maybe you are using other tools and techniques. For developers, who are looking for an alternative approach to SAP Web IDE but still beeing compatible, if team members still use it, this is maybe the approach of yout choice. This project with the included setups can be a time saver. Finally, maybe you only want to use the localneo (if you wants to be compatible with neo environment).
You definitely should also have a look into the brand new ui5-tooling project, which will bring you building functionality like Standalone App, but currently not every part is available in public repos.
During my development for the upcomming "Arcade Player", i was initially using a core:html control with an iframe pointing to the video source. This solution was a little bit inadequate, because changing the videoId always reloaded the YouTube wrapping api script.
So i decided to write a custom UI5 control to be more flexible.
Currently, not every function and event is propagated to UI5, but i think you will get the point and be able to extend it concerning your additional needs.
In the last time, i spent some time working on my virtual pinball cabinet and also on my retropie software version for an upcomming hardware bartop cabinet (hopefully).
Playing around with my database, i thought it would be nice to have a nice ui to view game logo, marquees and intro videos directly in the browser. There a a lot of great retro arcade databases out there but most of them lack in a nice ui combining this info.
Arcade Database
Currently, i ran into a lack of time so this piece of code is not fully coded into the last detail. It is also addressed for browser usage, because i need more time to figure out a nice way of adapting video player responsively with outer cabinet image to resize aspect correct on all levels. Therefore this version hardly forces a fixed outer frame, but you will get the idea.
Highlights
app using local json model
dynamically loading of game logos
favorite filter toggle
dynamically loading arcade marquee and youtube demo video of selected games
