1 Warum SAP Fiori Elements?

21

1.1 Historische Entwicklung der Benutzeroberflächen bei SAP

22

1.1.1 Aufkommen der Weboberflächen

22

1.1.2 Einführung von SAPUI5 und SAP Fiori

24

1.1.3 Templates für wiederkehrende Anforderungen

28

1.2 Anforderungen an Benutzeroberflächen in SAP-On-Premise- und -Cloud-Produkten

33

1.3 Low-Code-Entwicklung

36

1.4 Flexible Programming Model

38

1.5 Kl-Unterstützung bei der Entwicklung

39

1.6 Beispielapplikation

41

2 Was Sie über SAPUI5 und SAP Fiori wissen sollten

43

2.1 Kurze Einführung in SAPUI5

43

2.2 Standardisierte Entwicklung mit SAP Fiori

47

2.2.1 SAPUI5 oder SAP Fiori?

49

2.2.2 Versionen von SAP Fiori

51

2.2.3 SAP Fiori Design Guidelines

54

2.2.4 SAP Fiori Launchpad

55

2.2.5 Erweiterungskonzept

63

3 OData als Basis für SAP-Fiori-Elements-Applikationen

71

3.1 Einführung in den OData-Standard

72

3.2 CRUDQ-Methoden

76

3.2.1 Query

77

3.2.2 Read

80

3.2.3 Delete

83

3.2.4 Create

83

3.2.5 Update

85

3.3 Filterung, Sortierung und sonstige Funktionen

85

3.3.1 Filterung

86

3.3.2 Sortierung

90

3.3.3 Expand-Funktion

91

3.3.4 Pagination

91

3.3.5 Formatierung der Antwort

92

3.3.6 Select

92

3.3.7 Inlinecount und Count

93

3.4 Verwaltung der OData-Services im SAP-System

93

3.4.1 Klassische Entwicklung und Aktivierung (ohne Eclipse)

94

3.4.2 Moderne Entwicklung und Aktivierung (mit Eclipse)

99

3.5 OData- und CDS-Annotationen

104

4 Programmiermodelle

109

4.1 Warum braucht es neue Programmiermodelle für die Cloud?

110

4.2 SAP Cloud Application Programming Model

113

4.3 ABAP RESTful Application Programming Model

123

5 Entwicklungstools

131

5.1 SAP Business Application Studio

131

5.1.1 Wo finde ich das SAP Business Application Studio?

132

5.1.2 Applikationen importieren

137

5.1.3 Funktionen des SAP Business Application Studios

138

5.1.4 Prompt Engineering mit Joule

142

5.1.5 Vorteile und Einschränkungen

150

5.2 Lokale Entwicklungsumgebungen

151

5.2.1 Eclipse

151

5.2.2 Visual Studio Code

157

6 Einführung in Floorplans und Anwendungsszenarien

163

6.1 Verfügbare Floorplans

163

6.1.1 Overview Page

164

6.1.2 Floorplans für Listen

166

6.1.3 Object Page

171

6.2 Anwendungsfälle für die Floorplans

173

6.3 Generische Annotationen

174

6.3.1 UI.HeaderInfo

174

6.3.2 UI.selectionField

175

6.3.3 UI.lineItem

175

6.3.4 UI.hidden

176

7 Overview Page

177

7.1 Einführung

177

7.1.1 Aufbau einer Overview Page

178

7.1.2 Verwendung der Overview Page

183

7.2 Annotationen für Overview Pages

186

7.3 CDS View für eine Overview Page

188

7.4 Entwicklung einer Overview Page im SAP Business Application Studio

190

7.4.1 Projekt anlegen

190

7.4.2 Table Card hinzufügen

193

7.4.3 Analytical Card hinzufügen

198

7.4.4 List Card hinzufügen

203

7.4.5 Stack Card hinzufügen

206

8 List Report und Worklist

209

8.1 Einführung

209

8.1.1 Dynamic Page Header

210

8.1.2 Content Area

213

8.1.3 Footer Toolbar

217

8.2 Annotationen für List Reports und Worklists

219

8.2.1 Suchfeld

220

8.2.2 Filterfelder

220

8.2.3 Wertehilfen

221

8.2.4 Überschriften

221

8.2.5 Spalten

221

8.2.6 Zellen

222

8.2.7 Aktionen

223

8.3 Entwicklung einer List-Report-Applikation

223

8.3.1 Applikation anlegen

223

8.3.2 Tabelle definieren

226

8.3.3 Filterung konfigurieren

229

8.3.4 Quick Filter hinzufügen

232

8.3.5 Views erstellen

235

8.4 Entwicklung einer Worklist-Applikation

240

9 Analytical List Page

243

9.1 Einführung

244

9.1.1 Header

248

9.1.2 Content Area

251

9.2 Annotationen für Analytical List Pages

252

9.3 CDS View für eine Analytical List Page

257

9.4 Entwicklung einer Analytical List Page im SAP Business Application Studio

260

9.4.1 Projekt anlegen

260

9.4.2 Visuellen Filter definieren

263

9.4.3 Key Performance Indicator anzeigen

267

9.5 Weiterentwicklung der Analytical List Page

271

10 Object Page

275

10.1 Einführung

275

10.1.1 Header

276

10.1.2 Content Area

279

10.1.3 Footer Toolbar

281

10.2 Annotationen für Object Pages

283

10.2.1 Kopfbereich

284

10.2.2 Aktionen

284

10.2.3 Abschnitte und Facets

285

10.2.4 Abschnitte mit Bezug auf eine Tabelle

290

10.2.5 Semantische Annotationen

290

10.3 Entwicklung einer Object Page

293

10.3.1 Object Page anlegen

293

10.3.2 Header konfigurieren

295

10.3.3 Abschnitt mit Feldgruppe einfügen

297

10.3.4 Abschnitt mit Gruppierung einfügen

299

10.3.5 Abschnitt mit Tabelle einfügen

302

11 Entwicklung mit dem Flexible Programming Model

307

11.1 Einführung

307

11.2 SAP Fiori Development Portal

309

11.2.1 Erweiterungspunkte

309

11.2.2 Building Blocks

312

11.2.3 Controller-Erweiterungen

313

11.2.4 Fortgeschrittene Funktionen zur Erweiterung von SAP Fiori Elements

315

11.3 Building Blocks

316

11.3.1 Field

316

11.3.2 Form

317

11.3.3 FormElement

318

11.3.4 Table

319

11.3.5 FilterBar

320

11.3.6 FilterField

321

11.3.7 MicroChart

321

11.3.8 Chart

322

11.3.9 FlexibleColumnLayoutActions

324

11.3.10 Share

324

11.3.11 Paginator

324

11.3.12 Column

325

11.4 Implementierung einer Beispielanwendung

325

11.4.1 Das Flexible Programming Model in SAPUI5-Freestyle-Applikationen verwenden

325

11.4.2 Neue Applikation mit dem Flexible Programming Model erstellen

326

11.4.3 Object Page über die Page Map hinzufügen

335

11.4.4 Controller-Erweiterung hinzufügen

341

12 Deployment

345

12.1 Continuous Integration und Continuous Delivery

345

12.2 Deployment-Optionen

348

12.2.1 On-Premise-Deployment

348

12.2.2 Cloud-Deployment

352

12.2.3 Mobile Deployment

356

12.3 SAP Fiori Launchpad konfigurieren

361

12.3.1 On-Premise-Konfiguration

363

12.3.2 Konfiguration in der Cloud-Foundry-Umgebung der SAP BTP

377

13 Erweiterungen

385

13.1 Erweiterungsentwicklung mit dem Guided Development

386

13.2 Overview Page erweitern

390

13.2.1 Einen benutzerspezifischen Filter hinzufügen

390

13.2.2 Eine benutzerspezifische Card entwickeln

395

13.3 List Report erweitern

399

13.3.1 Eine benutzerspezifische Aktion hinzufügen

400

13.3.2 Einen benutzerspezifischen Filter hinzufügen

403

13.4 Object Page erweitern

405

13.5 Analytical List Page erweitern

407

13.5.1 Standardfilter hinzufügen

407

13.5.2 Einen benutzerspezifischen Filter hinzufügen

409

13.6 Erweiterungsprojekt implementieren

413

13.6.1 Erweiterungsprojekt anlegen

414

13.6.2 Erweiterungen im grafischen Editor vornehmen

416

13.6.3 Erweiterung bereitstellen

421

14 Navigation

425

14.1 Interne Navigation

426

14.1.1 Generelle Navigationsannotationen

427

14.1.2 Varianten zur Deklaration einer Navigation

428

14.2 Externe Navigation

433

14.2.1 Generelle Navigationsannotationen

434

14.2.2 Varianten zur Deklaration einer Navigation

435

14.2.3 Navigationsziel in einem neuen Browsertab öffnen

438

14.3 Vorschau auf die Intent-basierte Navigation Preview in der Entwicklungsumgebung

439

Anhang

443

A Wichtige Annotationen

443