SAP Cloud Platform Building Applications with SAP Cloud Platform and Fiori 2.0 Jeffrey Montone SAP 20 th July 2017
Legal disclaimer The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. This presentation is not subject to your license agreement or any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation and SAP's strategy and possible future developments, products and or platforms directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information in this document is not a commitment, promise or legal obligation to deliver any material, code or functionality. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP s willful misconduct or gross negligence. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions. 2
Agenda What is Fiori 2.0 Fiori Cloud Design Driven Development Adapt, Extend & Develop Fiori Apps Customer Case: Global manufacturer of construction equipment (UI) 3
What is Fiori 2.0? 4
UX: The Value of UX Monetary Value Gain Productivity, Data Quality Save Training Costs Decrease Change Requests, User Errors Human Value Increase User Satisfaction, Customer Loyalty, Solution Adoption Strengthen Relationship (IT and Business) 5
UX: One Size Does Not Fit All 6
Introducing SAP Fiori SAP Fiori is the new user experience (UX) for SAP software. It applies modern design principles for a reimagined user experience SAP Fiori UX is the new face of SAP to business users in all lines of business across devices It provides a personalized, responsive and simple experience on any device 7
Fiori Design Evolution Fiori 2.0 = UI5 1.40+ & Belize Theme 8
Fiori Design Principles ROLE-BASED ADAPTIVE COHERENT SIMPLE DELIGHTFUL Designed for you, your needs, and how you work Adapts to multiple use cases and devices Provides one fluid, intuitive experience Includes only what is necessary Makes an emotional connection SAP Fiori Design Principles 9
SAP Fiori from Principles to Design to Technology Principles Design Technology Visual Design Information Architecture Interaction Patterns User Interface Business Logic Fiori Style Guide (Web, ios) Fiori Qualities Prototyping Resources SAP BUILD SAPUI5 SDK * (Open Source OPENUI5, Fiori for ios SDK) *preferred technology (Other UI technologies can follow the Fiori Principles & Design) 10
Fiori 2.0 User Experience on Device My Insights and Actions tailored to My Role and My Device Me-Area Workspace DEMO Notifications Fiori 2.0 Welcome Pack 11
SAP Fiori Launchpad Role-based, personalized, real-time and contextual aggregation point to access business applications and analytics across functional areas and technologies Fiori Launchpad User Guide 12
Me Area The left area of the Viewport contains the Me Area Replaces the former User Menu from the top right corner Generic options: Access to App Finder, Settings Context specific: Edit Home Page (only on Home Page), App Settings (only on App with settings), About and Give Feedback (only on App) Recently used apps and searches (up to 30 entries, newest on top) 13
Notifications Notifications support the user in keeping track of important events without distracting them from their current tasks. Navigate to the source of the notification Act directly on individual notifications Act on multiple notifications at the same time 14
Overview Page The Overview Page aggregates domainspecific information Immediate insight on what needs attention Access the most important applications in the current business context Trigger quick actions or drill down to next level of detail Cards efficiently combine information and different visualizations e.g. charts, tables, lists Set filters for the whole page and save them as variants, to only show relevant information e.g. for an individual supplier 15
List Report The List Report allows users to filter and work with large amounts of data Easy to consume overview Choose from predefined variants Create own variants and ad-hoc queries Variable visualization Simple filtering for simple use cases, powerful filtering for complex use cases 16
Object Page The Object Page shows all facets of a single business object Successor of the (read-only) Factsheet Easy to consume overview Create, edit and view business objects Type of data determines visualization Rich data visualization and embedded analytics 17
Visual Design The New Belize Theme Belize is the successor to Blue Crystal Refined SAP Fiori visual language Clean and consistent layouts throughout the UI conveys the content with clarity Delightful details in micro interactions and typography for a richer SAP Fiori user experience Light flavor available today Dark flavor available today 18
Fiori Launchpad Central point of access to the system Web Dynpro Web GUI Personas 19
SAP Cloud Platform Fiori Cloud
Deployment and Consumption Options SAP Fiori (on premise) Manage and run SAP Fiori apps for SAP Business Suite in your own datacenter with full flexibility in installation, configuration and customization. SAP Fiori Cloud Quickly connect SAP-delivered Fiori cloud apps to SAP Business Suite (on premise). Leverage cloud services to extend, develop and mobilize SAP Fiori apps on SAP Cloud Platform. 21
SAP Fiori Front-end Server On Premise The SAP Fiori Front-end Server (FES) Runs on AS ABAP Provides the required technology stack for SAP Fiori Apps comprising: SAP User Interface Technology SAP Gateway Hub Components Can be deployed as HUB (Dedicated server, recommend for most scenarios) Embedded in backend Fiori 2.0 requires FES 3.0 (SAP_UI 7.51, which is UI5 1.44) 22
SAP Fiori Cloud Value Proposition SAP Fiori Cloud provides SAP S/4HANA and SAP Business Suite customers a simple approach to adopt the SAP Fiori user experience (UX) by leveraging SAP Fiori pre-packaged content and services in the cloud Enable a modern, intuitive user experience for SAP business processes (SAP S/4HANA & SAP Business Suite) with reduced cost and effort Combine SAP and non-sap business processes with a consistent UX Simplify on-premise landscape with efficient cloud services, enabling fast innovation cycles SAP Fiori UX SAP Cloud Platform Provide access to SAP business process from anywhere at anytime via a secured connectivity between on-premise to cloud SAP Business Suite SAP S/4HANA 23
SAP Fiori Cloud Today SAP Fiori Cloud comes with a hybrid landscape setup, where the Fiori frontend parts are provided on the cloud and connected to an SAP backend system (on premise). Main architectural decisions for customers to take are internal or external access mode and OData service provisioning. SAP Fiori 2.0 features like SAP CoPilot and Notifications and SAP Fiori Analytical & Factsheets Apps (KPI Tiles) or SAP S/4 Hana 1610 require on premise Gateway Hub or front-end server. 24
SAP Fiori Cloud Internal & External Access Point Scenarios 25
Use Cases Extended App Extended App Custom App Custom App Custom App Custom App Run Leverage SAP Fiori Cloud apps Extend Adapt SAP delivered apps and content to your needs Develop Build Fiori apps tailored to your business requirements 26
Fiori Cloud: Key UX & Integration Services SAP Fiori apps SAP Fiori launchpad UI theme designer Build SAP Web IDE OData Provisioning mobile service for SAP Fiori* 27
SAP Cloud Platform Design Driven Development
Extending UX starts with the Design-led Development Lifecycle Minimize total cost of development through evidence based design With a strong focus on user-centricity, the design-led development process guides and supports the product teams to deliver great user experiences. Avoid the high cost of bias and assumption by engaging with end user representatives at every stage. Prototype Ideate Validate Discover Design Deliver Scope 360º Research Synthesize Develop Test Deploy * Validate with your end users at EVERY stage! Define evidence based view of your user & their needs* Identify problem to solve* Design-led Development Process Simplify processes* Analyze data requirements* Prototype User Interface Changes* Finalize Technology Approach Enhance or Build Apps* Adjust Launchpad Design* 29
SAP s UX Services in SAP Cloud Platform Tooling and Services to support your Use Cases Prototype Ideate Validate Discover Design Deliver Scope 360º Research Synthesize Develop Test Deploy SAP BUILD Developer SAP Web IDE SAP Cloud Platform Portal Business Analyst SAP Cloud Platform SAP Cloud Platform services (mobile, IoT, Gamification, Collaboration) SAP Fiori Cloud SAP Fiori Mobile Hybrid, Web Hybrid, Web, Native 30
DISCOVER Evidence-based Understanding of your Audience Uncover Real Needs & Pain Points Discover Collect Evidence via End User Research E.g. Observe, Survey, Interview Synthesize Evidence to Refine Scope & Guide Design Persona Definition Points of View Validate with Your End Users & Stakeholders Gain buy-in from the beginning As a <business role> I need <capability> so that I can <responsibility>. OpenSAP Basics of Design Research Skill Up on Design and User Experience 31
DESIGN Focus Solutions on People Generate Ideas, Prototype, Get Feedback Design Generate Ideas Reference the Fiori Style Guide Prototype Apps Validate with End Users & Stakeholders Will the design work in practice Does the design meet needs & expectations Design for Non-Designers SAP BUILD Design for Designers Fiori Design Stencils OpenSAP BYO Fiori (2016) 32
SAP BUILD Prototyping and User Research for Everyone Design BUILD is a Cloud-based, open source, collaborative design tool that makes it easy for anyone to learn and apply design thinking principles to any IT project Create interactive prototypes without the need for development Incorporate user feedback prior to development. Lower UI development costs and increase end user satisfaction BUILD Learning Center Design for Non-Designers SAP BUILD 33
Map UX Design to UI Technology - Example Decision Path Use as-is, Adapt, Extend, or Build Deliver SAP Fiori App available? Perfect fit? Mobile necessary? Use out of the box Key User Adaptation enough? BYO with SAP Web IDE 1 Classic App available? Adapt UI with Key User Tools Extend with SAP Web IDE Perfect fit? BYO with SAP Web IDE BYO = Build your own Custom Fiori App = SAP Web IDE = SAPUI5 = SAP Screen Personas 3.0 SP4 minimum 1 SAP Fiori for ios as additional option for dedicated use cases; 2 For WDA apps also Floorplan Manager Use out of the box New SAPUI5 or Adapt with SAP Screen Personas 2 34
SAP Cloud Platform Adapt, Extend & Build Fiori Apps
The Big Picture of SAP Cloud Platform Development SAP Fiori apps Hybrid mobile apps SAPUI5 apps IoT apps Plugins & templates External services Hybrid App Toolkit SAP Gateway (OData services) Overview page SDK SAP Web IDE Data Sources SAP HANA Extended Application Service (OData services) Internet of Things REST services Git SAP Cloud Platform 36
SAP Web IDE Cloud-based Integrated Development tool for Extending and Building Fiori Apps Powerful, extensible, web-based integrated development tool that simplifies end-to-end application development Develop Test Build and deploy Extend apps 37
SAP Web IDE Key Use Cases Build SAP Fiori, SAP S/4HANA & SAPUI5 applications Leverage out of the box code templates based on SAP best practices Easily deploy to various SAP platforms Extend SAP Fiori applications Extend existing SAP Fiori applications via predefined extension points Use text editors and graphical tools Develop SAPUI5 hybrid mobile applications Create, test, build and deploy Apache Cordova hybrid mobile apps Leverage mobile services integration Develop IoT applications Jumpstart development with IoT-specific templates Use predefined SAPUI5 components targeted for IoT 38
SAP Web IDE Delivery Options SAP Web IDE powered by SAP Cloud Platform Zero installation, low administration Ubiquitous availability Biweekly updates Use cloud or on-premise data services Deploy to SAP Cloud Platform or onpremise ABAP systems Included with SAP Cloud Platform license SAP HANA Cloud Platform, Web IDE Develop Fiori/SAPUI5, hybrid mobile and IoT apps SAP Web IDE Personal Edition Single user (PC, Mac) Quarterly releases, download & install For offline development Not all features of Web IDE SAP Cloud Platform edition Use on-premise data services Deploy to local ABAP systems Included with SAP Cloud Platform license SAP Web IDE for SAP HANA Develop SAP HANA based applications Database modeling and development, Node.js and SAPUI5/Fiori apps Released with HANA SPSs Included in SAP HANA license Also available with the new SAP HANA Express Edition Trial & Production Trial & Production Trial & Production 39
SAP Web IDE at a glance Drag & drop tools, wizards and templates for creating/extending SAP Fiori/SAPUI5 apps Develop once, deploy everywhere and run on any device - mobile, tablet and desktop Collaborative development and project persistency Extensible architecture to add custom tools and templates Instant preview and mock data support Code editor optimized for SAPUI5 Hybrid mobile development Integration with various data sources 40
Building Your Own Fiori Apps Flexibility vs. Development Efficiency for Common Usage Patterns Freestyle SAP Fiori apps SAP Fiori Elements Flexibility Support Maintenance # lines of code Hybrid Design (Freestyle + Smart Controls) Adaptation UX consistency Code quality Re-use Efficiency 41
Fiori elements App Types Overview Page, List Report, Object Page Overview Page aggregates domain-specific information and offers quick actions List Reports allow users to filter and work with large amounts of data Object Page shows all facets of one business object SAP Best Practice S/4HANA Fiori Overview Pages (MAH) Fiori elements - How to develop a List Report 42
Development steps Build Your Own Fiori App using SAP Fiori elements The decisive step to a professional UI development efficiency Choose template Templates incorporate latest SAP Fiori design and UX. Select annotated OData service. Annotations are derived from CDS for reuse, productivity, and consistency. Run fully functional standard SAP Fiori app No frontend coding required Extensions are possible. SAPUI5 Flexibility for modification free adaptations* * Planned innovation 43
Build Your Own S/4HANA Fiori Apps - with full flexibility SAP UI development toolkit for HTML5 (SAPUI5) SAPUI5 is a JavaScript-based UI library designed to build cross-platform business applications. SAPUI5 UI Development Toolkit for HTML5 SDK 44
Application Best Practices Leverage Metadata driven UIs (Fiori Elements) when possible Hybrid freestyle application where Fiori Elements not possible One app one OData service Don t (re)build one large transaction A B A B D C C F C D E F E E X K F One large transaction Multiple role-based and simple apps but with redundant functionality and data access 45
Application Best Practices Think stateless, and avoid thinking of a stateful server Stateful backend Collaboration Device switch Continuous work Stateless backend 46
SAP Cloud Platform Customer Use Case
Customer Use Case - Global manufacturer of construction equipment Use Case: Custom UI5 applications Manage warehouse workforce & exceptions using a SAP Vehicle Insights (VI) and a Hana Sidecar 48
Customer Use Case: Fiori Launchpad 49
Customer Use Case: Performance Overview Hidden User Names 50
Customer Use Case: Performance Overview - Exceptions 51
Customer Use Case: Performance Exceptions By User Hidden User Names Hidden User Names 52
Lessons Learned What went right: Insight to action: Implemented a successful Fiori 2.0 application allowing managers to quickly improve performance and also recognize top performers Fiori 2.0 experience & standards despite custom What went wrong: Merging of data on UI: Data from on premise Hana and Cloud VI platform merged on UI resulting in additional development effort and higher maintainability effort. Proper architecture would have SCP application merge data and expose as single OData service 53
SAP Cloud Platform Customer Lessons Learned SAPUI5 Apps SAP Cloud Portal FLP Combine point-to-point data sources in a cloud application. REST \ODATA Applications on SAP Cloud Platform Provide integrated API for simplified consumption experience. REST \ODATA SAP Vehicle Insights SAP Hana XSC 54
Building Applications with SAP Cloud Platform and Fiori 2.0 Summary
Summary SAP Fiori is the new user experience (UX) for SAP software Fiori 2.0 brings an improved design and new capabilities for handling complex use cases Fiori Cloud allows you to quickly connect SAP-delivered Fiori cloud apps to SAP Business Suite (on premise) and to leverage cloud services to extend, develop and mobilize SAP Fiori apps on SAP Cloud Platform. Improving UX starts with the Design-led Development Lifecycle Web IDE is a powerful, extensible, web-based integrated development tool that simplifies endto-end application development 56
57
Thank you. Contact information: Jeffrey Montone (jeffrey.montone@sap.com) Global Center Of Expertise SAP America Inc.