Introduction of UI5 Boilerplate, a template for SAPUI5/OpenUI5 Apps. Explain modification / extensions to build a Fiori Edition of the UI5 Boilerplate, which can be integrated in the famous SAP Fiori Launchpad. Slides of session on sitFRA 2015 in Frankfurt/Germany on 21st of Mrach 2015.

1. Boilerplate – Fiori Edition, HP Seitz
UI5 Boilerplate - Fiori Edition
HP Seitz - @hpseitz

2. Boilerplate – Fiori Edition, HP Seitz
Experience as Software Engineer
Zilog Z80 CPU with 4 MHz, 8bit data bus, 64 KB RAM, ~0.5 MIPS, 640x200 pixel (27 colors),
3“ Disc (capacity 2x180 KB), Locomotive BASIC 1.1, CP/M 2.2, 1.870,- DM

3. Boilerplate – Fiori Edition, HP Seitz
UI5 Boilerplate
● Hosted on Github
● Articles on SCN,
mypro.de
● 6of5 Wiki Page
● Initially build with UI5
Version 1.16
Features
● App Template
● Mobile First (sap.m)
● Default File Structure
● Dynamic Navigation
https://github.com/6of5/UI5SplitApp-Boilerplatehttps://github.com/6of5/UI5SplitApp-Boilerplate

4. Boilerplate – Fiori Edition, HP Seitz
DEMO with SAP Web IDE

5. Boilerplate – Fiori Edition, HP Seitz
App vs. Fiori Lauchpad (FLP) App
● App is the Boss ● FLP is the Boss
Mulitple „Apps“ running within FLP → Rules necessary
App
Models
Views
Controllers
Resources
FLP
Component
Models
Views
Controllers
Resources
Component
Models
Views
Controllers
Resources
Component
Models
Views
Controllers
Resources

6. Boilerplate – Fiori Edition, HP Seitz
Fiori Launchpad Application
● Application is dynamically loaded by FLP
● FLP is a Single Page App (SPA)
Requirements for FLP Application:
● App needs to be a self-containing UI5 Component
● Use Event Bus of Component
● Do not use global Event Bus
● Do not use sap.ui.getCore() to register Models
● Do not define global Id's, let's UI5 generate such Id's
● Use only UI5 to manipulate location hash (navigation,
routing)
● … and more ..

7. Boilerplate – Fiori Edition, HP Seitz
Ok, let's do it!

8. Boilerplate – Fiori Edition, HP Seitz
EventBus
● Before
● after

9. Boilerplate – Fiori Edition, HP Seitz
Access of Resources
● before
● after

10. Boilerplate – Fiori Edition, HP Seitz
No global Id's
● before
● after

11. Boilerplate – Fiori Edition, HP Seitz
Questions?

12. Boilerplate – Fiori Edition, HP Seitz
UI5 Boilerplate Fiori Edition
● Final Code can be found
on GitHub
https://github.com/6of5/UI5-Boilerplate-Fiorihttps://github.com/6of5/UI5-Boilerplate-Fiori

13. Boilerplate – Fiori Edition, HP Seitz
HP Seitz
SAPUI5 / OpenUI5 / SAP Fiori UI Development
Twitter: @hpseitz
Blog: http://blog.mypro.de
SCN: http://scn.sap.com/people/hpseitz