This short presentation was held on UI5con in June 2017 at SAP SE in St. Leon-Rot. It explained roughly how to implement a custom tile for Fiori cloud (SAP FIori Launchpad at SAP cloud platform) using the Portal service. The code is available in github: https://github.com/heynest/fiori-launchpad-custom-tile

1. Stephan Heyne, Senior Developer, SAP SE
June 30, 2017
Implementing
Custom Tiles for
SAP Fiori Launchpad

2. What is a tile?

3. 3
Implementing Custom Tiles for SAP Fiori Launchpad
What is a tile?
Tiles are no mini-visualization of apps
but separate mini-apps!
≠

4. 4
Implementing Custom Tiles for SAP Fiori Launchpad
What is a tile?
A tile in SAP Fiori Launchpad may start:
an arbitrary URL like
https://www.sap.com/a (Fiori) app
nothing at all
(stand-alone tile)

5. Custom tile dev today

6. 6
Different ways to implement on different Fiori Stacks
 Fiori @ SAP Cloud Platform
– As sap.ui.core.UIComponent possible
– Dynamic tile properties available via getComponentData()
– Configuration in Fiori Configuration Cockpit (Portal Service)
▫ Some app properties need to be configured (redundantly)
to be available for the tile
▫ Tile needs an app to be configured (even stand-alone tiles)
 Fiori @ ABAP
– As sap.ui.core.UIComponent possible
– Dynamic tile properties need to be read via legacy CHIP API
– CHIP Definition XML is required for registration in ABAP Frontend Server
– Configuration in Fiori Launchpad Designer
▫ Design time UI needs to be implemented (chip.configurationUi)
Implementing Custom Tiles for SAP Fiori Launchpad
Custom tile dev today
Live Demo

7. 7
Code is available on Github
https://github.com/heynest/fiori-launchpad-custom-tile
Best Practices
 Use sap.ui.core.UIComponent instead of stand-alone views
 Use sap.m.GenericTile to ensure Fiori guild line compliance
 Encapsulate access to getComponentData() in a central place
 Launch only one app per tile
– As tiles are filtered if the app is not assigned
– Multi arbitrary URLs are not an issue
 Avoid routing within tiles
Supported tile sizes
 1x1
 1x2
Implementing Custom Tiles for SAP Fiori Launchpad
Custom tile dev today

8. Custom tile dev in the future

9. 9
Implementing Custom Tiles for SAP Fiori Launchpad
Custom tile dev in the Future
One implementation is running on all Fiori Stacks
 As UIComponent only!
 App Descriptor (manifest.json) is required
 Dynamic tile properties available via getComponentData()
– Different structure but more app properties automatically propagated
 Special tile handlers can/must be implemented (e.g. is tile visible)
 Configuration in Fiori Configuration Cockpit (Portal Service)
– Tile can exist stand-alone

10. Questions and Answers

11. Thank you.
Contact information:
Stephan Heyne
stephan.heyne@sap.com
You are welcome to give feedback for this session
in the UI5con Event App