Preface

19

Aim and Structure of the Book

19

Why This Book?

20

1 Introduction to SAPUI5

23

1.1 History of SAPUI5

23

1.2 Comparing SAPUI5, SAP Fiori, OpenUl5, and Ul5 Web Components

26

1.2.1 SAPUI5

27

1.2.2 OpenUI5

27

1.2.3 SAP Fiori

29

1.2.4 UI5 Web Components

30

1.3 SAP Fiori Design Guidelines

31

1.3.1 Core Principles

32

1.3.2 Responsive vs. Adaptive Design

34

1.3.3 Design Language

38

1.3.4 SAP Fiori Elements

38

1.3.5 Floorplans

39

1.3.6 Flexible Programming Model

44

1.3.7 Draft Handling

45

1.3.8 Interaction Patterns

46

1.3.9 Guidelines for Specific Use Cases

47

1.4 SAP Fiori Launchpad

48

1.4.1 Key Components

48

1.4.2 Tiles

51

1.4.3 Theming

53

1.4.4 User Interface Adaptations

55

1.5 Documentation and Additional Resources

56

1.5.1 General Learning Platforms for SAPUI5, SAP Fiori, and SAP Fiori Elements

56

1.5.2 Best Practices and Documentation

56

1.5.3 Tools for SAP Fiori Development

57

1.5.4 Open-Source and Inspection Tools

57

1.5.5 Git Tutorials

58

1.5.6 Additional Resources and Community Contributions

58

1.5.7 Versioning

59

1.6 Summary

59

2 Infrastructure

61

2.1 SAP Business Technology Platform

62

2.1.1 SAP BTP for Intelligent Enterprises

63

2.1.2 Architecture

67

2.1.3 Cloud Connector

72

2.1.4 Security

83

2.2 Development Environments

94

2.2.1 SAP Business Application Studio

96

2.2.2 Visual Studio Code

104

2.3 Summary

108

3 TypeScript

109

3.1 Basics

109

3.1.1 JavaScript

110

3.1.2 TypeScript

110

3.1.3 The Purpose of TypeScript

111

3.1.4 How to Use TypeScript

112

3.1.5 Data Types

114

3.2 Next-Generation TypeScript

115

3.2.1 Anonymous Functions

115

3.2.2 Arrow Functions

115

3.2.3 Rest Parameters

116

3.2.4 Function Overloading

116

3.2.5 Static Members

117

3.2.6 Intersection and Union Types

118

3.2.7 Variable Declarations

118

3.3 Classes and Interfaces

119

3.3.1 Classes

119

3.3.2 Inheritance

122

3.3.3 Interfaces

124

3.3.4 Abstract Classes

128

3.4 Generics

129

3.4.1 Generics Example

129

3.4.2 Methods of Generic Types

131

3.4.3 Generic Constraints

131

3.4.4 Generic Interfaces

132

3.4.5 Generic Classes

133

3.5 Module Development

134

3.5.1 What Are Modules?

134

3.5.2 Why Use Modules?

135

3.5.3 Export Modules

135

3.5.4 Import Modules

135

3.6 Summary

136

4 First Steps in SAPUI5 Development

139

4.1 Create Your Application

139

4.1.1 SAP Business Application Studio

139

4.1.2 Visual Studio Code

146

4.2 Explore the Application Structure

147

4.2.1 Components and the Component Controller: Component.js

147

4.2.2 Application Descriptor: manifest.json

149

4.2.3 package.json

152

4.2.4 YAML Files

153

4.2.5 index.html

154

4.3 Model View Controller Design Pattern

155

4.3.1 View

156

4.3.2 Controller

166

4.3.3 Model

171

4.4 Application Launch

182

4.5 Summary

186

5 Modules

187

5.1 Define a Module

187

5.2 Libraries

189

5.2.1 sap.base

189

5.2.2 sap.ui

190

5.2.3 sap.m

193

5.2.4 sap.ushell

196

5.2.5 sap.uxap

197

5.2.6 sap.f

197

5.3 Controls

198

5.3.1 Basic

198

5.3.2 Form-Based

211

5.3.3 List-Based

217

5.3.4 Miscellaneous

226

5.4 Layouts

228

5.4.1 General Layouts

229

5.4.2 App

235

5.4.3 Page

235

5.4.4 Object Page

239

5.4.5 Split App

244

5.4.6 Flexible Column Layout

245

5.5 Managed Objects

247

5.6 Summary

248

6 Data Binding

251

6.1 Binding Modes

252

6.1.1 One-Way Binding

252

6.1.2 Two-Way Binding

253

6.1.3 One-Time Binding

254

6.2 Property Binding

255

6.2.1 Property Binding with Named Models

256

6.2.2 Formatting of Property Values

258

6.3 Aggregation Binding

263

6.3.1 AggregationBindingInfo Object

264

6.3.2 List Binding in an XML View

266

6.3.3 List Binding via a Controller

267

6.3.4 Remove Binding from Control

269

6.3.5 Factory Function for Aggregation Binding

269

6.4 Element Binding

269

6.4.1 Element Binding Directly in the XML View

270

6.4.2 Element Binding via the Controller

271

6.5 Expression Binding

273

6.6 Summary

276

7 Routing and Navigation

277

7.1 Example Scenario

278

7.2 General Concepts

279

7.3 Patterns

281

7.3.1 Full-Screen Navigation

282

7.3.2 Split App

296

7.3.3 Flexible Column Layout

308

7.4 Routing Events

329

7.5 App-to-App Navigation

330

7.6 Summary

337

8 REST Integration

341

8.1 JSON Model

342

8.1.1 Creating and Using the Model

342

8.1.2 Filtering

349

8.1.3 Sorting

353

8.2 Axios

356

8.2.1 Installation via Files or the Axios Node Module

358

8.2.2 Using CRUD Functionalities

363

8.3 Summary

368

9 OData Service Integration

369

9.1 The OData Protocol in SAP

369

9.1.1 Basics

370

9.1.2 System Architecture

371

9.1.3 ABAP RESTful Application Programming Model

372

9.1.4 ABAP-Based OData Services

374

9.2 Metadata Document

376

9.2.1 Structure

376

9.2.2 OData V2

377

9.2.3 OData V4

379

9.3 Testing OData Services

380

9.4 CRUD Operations

381

9.4.1 Read

382

9.4.2 Create

382

9.4.3 Update

383

9.4.4 Delete

384

9.5 Query Options

384

9.6 Adding OData Services to SAPUI5 Projects

386

9.7 Summary

388

10 OData Version 2 Model

389

10.1 OData Model

390

10.1.1 Creating a Model Instance

391

10.1.2 Additional URL Parameters

392

10.1.3 Custom HTTP Headers

393

10.1.4 Creating Entities

393

10.2 CRUD Operations

399

10.2.1 Create

400

10.2.2 Read

401

10.2.3 Update

402

10.2.4 Delete

403

10.3 Function Import

405

10.3.1 callFunction Method of the OData Model

405

10.3.2 Binding of Function Import Parameters

407

10.4 Summary

408

11 OData Version 4 Model

409

11.1 OData Model

410

11.1.1 Creating a Model Instance

410

11.1.2 Consuming OData V2 Services Using the OData V4 Model

414

11.2 Batch Groups

416

11.3 Binding Contexts

418

11.3.1 bindContext Method

418

11.3.2 bindList Method

419

11.3.3 bindProperty Method

421

11.4 CRUD Operations

422

11.4.1 Create

422

11.4.2 Read

423

11.4.3 Update

424

11.4.4 Delete

425

11.5 Side Effects

425

11.5.1 Side Effect Annotation Format

426

11.5.2 Adding Side Effects to SAPUI5 Applications

428

11.6 Actions

432

11.6.1 Simple Function Bindings

432

11.6.2 Deferred Operation Bindings

432

11.6.3 Action Bindings

433

11.6.4 Operation Parameters

433

11.6.5 Bound Actions and Functions

435

11.7 Summary

436

12 Advanced SAPUI5

439

12.1 Modularization

439

12.1.1 Fragments and Dialogs

440

12.1.2 Base Controller

450

12.2 Localization

455

12.2.1 Setup

456

12.2.2 Usage in XML

457

12.2.3 Usage in a Controller

457

12.2.4 Placeholders

457

12.2.5 Property Metadata Binding

458

12.3 File Upload

459

12.3.1 Media Entities

459

12.3.2 Media Handling in OData V2

460

12.3.3 Media Handling in OData V4

472

12.4 Drag and Drop

474

12.5 Input and Form Validation

480

12.5.1 Basic Requirements

480

12.5.2 Built-in Datatypes

481

12.5.3 Custom Datatypes

482

12.5.4 Custom Validations

482

12.5.5 Service-Related Validations

482

12.5.6 Recommendations in SAP Fiori Design Guidelines

483

12.5.7 Implementation

485

12.6 Error Handling

495

12.7 Smart Controls

497

12.7.1 SmartField and SmartLabel

498

12.7.2 SmartForm

499

12.7.3 SmartTable and SmartFilterBar

500

12.8 Summary

507

13 Custom Control Development

509

13.1 Extending Controls

509

13.1.1 Creating a Control Extension

510

13.1.2 Control Metadata

511

13.2 Implementing Custom Controls

516

13.2.1 Creating a Custom Control

517

13.2.2 Aggregations

518

13.2.3 Control Renderer

519

13.3 Libraries

522

13.3.1 Create a New Library

523

13.3.2 Development

525

13.3.3 Deployment

529

13.3.4 Usage in Applications

531

13.4 Summary

532

14 SAP Fiori Elements

533

14.1 Floorplans

534

14.1.1 List Report

534

14.1.2 Object Page

536

14.1.3 Overview Page

541

14.1.4 Generic Annotations

545

14.2 Flexible Programming Model

547

14.2.1 Edit Flow

548

14.2.2 Macros

555

14.3 Extensibility

562

14.3.1 Adaptation Projects

563

14.3.2 Key User Adaptations

574

14.3.3 Guided Development

579

14.4 Summary

584

15 Git

587

15.1 Local and Remote Repositories

589

15.1.1 Architecture

589

15.1.2 Forks

593

15.1.3 Branches

594

15.2 Essential Git Commands

596

15.2.1 Commit

597

15.2.2 Clone

599

15.2.3 Fetch

601

15.2.4 Merge

602

15.2.5 Checkout

603

15.2.6 Push

604

15.2.7 Pull

604

15.2.8 Rebase

606

15.3 Working with the Git Command-Line Interface

611

15.4 Conflict Resolution

624

15.5 IDE and Git Integration

627

15.6 Summary

637

16 Deployment

639

16.1 Manual Deployment

640

16.1.1 SAP Business Technology Platform

640

16.1.2 SAP S/4HANA

647

16.2 Automated Deployment with the SAP Continuous Integration and Delivery Service

652

16.2.1 Assign Role Collections

652

16.2.2 Cloud Foundry Deployment

655

16.2.3 ABAP Deployment

662

16.3 Summary

666

17 SAP Fiori Launchpad Configuration

667

17.1 General Concepts

668

17.2 On-Premise Configuration for SAP S/4HANA

672

17.3 SAP Build Work Zone, Standard Edition

684

17.3.1 Configuration

684

17.3.2 Launchpad Creation

690

17.4 Summary

698

18 Debugging and Code Quality

699

18.1 Browser Developer Tools

700

18.2 Support Assistant

708

18.3 UI5 Inspector

711

18.4 Diagnostics

714

18.5 Static Code Analysis

715

18.6 Testing

718

18.6.1 QUnit

719

18.6.2 OPA5

725

18.7 Summary

729

19 Security

731

19.1 Content Security

732

19.2 Browser Security

733

19.2.1 Cross-Site Scripting

733

19.2.2 Clickjacking

735

19.2.3 HTML5 Security Risks

739

19.3 Transport Security

740

19.4 Server Security

740

19.5 Summary

741

20 SAP Build Code

743

20.1 Introduction to Generative AI

744

20.2 Installation and Configuration of SAP Build Code

746

20.3 Create a Basic Project

754

20.4 Use Cases in SAPUI5 Development

757

20.5 Summary

765