SAP Inside Track Netherlands 2013. Building a Fiori like app. Building an app with SAPUI5 & SAP NetWeaver Gateway.

1. Let’s take that call!
The Calltaker / A Fiori-like app
Wim Snoep & Leo van Hengel
SAP Inside Track NL 2013

2. User is frustrated
Challenge

3. Create failure notification in SAP
Basis steps for creating a
notification in SAP PM
1. First step is to enter a reference
object
2. Enter coding or damage report
3. Fill a description
4. Extra information in long text
5. Optional entry if there is a
failure.
1
2
3
4
optional

4. Challenge
Bad User Interface design
How to design a better UI?

5. Solution
User in the center!

6. Ideal image creating a notification
• Quick access to information based on entered
address
– Enter postalcode and housenumber
– Based on housenumber search for a reference
object in SAP
– Display all open and in progress notifications
based on the found object via address search
– Display damage report for notifications and
history when these notifications were created

7. Prototype

8. Fiori or Custom Fiori-like
Architecture
Standard
Fiori apps
Custom Fiori
like apps
SAPUI5
SAP NetWeaver
Gateway
SAP Business
Suite

9. NetWeaver Gateway - Option A
Transaction ‘segw’ on gateway
system, map and build
services
Optionally use Eclipse oData
modeler and import data
For stack level reasons we
used option A.

10. NetWeaver Gateway - Option B
• IW_BEP add-on in
backend.
• Build via ABAP OO.
Only add the service
in gateway.

11. Demo

12. Let’s build a Fiori-like App with SAPUI5
It even gets better!

13. Cooking a Fiori-like app with blue
crystal (theme)

14. Best Practice for Building Mobile
Applications

15. Demo

16. SAPUI5 Open Source!