Presentation for the dutch SAP user groups. More specific for the focusgroups: custom development and user experience. The presentation discuss the approach of extending a SAP Fiori app, or even better custom development of a new SAP Fiori-like app. And the simplicity screens can be adapted by using the SAP Web IDE.

1. Adapting & creating Fiori apps has never been easier
Leo van Hengel & Wim Snoep
Focusgroep CDV & UX

4. 10/31/2014 | 4 | ©2013 CIBER, Inc.
Adapting & creating Fiori apps has never been easier
•Wim Snoep
•Senior SAP NetWeaver consultant
•Background
₋User experience consultant
₋Portal / Mobile/ Fiori/ SAPUI5
•Leo van Hengel
•Senior SAP NetWeaver Consultant
•Background
–Portal consultant
–Fiori / SAPUI5
Introduction

5. 10/31/2014 | 5 | ©2013 CIBER, Inc.
Adapting & creating Fiori apps has never been easier
Why
User experience & importance
How
Mockups
Services
User interface
Test
Demo
Questions

6. 10/31/2014 | 6 | ©2013 CIBER, Inc.
Why?
Beautiful products have an attractive harmonic balance of all 3 dimensions
Create User experience (UX) with a high level of satisfaction (it must be fun and beautiful), but it also must provide a high level of productivity.

8. 10/31/2014 | 8 | ©2013 CIBER, Inc.
SAP Fiori
For example: timesheet

9. 10/31/2014 | 9 | ©2013 CIBER, Inc.
Different
Each customer is different. Processes and steps in majority are equal, but in details they are different.
Use cases for extending vary a lot..
•Other styling / branding
•Extra functionality : for example Confirm button
•Possibility to add notes
…..

10. 10/31/2014 | 10 | ©2013 CIBER, Inc.
Fiori apps are adaptable

11. 10/31/2014 | 11 | ©2013 CIBER, Inc.
SAP
Gateway
SAP Business
Suite
SAPUI5
Standard
Fiori apps
Custom Fiori like apps
SAPUI5
SAP
Gateway
SAP Business
Suite
SAP Fiori-like Application (transactional)

12. 10/31/2014 | 12 | ©2013 CIBER, Inc.
4 simple phases
Mockup
Build services
Build
Screens
Test
4 steps doesn’t mean it’s a long running process. This process also applies for adapting one screen, in a day.

13. 10/31/2014 | 13 | ©2013 CIBER, Inc.
4 simple phases
Mockup
Build services
Build
Screens
Test

14. 10/31/2014 | 14 | ©2013 CIBER, Inc.

15. 10/31/2014 | 15 | ©2013 CIBER, Inc.
Fiori Guidelines
http://experience.sap.com/wp-content/fiori-guidelines/index.html

16. 10/31/2014 | 16 | ©2013 CIBER, Inc.
5 Fiori guidelines
Role-based
Responsive
Simple
Coherent
Delightful

17. 10/31/2014 | 17 | ©2013 CIBER, Inc.
Role Based

18. 10/31/2014 | 18 | ©2013 CIBER, Inc.
Responsive

19. 10/31/2014 | 19 | ©2013 CIBER, Inc.
Simple
Focuses on the important.
•Make essential functions obvious and easy to use.
•Help me focus on what is most important.
•Automate what you can but ensure I am in control.
•Tell me how I am doing; give me feedback along the way.

20. 10/31/2014 | 20 | ©2013 CIBER, Inc.
Coherent
Provides on fluid, seamless experience.
•All apps speak the same language.
•Do the same thing in the same way everywhere.
•Leverage my digital content; make it seamless.
•Make the experience comfortable, familiar.

21. 10/31/2014 | 21 | ©2013 CIBER, Inc.
Delightful
Makes an emotional connection.
•Make me better at my job, let me feel like I’m an expert.
•Show me the impact of my contribution.
•Go beyond what’s expected; amaze me!
•Be smart and proactive. Give me an assistant, not just a tool.

22. 10/31/2014 | 22 | ©2013 CIBER, Inc.
Prototyping kit – Powerpoint deck

23. 10/31/2014 | 23 | ©2013 CIBER, Inc.
Prototyping kit - Example create form

24. 10/31/2014 | 24 | ©2013 CIBER, Inc.
Mockups

25. 10/31/2014 | 25 | ©2013 CIBER, Inc.
Services
Mockup
Build services
Build
Screens
Test

26. 10/31/2014 | 26 | ©2013 CIBER, Inc.
Adapt / build services
SAP Fiori Transact.App
SAPUI5
SAP
Gateway
SAP Business
Suite
SAP Fiori
Analytical App
SAPUI5
SAP
HANA XS Engine
SAP
HANA
Transactional
Analytical

27. 10/31/2014 | 27 | ©2013 CIBER, Inc.
Data

28. 10/31/2014 | 28 | ©2013 CIBER, Inc.
4 simple phases
Mockup
Build services
Build
Screens
Test

29. 10/31/2014 | 29 | ©2013 CIBER, Inc.
Adapt / build services
SAP Fiori App
SAPUI5
SAP
Gateway
SAP Business
Suite
SAP Fiori App
SAPUI5
SAP
HANA XS Engine
SAP
HANA
Transactional
Analytical

30. 10/31/2014 | 30 | ©2013 CIBER, Inc.
Adapt / build screen
According to mockup
• Adapting screen
₋ hide fields
₋ Extend and add extra user interface elements
• Load data of our adapted services
• Create new screens

31. 10/31/2014 | 31 | ©2013 CIBER, Inc.
SAP Web IDE

32. 10/31/2014 | 32 | ©2013 CIBER, Inc.
SAP Web IDE
Visually create or extend an Fiori application

33. 10/31/2014 | 33 | ©2013 CIBER, Inc.
SAP Web IDE

34. 10/31/2014 | 34 | ©2013 CIBER, Inc.
4 simple phases
Mockup
Build services
Build Screens
Test

35. 10/31/2014 | 35 | ©2013 CIBER, Inc.
Test!
Functionality Resolutions Responsiveness Browser Devices Performance ..

36. 10/31/2014 | 36 | ©2013 CIBER, Inc.
Demo

37. 10/31/2014 | 37 | ©2013 CIBER, Inc.
Take-aways
Adapting and creating Fiori apps has never been easier
•4 simple phases
•Design is key!
Make your users happy!

38. 10/31/2014 | 38 | ©2013 CIBER, Inc.
Questions?

39. Thank You!