The Calltaker / A Fiori-like app

SAP Inside Track NL 2013

Wim Snoep & Leo van Hengel

Let’s take that call!

ChallengeUser is frustrated

I can’t find the ‘save’ button I did click. Nothing happens, why?

On which tab was the order number again? Why do I have to go through 10

screens to change the address

Create failure notification in SAPBasis steps for creating a

notification in SAP PM1. First step is to enter a reference

object2. Enter coding or damage report3. Fill a description4. Extra information in long text5. Optional entry if there is a

failure.

1

23

4

optional

Challenge

Bad User Interface design

How to design a better UI?

Solution

User in the center!

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

Prototype

Fiori or Custom Fiori-likeArchitecture

SAP NetWeaver Gateway

SAP Business Suite

SAPUI5

StandardFiori apps

Custom Fiori like apps

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.

NetWeaver Gateway - Option B

• IW_BEP add-on in backend.

• Build via ABAP OO. Only add the service in gateway.

Demo

Let’s build a Fiori-like App with SAPUI5

It even gets better!

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

Best Practice for Building Mobile Applications

Demo

SAPUI5 Open Source!