Preface

17

Target Audience

17

Objective

17

How to Read This Book

18

1 SAPUI5 at a Glance

25

1.1 What It Is and Where to Get It

25

1.2 History and Evolution

26

1.2.1 History

26

1.2.2 Evolution

27

1.3 Features

28

1.3.1 SAPUI5 Demo Kit

29

1.3.2 Model-View-Controller in SAPUI5

32

1.3.3 Cross-Browser Compatibility

32

1.3.4 Theming

35

1.3.5 Localization

36

1.3.6 Accessibility

36

1.3.7 Open Source in SAPUI5

36

1.3.8 Web Components

37

1.4 Use Cases

38

1.5 Product Comparison

42

1.6 SAPUI5 and OpenUI5

42

1.7 Summary

43

2 Architecture

45

2.1 The Libraries

45

2.2 Model-View-Controller Overview

48

2.2.1 Model-View-Controller Interaction

48

2.2.2 View Instantiation and the Controller Lifecycle

49

2.3 Architecture of a Typical SAPUI5 Application

50

2.4 Class Hierarchy

53

2.4.1 Inheritance for Controls

54

2.4.2 Inheritance for Models

56

2.5 Summary

59

3 Integrated Development Environment Setup

63

3.1 SAP Web IDE

63

3.1.1 Creating an Account on SAP Cloud Platform

64

3.1.2 Accessing SAP Web IDE

67

3.1.3 SAP Web IDE Templates

69

3.2 WebStorm

79

3.3 Visual Studio Code with UI5 Command-Line Tools

87

3.4 Summary

89

4 Hello, SAPUI5 World

91

4.1 Coding Guidelines

91

4.1.1 Global Variables

92

4.1.2 Private Object Members

93

4.1.3 Code Formatting

93

4.1.4 Variable Naming Conventions

94

4.2 Setup

95

4.2.1 Setting Up Your HTML Start Page

96

4.2.2 Bootstrapping SAPUI5

96

4.3 Adding a Simple Control

98

4.4 Defining an Event Handler

100

4.4.1 Simple Event Handler

100

4.4.2 Using Event Information within an Event Handler

103

4.5 Complex Controls

105

4.5.1 Aggregations

105

4.5.2 Associations

107

4.6 Controls Application Programming Interface

109

4.7 Layouts

111

4.8 Summary

117

5 Building Model-View-Controller Applications

119

5.1 Models, Views, and Controllers

119

5.2 Structure

120

5.2.1 Application Overview

122

5.2.2 Building the First Page

123

5.2.3 Table Coding

128

5.3 Building a Simple View

130

5.3.1 Namespaces and Resource Path

131

5.3.2 Creating the Master JavaScript View

133

5.3.3 Creating the Master Controller

135

5.3.4 Creating a Detail View and Controller

139

5.4 View Types

144

5.4.1 XML Views

151

5.4.2 Transforming JavaScript Views into XML Views

153

5.5 Components

163

5.5.1 Creating the Component File

163

5.5.2 Adding a Shell around the Component

167

5.5.3 Enhancing the Look of a Table

169

5.5.4 Component Metadata

170

5.5.5 Storing the Hard-Coded Model Data in a Separate data.json File

171

5.6 Routing

174

5.6.1 Routing Configuration

175

5.6.2 Router Initialization

177

5.6.3 Adjusting the Application View

178

5.6.4 Using Routing inside the Master Controller

179

5.6.5 Using Routing inside the Detail Controller

181

5.7 Application Descriptor

183

5.8 Summary

189

6 Models and Bindings

191

6.1 Using Models: A JSON Sample

191

6.1.1 Instantiation and Loading of Data

192

6.1.2 Accessing Model Values

194

6.2 Property Binding

200

6.2.1 Methods for Binding a Control’s Property

201

6.2.2 Using Data Types

205

6.2.3 Defining a Custom Data Type

211

6.3 Using Formatters

214

6.4 Aggregation Binding

224

6.4.1 bindAggregation

230

6.4.2 Using a Factory

230

6.5 Element Binding

237

6.6 Expression Binding and Calculated Fields

239

6.6.1 Calculated Fields

239

6.6.2 Expression Binding

241

6.7 Resource Models and Internationalization

243

6.7.1 File Location

243

6.7.2 File Naming Convention

244

6.7.3 Code Page

245

6.7.4 Using a Resource Model

245

6.8 View Models and the Device Model

250

6.8.1 Using View Models

250

6.8.2 Using the Device Model

255

6.9 Summary

258

7 CRUD Operations

259

7.1 REST and CRUD

259

7.2 Connecting to REST Services

260

7.2.1 Configuring the Mock Service

262

7.2.2 Extending the JSON Model

265

7.3 Using CRUD Operations

267

7.3.1 Editing an Existing Entry

267

7.3.2 Creating a New Entry

278

7.3.3 Deleting an Entry

289

7.4 Sorting, Filtering, and Grouping in JSON Models

291

7.4.1 Sorting

292

7.4.2 Filtering

297

7.4.3 Grouping

304

7.5 Summary

307

8 Using OData

309

8.1 OData at a Glance

309

8.1.1 Northwind OData Service

310

8.1.2 Service Document

311

8.1.3 Service Metadata Document

312

8.1.4 Accessing Data

314

8.2 OData Model at a Glance

320

8.2.1 Service Metadata

323

8.2.2 Instantiating the OData Model in SAP Web IDE

324

8.3 Reading Data

328

8.3.1 Reading Data Manually

328

8.3.2 Accessing Data via Data Binding

333

8.3.3 Best Practices

336

8.3.4 Displaying Additional Product Information

342

8.3.5 Displaying Navigation Properties

343

8.4 Filter, Sort, Expand, and Group

346

8.4.1 Filtering with $filter

347

8.4.2 Sorting with $orderby

352

8.4.3 Expanding with $expand

356

8.4.4 Grouping with group

360

8.5 Paging and Thresholds

361

8.6 Batch Mode

366

8.7 One-Way and Two-Way Bindings

368

8.7.1 One-Way Binding

368

8.7.2 Two-Way Binding

371

8.8 Writing Data

374

8.8.1 Creating an Entry

378

8.8.2 Updating an Entry

383

8.8.3 Deleting an Entry

386

8.9 Function Imports

388

8.10 Concurrency Control

392

8.11 Summary

395

9 Application Patterns and Examples

397

9.1 Layouts

398

9.1.1 Full-Screen Layout: sap.m.App

403

9.1.2 Split Screen Layout: sap.m.SplitApp

405

9.1.3 Flexible Column Layout: sap.f.FlexibleColumnLayout

410

9.2 Floor Plans

414

9.2.1 Worklist

415

9.2.2 Object Page

424

9.2.3 Master-Detail

432

9.3 Additional Application Features

445

9.3.1 “Not Found” Handling

446

9.3.2 Error Handling

451

9.3.3 Busy Handling

454

9.3.4 Letterboxing

456

9.3.5 Headers and Footers

458

9.4 Running Applications in SAP Fiori Launchpad

461

9.4.1 SAP Fiori Launchpad Sandbox

461

9.4.2 Cross-Application Navigation

466

9.4.3 Register and Run in Production

468

9.5 SAP Fiori Reference Applications

471

9.5.1 Manage Products Application

472

9.5.2 Shop Application

473

9.5.3 Procurement Overview

474

9.6 Summary

479

10 Advanced Concepts

481

10.1 Writing Your Own Controls

481

10.1.1 SAPUI5 Control Structure

482

10.1.2 Implementing a Composite Control

488

10.2 Using Fragments

498

10.2.1 Creating Fragments

499

10.2.2 Embedding Fragments into Views

502

10.2.3 Using Dialogs in Fragments

507

10.3 SAP OData Annotations

511

10.3.1 Custom SAP OData 2.0 Annotations

511

10.3.2 OData 4.0 Annotations

513

10.4 Smart Controls

515

10.4.1 Smart Tables and Smart Filters Bar

520

10.4.2 Smart Form and Smart Fields with Value Help

523

10.5 SAP Fiori Elements

524

10.6 SAPUI5 Web Components

528

10.6.1 Installing SAPUI5 Web Components

528

10.6.2 Importing Web Components

530

10.7 Drag and Drop

533

10.7.1 Custom Code Implementation

533

10.7.2 Other Controls with Drag and Drop

537

10.8 Summary

538

11 Adding Enterprise-Grade Features

543

11.1 Theming

543

11.1.1 Manual Restyling

544

11.1.2 UI Theme Designer

548

11.2 Security

554

11.2.1 Input Validation

554

11.2.2 Cross-Site Scripting

554

11.2.3 URLs and Whitelist Filtering

555

11.2.4 frameOptions and Central Whitelisting

556

11.3 Performance

557

11.3.1 Bundling and Component Preload

557

11.3.2 Minification and Uglification

558

11.4 Accessibility

575

11.4.1 Importance of Inclusion and Accessibility

575

11.4.2 SAPUI5 Accessibility Features

579

11.4.3 Making Your Applications Accessible

581

11.5 Summary

583

12 Debugging and Testing Code

585

12.1 Debugging

586

12.1.1 Tricks to Know

586

12.1.2 Debugging Support Tools

588

12.2 Writing Unit Tests

597

12.2.1 Setting Up a QUnit Test Page

599

12.2.2 Writing a Unit Test for a Custom Control

602

12.2.3 Unit Tests for Applications

607

12.3 One-Page Acceptance Tests

614

12.3.1 Architecture

615

12.3.2 OPA Test Structure

616

12.3.3 Writing waitFor Functions

616

12.3.4 Writing a One-Page Acceptance Test

622

12.3.5 Application Lifecycle Handling

627

12.3.6 Structuring Tests with Page Objects

628

12.3.7 Full Application Test Setup

629

12.4 Mocking Data: Using the Mock Server

634

12.4.1 Basic Instantiation and Configuration

635

12.4.2 Advanced Concepts and Configuration

636

12.5 Linting Code

640

12.6 Summary

642

13 Accessing and Connecting to the Backend

643

13.1 Same-Origin Policy

643

13.2 Disable Web Security in Google Chrome

648

13.3 SAP Cloud Platform Destinations

650

13.3.1 Simple Backend Destination

651

13.3.2 Northwind Destination

655

13.3.3 ES5 Demo Gateway Destination

657

13.4 Summary

658

14 Application Deployment

659

14.1 SAP Cloud Platform

659

14.2 SAP Web IDE and Cloud Connector

669

14.2.1 Cloud Connector Settings

670

14.2.2 Creating a New Destination in the SAP Cloud Platform Cockpit

674

14.2.3 Creating an Application from a Template

677

14.3 ABAP Server

679

14.3.1 Deployment via Cloud Connector

680

14.3.2 Deployment via Report /UI5/UI5_REPOSITORY_LOAD

685

14.4 Other Web Servers

689

14.5 Summary

691

Appendices

693

A Worst Practices

695

A.1 Worst Practices

695

A.2 How to Break your Applications during Updates

701

A.3 Summary

702

B Cheat Sheets

703

B.1 Starting the Application

703

B.2 Referencing Elements

705

B.3 JSON Model

707

B.4 OData Model

708

B.5 Bindings

710

B.6 Coding Conventions

712

B.7 JSDoc

713

B.8 Controls Cheat Sheet

714

C Additional Resources

717

C.1 openSAP Courses

717

C.2 Documentation

717

C.3 Websites

718

C.4 Books/E-Bites

719

C.5 Communities

720

C.6 GitHub Repositories

720

C.7 JavaScript Playgrounds

720

C.8 Tools

721

C.9 Google Chrome Plug-Ins

721

D The Authors

723