ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier
DESCRIPTION
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.TRANSCRIPT
![Page 1: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/1.jpg)
Adapting & creating Fiori apps has never been easier
Leo van Hengel & Wim Snoep
Focusgroep CDV & UX
![Page 2: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/2.jpg)
![Page 3: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/3.jpg)
![Page 4: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/4.jpg)
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
![Page 5: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/5.jpg)
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
![Page 6: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/6.jpg)
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.
![Page 7: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/7.jpg)
![Page 8: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/8.jpg)
10/31/2014 | 8 | ©2013 CIBER, Inc.
SAP Fiori For example: timesheet
![Page 9: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/9.jpg)
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
…..
![Page 10: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/10.jpg)
10/31/2014 | 10 | ©2013 CIBER, Inc.
Fiori apps are adaptable
![Page 11: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/11.jpg)
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)
![Page 12: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/12.jpg)
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.
![Page 13: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/13.jpg)
10/31/2014 | 13 | ©2013 CIBER, Inc.
4 simple phases
Mockup
Build services
Build Screens
Test
![Page 14: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/14.jpg)
10/31/2014 | 14 | ©2013 CIBER, Inc.
![Page 15: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/15.jpg)
10/31/2014 | 15 | ©2013 CIBER, Inc.
Fiori Guidelines
http://experience.sap.com/wp-content/fiori-guidelines/index.html
![Page 16: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/16.jpg)
10/31/2014 | 16 | ©2013 CIBER, Inc.
5 Fiori guidelines
Role-based
Responsive
Simple
Coherent
Delightful
![Page 17: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/17.jpg)
10/31/2014 | 17 | ©2013 CIBER, Inc.
Role Based
![Page 18: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/18.jpg)
10/31/2014 | 18 | ©2013 CIBER, Inc.
Responsive
![Page 19: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/19.jpg)
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.
![Page 20: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/20.jpg)
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.
![Page 21: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/21.jpg)
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.
![Page 22: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/22.jpg)
10/31/2014 | 22 | ©2013 CIBER, Inc.
Prototyping kit – Powerpoint deck
![Page 23: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/23.jpg)
10/31/2014 | 23 | ©2013 CIBER, Inc.
Prototyping kit - Example create form
![Page 24: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/24.jpg)
10/31/2014 | 24 | ©2013 CIBER, Inc.
Mockups
![Page 25: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/25.jpg)
10/31/2014 | 25 | ©2013 CIBER, Inc.
Services
Mockup Build
services Build
Screens Test
![Page 26: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/26.jpg)
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
![Page 27: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/27.jpg)
10/31/2014 | 27 | ©2013 CIBER, Inc.
Data
![Page 28: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/28.jpg)
10/31/2014 | 28 | ©2013 CIBER, Inc.
4 simple phases
Mockup Build
services Build
Screens Test
![Page 29: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/29.jpg)
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
![Page 30: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/30.jpg)
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
![Page 31: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/31.jpg)
10/31/2014 | 31 | ©2013 CIBER, Inc.
SAP Web IDE
![Page 32: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/32.jpg)
10/31/2014 | 32 | ©2013 CIBER, Inc.
SAP Web IDE
Visually create or extend an Fiori application
![Page 33: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/33.jpg)
10/31/2014 | 33 | ©2013 CIBER, Inc.
SAP Web IDE
![Page 34: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/34.jpg)
10/31/2014 | 34 | ©2013 CIBER, Inc.
4 simple phases
Mockup Build
services Build
Screens Test
![Page 35: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/35.jpg)
10/31/2014 | 35 | ©2013 CIBER, Inc.
Test!
Functionality Resolutions Responsiveness Browser Devices Performance ..
![Page 36: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/36.jpg)
10/31/2014 | 36 | ©2013 CIBER, Inc.
Demo
![Page 37: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/37.jpg)
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!
![Page 38: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/38.jpg)
10/31/2014 | 38 | ©2013 CIBER, Inc.
Questions?
![Page 39: Ciber vnsg ux - cdv - fiori - adapting and creating fiori apps has never been easier](https://reader030.vdocuments.us/reader030/viewer/2022020218/557d60aed8b42ae1438b500b/html5/thumbnails/39.jpg)
Thank You!