On 21st of March 2015 the first SAP Inside Track Frankfurt (#sitFRA) took place. The event, nicely located and well organised by Hendrik Neumann, Christian Braukmüller and Tobias Trapp, was real fun.
Half of the session deal with good „old“ SAP ABAP technology based stuff, the other half with New-SAP topics like OpenUI5, SAPUI5, SAP Fiori and HANA Cloud Platform. A good mixture (have a look at the full agenda of sitFRA 2015) .
As I’m pregnant since a long time to modify the UI5 Boilerplate (UI5BP) so that it is SAP Fiori compliant and can be integrated into the famous SAP Fiori Launchpad, I took the chance to talk about this topic and modify the original UI5 Boilerplate in a live coding session and create a Fiori Edition. UI5 Boilerplate Fiori Edition was born.
UI5 Boilerplate – Fiori Edition
The original UI5BP targets a Single Page Application (SPA) scenario or the usage of UI5BP as web app in hybrid app scenario in combination with a native container like Apache Cordova, Adobe Phonegap or SAP Kapsel. The UI5BP aims to be as simple as possible, so no component, no shell, no routing. It is especially designed for UI5 newbies to have a running template with navigation, which is working on smartphone and tablets and is fast up and running (not more).
To be a Fiori or not to be
If the UI5BP wants to be „Fiori“ (sound a bit like a small cute bird) and part of the SAP Fiori Launchpad (FLP) it is dynamically loaded by the FLP. For such a scenario a few requirements have to be fulfilled so that no conflicts with other „Fiori’s“ are raised.
First of all to enable the dynamic loading the app needs to be a self-containing UI5 Component (sap.ui.core.UIComponent). So html files like index.html are only relevant while testing the Fiori App standalone. At runtime within FLP these files do not count, FLP will request the Component.js file as start.
As our Fiori App does not know what other Fiori Apps are in the game, any global stuff is strictly forbidden. Each App should work within his own area, which is defined by the Component and not do stuff, which could interfere with other Apps. To communicate with other Apps the FLP provide extra services, e.g. Cross-Navigation. So the main requirements for a Fiori are:
- App needs to be a self-containing UI5 Component
- Use EventBus of the Component, not the global EventBus
- Do not use sap.ui.getCore() to register Models
- Do not define gloabel Id’s, Id’s should be generate by UI5
- Use only UI5 to manipulate the location hash
- …. and more
For more details please have a look on the slides on Slideshare or directly at the source code of UI5BP Fiori Edtion on GitHub.
Sadly currently many of the so called Fiori App Templates within the SAP Web IDE (v1.9.3) in HANA Cloud Platform are still not fully Fiori compliant, they still use the global EventBus. Hopefully this will soon corrected by SAP.
Integration of UI5BP Fiori in SAP Fiori Launchpad
As a result of this modifications the UI5 Boilerplate can now be integrated in the SAP Fiori Launchpad:
You find step-by-step instructions in a dedicated article „Deploy UI5 Boilerplate on Fiori Launchpad of HANA Cloud Platform“ on SAP Community Network.
Have fun and Bembel with Care!
