UX125 SAP Fiori Elements Public
Speakers Las Vegas, Sept 19-23 Jan Ruessel Bangalore, October 5-7 Suneet Agarwal Barcelona, Nov 8-10 Jan Ruessel 2
Disclaimer The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. Except for your obligation to protect confidential information, 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 presentation or any related document, or to develop or release any functionality mentioned therein. This presentation, or any related document 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 presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality. This presentation 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 presentation is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this presentation, except if such damages were caused by SAP s intentional 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. 3
Agenda What are SAP Fiori elements? SAP Fiori elements outlook SAP Fiori elements technology SAP Fiori elements development SAP Fiori elements enablement info 4
What are SAP Fiori elements? Public
SAP Fiori elements Smart templates becomes SAP Fiori elements SAP Fiori elements has the same meaning as smart templates Examples of SAP Fiori elements are list report, object page, overview page 6
SAP Fiori elements New design and interaction patterns for SAP Fiori UX List report Object page Overview page Consistent UX across business processes Rapid SAP Fiori app development Improved SAP Fiori app maintenance Adaptation via SAPUI5 flexibility and extensibility 7
SAP Fiori elements available today List report Object page Overview page 8
Introducing SAP Fiori overview page Support for a specific domain/role through Cards with different application content The overview page is a data-driven SAP Fiori app providing all the information a domain/role have to overlook in a single page. Via cards a user can view, filter and react easily through content from different applications. The overview page organizes and displays an amount of filterable data to provide an introductory-level view of content on one glance. 9
Overview page at a glance Header of the overview page with a collapsible filter bar Easy scan layout Cards are ordered in columns Stack card will open an object stream (collection of cards) Bar chart list card Table card with multiple columns List card Analytical cards Line chart Bubble chart Donut chart *on selected devices 10
List report at a glance Smart filter bar including search fields with value helps Break-outs for custom fields in smart filter bar Personalization and configuration of search fields and columns Actions for one or multiple line items Indicator support status progress rating *on selected devices 11
Object Page at a glance Collapsible header Object header data with important information Global actions like edit or share Anchor navigation will open an object stream (collection of cards) Analytical content in sections Line chart Bubble chart Donut chart Section with contacts information *on selected devices 12
SAP Fiori elements outlook Public
Flexible screen layout Planned Innovations The flexible screen layout is a new method of displaying multiple floorplans side by side on a single page. It consists out of changeable layouts in which up to three different floorplans can be shown next to each other. The flexible screen layout offers a seamless User Experience with the possibility to see more, but stay focused on relevant details. 14
Flexible screen layout Planned Innovations The efficient usage of the available screen size as well as an easy to use interface are two of the major benefits offered by the new flexible screen layout. 15
Introducing analytical list page Powerful and flexible floorplan for lightweight and advanced data analysis Planned Innovations SAP Fiori analytical list report embeds analytical content and capabilities into the natural work environment of a business user. It enables the user to predict and to recognize the impact of his actions. 16
Analytical list page at a glance Planned Innovations Variant switch with display option for global KPIs Actions, filter dialogue and filter type-switch Visual filters Breadcrumb navigation showing analysis path Toolbar with view switch for chart/table view Interactive chart area (for analysis and controlling the line-item table) *on selected devices 17
SAP Fiori elements technology Public
Re-engineered development experience with SAP Fiori elements SAP Fiori app based on SAP Fiori elements SAP Fiori app based on freestyle templates SAP Fiori app freestyle SAP Web IDE 19
Re-engineered development experience with SAP Fiori elements SAP Fiori app based on SAP Fiori elements Generic app structure Adaptation capabilities Generic UI for recurring interaction patterns SAP Fiori app based on freestyle templates Predefined app project structure List report Object page Overview page model / view / controllers translation navigation SAPUI5 flexibility Extensibility with code breakouts Development required Search, filter, links Actions Tables Forms Development required CDS views including UI annotations or OData service & UI annotations in SAP Web IDE SAP Fiori app freestyle Free design & development in using SAPUI5 controls SAP Web IDE 20
SAP Fiori app UI development Flexibility vs. development efficiency with SAP Fiori elements Freestyle SAP Fiori apps SAP Fiori elements Flexibility Support Maintenance # lines of code Re-use Efficiency Adaptation UX consistency Code quality 21
SAP Fiori elements explained SAP Fiori app SAP Fiori floorplans SAP Fiori elements Overview page Analytical list page List report Object page Analytical list page OData + UI annotations G a t e w a y C D S D a t a b a s e Backend Smart controls Smart controls Smart controls Controls 22
Fiori elements architecture UI tier Contains view template & controller logic Evaluates annotations at runtime SAP Fiori application (with SAP Fiori elements) Consists of data & merged annotations from S and (optional) A OData model OData HTML Application tier Global scope Gateway S OData http UI integration tier Local app scope http http App View Application-specific views A.xml.js ABAP dev. tools View CDS View Shared data model incl. annotations across all applications Annotations SAP Web IDE Database tier Table Table Table 23
SAP Fiori terminology connecting the dots SAPUI5 control SAPUI5 smart control SAP Fiori app OData service Metadata Service UI annotations Application infrastructure 24
SAP Fiori terminology connecting the dots SAPUI5 control SAPUI5 smart control Master detail pattern Worklist pattern SAP Web IDE freestyle templates SAP Fiori app OData service Metadata Service UI annotations Application infrastructure 25
Terminology 101 for Fiori app development New interaction patterns based on user needs SAP Fiori floorplans SAPUI5 control SAPUI5 smart control Overview page Object page Master detail pattern Worklist pattern SAP Web IDE freestyle templates SAP Fiori app SAP Fiori elements List report Analytical list page OData service Wizard Comparison view Metadata Service UI Annotations Application infrastructure 26
SAP Fiori elements development Public
Applying SAP Fiori elements 1 Data model 2 Composition Backend developers UI developer Create the data models for the applications. Compose the SAP Fiori app by combining the templates with the data Define the semantics of the data: Data types, information structure, relations Fine-tune the UI by configuration and freestyle development where needed. Templates Joint designer & developer team Create templates for commonly used page types, layouts and compositions 28
Frontend development steps. Coding optional 1 2 3 4 29
SAP Fiori elements why is it smart? Annotations describe semantics related to data (examples see next slide) Smartness of controls and templates is based on the understanding of these semantics. Annotations are evaluated in the client controller logic Development steps Choose template Select annotated OData service. Run fully functional standard SAP Fiori application Templates incorporate latest SAP Fiori design and UX Annotations are derived from CDS for reuse, productivity and consistency No front end coding required. Extension via additional annotations or own templates 30
Fiori elements semantic information Label for field Selection fields Link to value list Amount linked to currency Code field linked to text field Line item fields 31
Fiori elements: Annotations in CDS define view Product { @UI: { lineitem: {position: 30, importance: #HIGH}, selectionfield: {position: 20}, } @Semantics.amount.currencyCode: 'Currency' Price, @ObjectModel: { mandatory: true, foreignkey.association: '_Currency' } @Semantics.currencyCode: true Currency, } Line item field Selection field Amount linked to currency Field control Link to value list Field semantics 32
SAP Fiori elements enablement info Public
Further information Related SAP TechEd sessions: UX165: Hands-On workshop to build Fiori apps with Fiori elements DEV109: Lecture to learn the ABAP Programming Model in SAP S/4HANA DEV212: Lecture on building an End-to-End SAP Fiori App Based on SAP S/4HANA and ABAP SAP Public Web LINK to a simple end to end example LINK to documentation on CDS modelling and UI annotations LINK to documentation for Fiori elements development SAP Education and Certification Opportunities www.sap.com/education Watch SAP TechEd Online www.sapteched.com/online 34
SAP TechEd Online Continue your SAP TechEd education after the event! Access replays of Keynotes Demo Jam SAP TechEd live interviews Select lecture sessions Hands-on sessions 35
Feedback Please complete your session evaluation for UX125 Contact information: Jan Ruessel UX & SAP Fiori Product Management jan.ruessel@sap.com 36
2016 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. In particular, SAP SE or its affiliated companies have 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 SE s or its affiliated companies strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies 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. All forwardlooking 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. 37