Basics Of Fiori Elements

Basics of Fiori elements Speaker’s Name, SAP Month 00, 2017 INTERNAL

Why Fiori Elements?

efficiency

DELETE DELETE DELETE DELETE

semantic information

DELETE DELETE DELETE DELETE DELETE DELETE DELETE DELETE DELETE DELETE DELETE DELETE DELETE DELETE remove DELETE DELETE DELETE DELETE DELETE

consistency © 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

2

SAP Fiori app UI development Flexibility vs. Development Efficiency with SAP Fiori elements

Freestyle SAP Fiori apps

SAP Fiori elements

Efficiency

Flexibility

Adaptation

Support

UX consistency

Maintenance

Code quality

# lines of code Re-use

© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

3

Fiori element 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 © 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

4

Fiori element OBJECT PAGE at a glance

“Collapsible header” Object header data with important information

Anchor navigation will open an object stream (collection of cards)

Global actions like edit or share

Analytical content in sections — Line chart — Bubble chart — Donut chart

Section with contacts information

*on selected devices © 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

5

Fiori element OVERVIEW PAGE at a glance A holistic view for a single business role’s core objects 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 © 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

6

Fiori element ANALYTICAL LIST PAGE at a glance 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 lineitem table)

*on selected devices © 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

7

Programming model for SAP Fiori Key steps and development tools

For standard UIs Fiori Elements generates the UI - no coding needed

01

02

03

Data Modelling

Expose OData service

Generate user interface

SAP Fiori functions Application

Backend Developer

Backend Developer

UI Developer

Role

ABAP in Eclipse

ABAP in Eclipse

Web IDE

Toolset

ABAP / CDS Sources

Gateway Services

UI5 Sources

Entities

© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

8

Example: Annotations for List Reports

© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

9

More information…

ABAP Programming Model for SAP Fiori SAPUI5: UI Development Toolkit for HTML5 Fiori elements wiki

© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ INTERNAL

10

Thank you. Contact information: Jocelyn Dart UX Strategist S/4HANA Regional Implementation Group – Asia Pacific Japan SAP Australia

Partner logo

© 2017 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. The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP 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 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, and they should not be relied upon in making purchasing decisions. 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. All other product and service names mentioned are the trademarks of their respective companies. See http://global.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.