SAP Fiori Elements

SAP Fiori ElementsWebinar, 25.9.2020, 10:00 Uhr

SAP Fiori Elements

◦ Einleitung (Föß)

◦ Fiori History (Sören)

◦ Evolution von OData Modell (Sören)

◦ CAP (Domi)

◦ Fiori Elements (Föß)

Demo 1 – List Report CDS View -> Visual Code Studio

◦ IDEs (Domi)

Demo 2 – WebIDE Generierung

◦ SAP Fiori Tools (Föß)

Demo 3 – Fiori Tools – Excel Button

◦ SAPUI5 Flexibilty (Föß)

◦ Erweiterungsmöglichkeiten (Domi)

SAP Fiori ElementsSören

Sören SchlegelManaging Consultant at CONSILIO

eMail: soeren.schlegel@consilio-gmbh.deTwitter: @SoSchlegel87

Themenschwerpunkte

• Konzeption & Management von Entwicklungsprojekten• SAP Architektur moderner Anwendungen• SAP Change Management and S/4HANA• SAP CDS, oData und Cloud

SAP Fiori ElementsFöß

Johann FößleitnerSenior Consultant at Cadaxo

eMail: johann.foessleitner@cadaxo.comTwitter: @foessleitnerj

Themenschwerpunkte

• Konzeption & Management von Entwicklungsprojekten• Qualitymanagement & Performanceoptimierung• Clean Code• S/4HANA Custom Development

• SAP Champion

SAP Fiori ElementsDomi

Domi BiglSenior Consultant at Cadaxo

eMail: dominik.bigl@cadaxo.comTwitter: @DomiBiglSAP

Themenschwerpunkte

• Konzeption & Management von Entwicklungsprojekten• Qualitymanagement & Performanceoptimierung• ABAP Units• SAP Fiori, SAP UI5

SAP Fiori ElementsSAP Online Track 2020 – Munich & Vienna

SAP Online Track Munich & Vienna◦ 2 Termine

Donnerstag, 22. Oktober 17:30 – 21:30

Donnerstag, 29. Oktober 14:00 – 18:00

https://wiki.scn.sap.com/wiki/display/events/SAP+Online+Track+Munich+and+Vienna+2020

Twitter Hashtag: #sotMUCVIE und #SAPOnlineTrackMUCVIE

SAP Fiori Elements

HistoryUI5, Fiori

SAP Fiori ElementsHistory of Fiori und UI5

2009 – SAP UI5 startet als „Project Phoenix“

2011 – SAP UI5 @TechEd

2013 – SAP Fiori (als Produkt – mit 25 Apps)

•Basiert auf SAP UI5

•Fiori Launchpage (Vorgänger des Launchpads)

•Damals kosteten die OData-Calls in SAP Gateway noch Geld!

2014 – Fiori Launchpad

2015 – Fiori UX Guidelines

2016 – Fiori Harmonization and SAP Fiori 2.0 with SAP Belize

•Beginn Partnerschaft Apple

•SAP Fiori for iOS

2017 – SAP Fiori Apps „für jedermann“

•Bis dahin konnten Kunden nur „Fiori-like“ Apps bauen

2018 – SAP Web Components

2019 – SAP Fiori 3.0

SAP Fiori Elements

SAP Fiori ElementsWas ist OData?

Was ist OData?

„SQL für REST“

„Wieder irgend ein

komisches Protokoll von der SAP“

• HTTP-basiertes Protokoll• Baut auf ODBC und JDBC auf

• Beschrieben durch Metadaten-Dokument• EDM: Entity Data Model

SAP Fiori ElementsWas ist OData?

Annotations

Metadaten

SAP Fiori Elements

OData & ABAP

SAP Fiori ElementsOData Development - Overview

ABAP 7.0

Manual implementation ofMPC and DPC

Annotations:

- Vocabulary- MPC_EXT

ABAP 7.4 ABAP 7.5

Logic:- Everything: Manual!

ABAP Platform 1808 (7.53)

SAP Fiori ElementsFreestyle OData

ABAP 7.0

Annotations:

ABAP 7.4 ABAP 7.5

Usage of SADL(Service Adaption

Description Language)

Annotations:

Logic:- Query + READ: SADL- CUD: Manual

SAP Fiori ElementsOData with SADL

ABAP 7.0

Annotations:

ABAP 7.4 ABAP 7.5

Annotations:

CDS & BOPF(Core Data Services)

(Busines Object Processing

Framework)

RDS(Referenced Data Source)

+ SADL

Annotations:

- Vocabulary- MPC_EXT- CDS-Based- MDE: Meta-Data-

Extension

@Odata.publish: true

Logic:- Query + READ: SADL- CUD: BOPF

Only withSEGW

SAP Fiori ElementsABAP for Fiori

ABAP 7.0

Annotations:

ABAP 7.4 ABAP 7.5

Annotations:

Framework)

+ SADL

Annotations:

Extension

Odata: publish

Service Definition / Service Binding

RAP(ABAP RESTFul Application

Programming Model)

CDS & Behavior Definition &

Behavior Implementation

Only withSEGW

Annotations:- CDS-Based- MDE: Meta-Data-

Extension

Logic:- Query + READ: SADL- CUD: BDEF

PREVIEW

BIND TO SCENARIO AND PROTOCOL

SERVICEBINDING

DEFINE SCOPE

SERVICEDEFINITION

CDS BEHAVIOR DEFINITION

ADDBEHAVIOR

IMPLEMENTBEHAVIOR

ABAP CODE

CDS BASEDDATA MODEL

ABAP 7.0

Annotations:

ABAP 7.4 ABAP 7.5

Annotations:

Framework)

+ SADL

Annotations:

Extension

Odata: publish

Annotations via local Annotation-File

Service Definition / Service Binding

RAP(ABAP RESTFul Application

Programming Model)

CDS & Behavior Definition &

Behavior Implementation

Only withSEGW

Annotations:- CDS-Based- MDE: Meta-Data-

Extension

Logic:- Query + READ: SADL- CUD: BDEF

SAP Fiori Elements

Annotations

SAP Fiori ElementsCDS Annotations

CDS View Annotations◦ Ermöglicht das Anreichern von

Metadaten direkt im View

SAP Pufferung aktiv

Mandantenbehandlung

Textinformationen

CDSCDS

CustomCustom

ODataOData

AnalyticsAnalyticsABAPABAP

Fiori Elements

• Werden von der ABAP Laufzeit-umgebung ausgewertet

• Beispiele:• Tabellenpufferung

• Mandantenbehandlung

• Erweiterbarkeit von CDS Views

• Datenbankviewname

• …

ABAP Annotationen

• Werden von Software-Komponentenbenötigt/ausgewertet

• Frameworks:• Fiori Elements

• BOPF

• SADL

• ABAP Entwicklung

• …

Framework-spezifisch

Annotationen

@AbapCatalog.sqlViewName: 'zcdsview_foe2_db'

@AbapCatalog.compiler.CompareFilter: true

@AccessControl.authorizationCheck: #CHECK

define view Zcdsview_Foe2

with parameters exc_date: abap.dats,

to_curr: abap.cuky(5)

as select from zdatentypen {

zdatentypen.curr as original,

@EndUserText.label: Currency‘

zdatentypen.cuky as currency,

@AbapCatalog.sqlViewName: 'zcdsview_foe2_db'

@AbapCatalog.compiler.CompareFilter: true

@AccessControl.authorizationCheck: #CHECK

define view Zcdsview_Foe2

with parameters exc_date: abap.dats,

to_curr: abap.cuky(5)

as select from zdatentypen {

zdatentypen.curr as original,

@EndUserText.label: Currency‘

zdatentypen.cuky as currency,

Core Annotations

Element Annotations

OData Annotations◦ Ermöglicht das Anreichern von

Metadaten für Service

Entity

Felder

SADL als Mapper im ABAP

https://developers.sap.com/tutorials/odata-04-basic-annotations.html

SAP Fiori Elements

SAP Fiori ElementsCAP

https://cap.cloud.sap/docs/

Framework und Toolsammlung◦ Services und Anwendungen

◦ CDS Views (CDL – „Dialekt“)

DB Tabellen werden erstellt

◦ Node.js und Java

◦ lokale Entwicklung + Tests

◦ Visual Studio Code / Eclipse / Business Application

Studio

◦ Deploy to SCP / Cloud Foundry

„Postman“ built-in – besser als GW Client ;)

SAP Fiori ElementsCAP – OData V4 -> V2

OData V2 Proxyhttps://cap.cloud.sap/docs/advanced/odata#odata-v2-support

SAP Fiori Elements

SAP Fiori ElementsSAP Fiori Elements

SAP Fiori Elements◦ Bei SAP Fiori Elements handelt es sich um

Metadatengetriebenes Framework

◦ Basierend auf Annotations und Konfigurationen

werden dynamisch die Oberflächen gerendert

◦ Technisch basieren Fiori Elements auf Smart

Controls der SAPUI5 Bibliothek

◦ Kein JavaScript notwendig

SAP Fiori ElementsFiori Elements Architektur

SAP NetWeaver

OData & AnnotationsGateway, CDS, BOPF

SAP S/4HANA Steampunk

OData & AnnotationsRAP, Business Service

SAP UI5 & SAP Fiori Elements

Application Configuration

Annotations

SAPUI5 flexibilty

SCP, …

Odata & Annotations

CAP, …

Extensions

SAP Fiori ElementsEntwicklungsbeschleunigung

Entwicklungsbeschleunigung◦ Standardisierte Page Types

Fokus auf Businessanforderung

◦ Konsistentes Userinterface

Fiori Elements beruhen auf bewährten UI Konzepten

◦ Zentrale Verwaltung

Änderungen werden zentral vorgenommen

SAP Fiori ElementsKonsistentes Userinterface

Konsistentes Userinterface◦ Navigation

◦ Suche

◦ Filter & Sortierung

◦ Ändern

◦ Fehlermeldungen

◦ …

SAP Fiori Elements

Pagetypen

SAP Fiori ElementsPagetypen

SAP Fiori Pagetypen◦ Pagetypen sind vordefinierte SAP Fiori Floorplans

◦ Aktuell gibt es 5 Pagetypen

Overview Page

List Report

Worklist

Object Page

Analytical List Page

SAP Fiori ElementsOverview Page

Overview

Darstellung von

wichtigen

Informationen in

Form von Kacheln.

In der Regel dienen

die Kacheln als

Einstieg in

detailliertere

Applikationen.

SAP Fiori ElementsList Report

List Report

Darstellung von

Informationen in

tabellarischer Form.

Umfangreiche Filter-

und Such-

möglichkeiten.

Oft als Einstieg in

Object Pages.

SAP Fiori ElementsWorklist

Worklist

Eignet sich wenn

Anwender eine Liste

mit Aufgaben

bearbeiten sollen .

SAP Fiori ElementsObject Page

Object Page

Mit diesem Typ

können Daten bzw.

Objekte angezeigt

oder geändert

werden.

SAP Fiori ElementsAnalytical List Page

Analytical

List Page

Für die Darstellung

von Reports und KPIs

eignet sich eine

Analytical List Page.

Umfangreiche

Features helfen bei

der Analyse der

SAP Fiori Elements

Demo 1 – List ReportCDS View/Visual Code Studio

SAP Fiori Elements

SAP Fiori ElementsIDEs

SAP Web IDE Full Stack

SAP Business Application Studio

Visual Code Studio

ABAP Development Tools

SAP Web IDE Full Stack◦ wird verschwinden => BAS

◦ im Trial Account ab 13.10.

◦ online

◦ killt regelmäßig Browser

SAP Business Application Studio◦ Nachfolger der WebIDE

◦ Eclipse Theia

◦ online

◦ Fiori, CAP, HANA,…

◦ Unterstütz VS Code Extensions

SAP Fiori ElementsIDEs - BAS

Visual Code Studio ◦ offline

◦ manuelle Installation SAP Erweiterungen

◦ Vorbild für Eclipse Theia -> BAS

https://help.sap.com/viewer/42532dbd1ebb434a80506113970f96e9/Latest/en-US

SAP Fiori ElementsIDEs – VS Code

ABAP Development Tools - Eclipse◦ CDS Views

◦ …

SAP Fiori Elements

Demo 2 – List ReportCDS View/Web IDE

SAP Fiori Elements

SAP Fiori Tools

SAP Fiori ElementsSAP Fiori Tools

SAP Fiori Tools◦ Sammlung von Funktionen zur Beschleunigung

von bei der Entwicklung von Fiori Elements

◦ Extension ist derzeit für Visual Code Studio und

Business Application Studio verfügbar

Seit Sommer 2020 generell verfügbar

SAP Fiori ElementsSAP Fiori Tools – Application Generator

Application

Generator

Unterstützung bei

der Erstellung und

Konfiguration neuer

SAP Fiori Elements

Projekte

SAP Fiori ElementsSAP Fiori Tools

Guided

Development

Sammlung von

Wizards um neue

Funktionen in Fiori

Elements

Anwendungen zu

ergänzen

SAP Fiori ElementsSAP Fiori Tools – Service Modeler

Service

Modeler

Visualisierung der

OData Metadaten-

dateien

SAP Fiori ElementsSAP Fiori Tools – Application Modeler

Application

Modeler

Darstellung der

Seitenstruktur der

Anwendung und

Möglichkeit diese zu

Ändern

SAP Fiori ElementsSAP Fiori Tools – XML Annotation Language Server

XML Annotation

Language Server

Beschleunigt die

Änderung von

Annotations durch

kontext sensitive

Code Completion

SAP Fiori Elements

Demo 3 – Fiori ToolsExcel Export einblenden

SAP Fiori Elements

Erweiterungen

SAP Fiori Elements

SAP weist an mehreren Stellen darauf hin, dass Erweiterungen nur mit

großer Vorsicht verwendet werden sollen.

Erweiterungsmöglichkeiten

Erweiterungsmöglichkeiten◦ Verschiedene Erweiterungspunkte stehen für List

Reports und Object Pages zur Verfügung Felder oder Spalten hinzufügen

Aktionen hinzufügen

Vordefinierte Controller Extensions

SAP Fiori ElementsFiori Elements vs. Freestyle Fiori

• Relativ einfache Entwicklung• Relativ starres Gerüst• Relativ geringe Kosten

• Extensions sorgsam einsetzen

SAP Fiori Elements

• Komplexe Entwicklung• Alles ist möglich• Höher Entwicklungs- und

Wartungskosten

Freestyle Fiori

SAP Fiori Elements

Links, Tutorials, Bücher, Sonstiges

SAP Fiori ElementsWeitere Informationen

Weitere Informationen◦ Übersicht

SAP Fiori Elements – Übersicht

SAP Fiori Elements – Community WIKI

SAP Fiori Design Guidelines

◦ SAP Blogs SAP Fiori tools is generally available. Increase the efficiency of

developing SAP Fiori elements apps

Blogs with “SAP Fiori Elements” Tag

SAP Fiori ElementsWeitere Informationen

Weitere Informationen◦ Videos

Using SAP Fiori elements – Serie mit 7 Videos

SAP Fiori Elements and SAP Fiori Tools – SAP Online Track

How to build SAP Fiori Apps quickly and simply – SAP TechEd 2019

SAP Fiori-side Chat Session on Steampunk

◦ Tutorials

https://developers.sap.com/tutorials/appstudio-fioriapps-create.html

https://developers.sap.com/tutorials/abap-environment-deploy-cf-

production.html

https://developers.sap.com/group.appstudio-cap-nodejs.html

SAP Fiori ElementsSAP Developer Tutorials

https://developers.sap.com/group.abap-dev-cds-view.html

SAP Fiori ElementsABAP Entwicklung für SAP S/4HANA

ISBN 978-3-8362-6788-5

https://www.rheinwerk-verlag.de/abap-entwicklung-fuer-sap-s4hanahttps://www.rheinwerk-verlag.de/dsag

SAP Fiori ElementsCadaxo Workshop – SAP Fiori Elements

SAP Fiori Elements

Zusammenfassung

SAP Fiori ElementsUnsere vergangenen Webinare

http://www.cadaxo.com/blog/

SAP Fiori ElementsIf you want to stay in touch …

https://twitter.com/domibiglsap

https://www.linkedin.com/in/dominik-bigl-9b98b68b

https://www.xing.com/profile/dominik_bigl

See you again!Thank you for participating!

https://twitter.com/foessleitnerj

https://www.linkedin.com/in/johann-fößleitner-a9851b2a

https://www.xing.com/profile/johann_foessleitner

https://twitter.com/SoSchlegel87

https://www.linkedin.com/in/soeren-schlegel-55171bb4

https://www.xing.com/profile/Soeren_Schlegel2

SAP Fiori Elements - Cadaxo GmbH

Documents

Beginning SAP Fiori - download.e-bookshelf.dedownload.e-bookshelf.de/download/0005/0269/82/L-G-0005026982... · Take a deep dive into SAP Fiori and discover Fiori architecture, Fiori

SAP UI5 & FIORI - Sterling ITsterlingittrainings.com/.../SAP_UI5I_FIORI.pdf · 2018-07-02 · Debugging SAP Fiori Apps Deploying SAP Fiori apps to SAP ABAP UI5 repository SAP FIORI

Fiori Integration Hana

Implementing SAP Fiori

Fiori 10 Installation

Ai Fiori F11

SAP Fiori Overview

Fiori Newsletter

Fiori Configuration Overview

SAP Fiori - salihkucuk.com.tr fiori.pdf · SAP Fiori i About the Tutorial SAP Fiori is a new user experience (UX) for SAP software and applications. It provides a ... 1. SAP Fiori

Fiori Configurations

Fiori Experience

What’s new in Fiori and Fiori launchpad

Fiori magazine

IM on FIORI

SAP Fiori - Hur kommer man igång? - Ovärderlig kunskap … · How do you Extend Fiori apps? How do you Implement Fiori? Why Fiori? Identify need Design Thinking Business Value Agenda

Week 2: User Experience in SAP S/4HANA Unit 1: SAP Fiori ...€¦ · Roadmap of SAP Fiori SAP Fiori 2013 SAP Fiori 2.0 2016 SAP Fiori 3 SAP CoPilot SAP Business Suite ... National

Mobile Service and Repair Processing via SAP Fiori · abilis GmbH . You can document the field-service-processes easily, quickly, and error-free mobile via the SAP Fiori App. Extensive

Sap fiori tutorial

Fiori & Personas.pdf