Preface

17

Target Audience

17

Objective

17

How to Read This Book

18

1 SAPUI5 at a Glance

23

1.1 What It Is and Where to Get It

23

1.2 History and Evolution

24

1.3 Features

25

1.3.1 SAPUI5 Demo Kit

25

1.3.2 Model-View-Controller in SAPUI5

29

1.3.3 Cross-Browser Compatibility

29

1.3.4 Theming

31

1.3.5 Localization

32

1.3.6 Accessibility

33

1.3.7 Open Source in SAPUI5

33

1.4 Use Cases

34

1.5 Product Comparison

37

1.6 SAPUI5 and OpenUI5

38

1.7 Summary

39

2 Architecture

41

2.1 The Libraries

41

2.2 MVC Overview

44

2.2.1 MVC Interaction

44

2.2.2 View Instantiation and the Controller Lifecycle

45

2.3 Architecture of a Typical SAPUI5 Application

46

2.4 Class Hierarchy

49

2.4.1 Inheritance for Controls

50

2.4.2 Inheritance for Models

52

2.5 Summary

55

3 Hello, SAPUI5 World

59

3.1 Coding Guidelines

59

3.1.1 Global Variables

60

3.1.2 Private Object Members

61

3.1.3 Code Formatting

61

3.1.4 Variable Naming Conventions

62

3.2 Setup

63

3.2.1 Setting Up Your HTML Start Page

63

3.2.2 Bootstrapping SAPUI5

64

3.3 Adding a Simple Control

66

3.4 Defining an Event Handler

68

3.4.1 Simple Event Handler

68

3.4.2 Using Event Information within an Event Handler

71

3.5 Complex Controls

73

3.5.1 Aggregations

73

3.5.2 Associations

75

3.6 Controls API

77

3.7 Layouts

78

3.8 Summary

84

4 Building MVC Applications

85

4.1 Models, Views, and Controllers

85

4.2 Structure

86

4.2.1 Application Overview

88

4.2.2 Building the First Page

90

4.2.3 Table Coding

94

4.3 Building a Simple View

95

4.3.1 Namespaces and Resource Path

97

4.3.2 Creating the Master JavaScript View

98

4.3.3 Creating the Master Controller

100

4.3.4 Creating a Detail View and Controller

104

4.4 View Types

109

4.4.1 XML Views

116

4.4.2 Transforming JavaScript Views into XML Views

117

4.5 Components

126

4.5.1 Creating the Component File

127

4.5.2 Adding a Shell Around the Component

130

4.5.3 Enhancing the Look of a Table

133

4.5.4 Component Metadata

134

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

134

4.6 Routing

137

4.6.1 Routing Configuration

138

4.6.2 Router Initialization

140

4.6.3 Adjusting the App View

141

4.6.4 Using Routing inside the Master Controller

141

4.6.5 Using Routing inside the Detail Controller

143

4.7 Application Descriptor

145

4.8 Summary

150

5 Models and Bindings

153

5.1 Using Models: A JSON Sample

153

5.1.1 Instantiation and Loading of Data

154

5.1.2 Accessing Model Values

156

5.2 Property Binding

162

5.2.1 Methods for Binding a Control’s Property

162

5.2.2 Using Data Types

166

5.2.3 Defining a Custom Data Type

171

5.3 Using Formatters

174

5.4 Aggregation Binding

183

5.4.1 bindAggregation

188

5.4.2 Using a Factory

189

5.5 Element Binding

195

5.6 Expression Binding and Calculated Fields

196

5.6.1 Calculated Fields

196

5.6.2 Expression Binding

199

5.7 Resource Models and Internationalization

200

5.7.1 File Location

200

5.7.2 File Naming Convention

201

5.7.3 Code Page

201

5.7.4 Using a Resource Model

202

5.8 View Models and the Device Model

206

5.8.1 Using View Models

207

5.8.2 Using the Device Model

212

5.9 Summary

214

6 CRUD Operations

217

6.1 What Is REST? What Is CRUD?

217

6.2 Connecting to REST Services

218

6.2.1 Configuring the Mock Service

220

6.2.2 Extending the JSON Model

223

6.3 Using CRUD Operations

225

6.3.1 Editing an Existing Entry

225

6.3.2 Creating a New Entry

235

6.3.3 Deleting an Entry

245

6.4 Sorting, Filtering, and Grouping in JSON Models

247

6.4.1 Sorting

248

6.4.2 Filtering

252

6.4.3 Grouping

259

6.5 Summary

262

7 Using OData

263

7.1 OData at a Glance

263

7.1.1 Northwind OData Service

264

7.1.2 Service Document

266

7.1.3 Service Metadata Document

267

7.1.4 Accessing Data

269

7.2 OData Model at a Glance

275

7.2.1 Service Metadata

277

7.2.2 Instantiating the OData Model in the SAP Web IDE

279

7.3 Reading Data

282

7.3.1 Reading Data Manually

282

7.3.2 Accessing Data via Data Binding

287

7.3.3 Best Practices

290

7.3.4 Displaying Additional Product Information

295

7.3.5 Displaying Navigation Properties

296

7.4 Filter, Sort, Expand, and Group

299

7.4.1 Filtering with $filter

299

7.4.2 Sorting with $orderby

305

7.4.3 Expanding with $expand

308

7.4.4 Grouping with group

312

7.5 Paging and Thresholds

313

7.6 Batch Mode

318

7.7 One-Way and Two-Way Bindings

320

7.7.1 One-Way Binding

320

7.7.2 Two-Way Binding

323

7.8 Writing Data

326

7.8.1 Creating an Entry

329

7.8.2 Updating an Entry

334

7.8.3 Deleting an Entry

336

7.9 Function Imports

337

7.10 Concurrency Control

341

7.11 Summary

344

8 Application Patterns and Examples

347

8.1 Layouts

348

8.1.1 Full-Screen Layout: sap.m.App

352

8.1.2 Split Screen Layout: sap.m.SplitApp

355

8.2 Floorplans

359

8.2.1 Worklist

360

8.2.2 Master-Detail

368

8.3 Additional Application Features

378

8.3.1 Not Found Handling

379

8.3.2 Error Handling

384

8.3.3 Busy Handling

386

8.3.4 Letterboxing

389

8.3.5 Headers and Footers

390

8.4 Running Apps in SAP Fiori Launchpad

393

8.4.1 SAP Fiori Launchpad Sandbox

393

8.4.2 Cross-Application Navigation

398

8.4.3 Register and Run in Production

399

8.5 SAP Fiori Reference Apps

402

8.5.1 Manage Products App

403

8.5.2 Shop App

404

8.6 Summary

405

9 Advanced Concepts

407

9.1 Writing Your Own Controls

407

9.1.1 SAPUI5 Control Structure

408

9.1.2 Implementing a Composite Control

414

9.2 Using Fragments

423

9.2.1 Creating Fragments

424

9.2.2 Embedding Fragments into Views

427

9.2.3 Using Dialogs in Fragments

432

9.3 SAP OData Annotations

435

9.3.1 Custom SAP OData 2.0 Annotations

435

9.3.2 OData 4.0 Annotations

438

9.4 Smart Controls

439

9.4.1 Smart Tables and Smart Filters Bar

445

9.4.2 Smart Form and Smart Fields with Value Help

448

9.5 Smart Templates

449

9.6 Summary

452

10 Making Applications Enterprise-Grade

457

10.1 Theming

457

10.1.1 Manual Restyling

458

10.1.2 UI Theme Designer

462

10.2 Security

468

10.2.1 Input Validation

468

10.2.2 Cross-Site Scripting

468

10.2.3 URLs and Whitelist Filtering

469

10.2.4 frameOptions and Central Whitelisting

470

10.3 Performance

471

10.3.1 Bundling and Component Preload

472

10.3.2 Minification and Uglification

472

10.4 Accessibility

486

10.4.1 Importance of Inclusion and Accessibility

486

10.4.2 SAPUI5 Accessibility Features

490

10.4.3 Making Your Applications Accessible

493

10.5 Summary

495

11 Debugging and Testing Code

497

11.1 Debugging

498

11.1.1 Tricks to Know

498

11.1.2 Debugging Support Tools

501

11.2 Writing Unit Tests

507

11.2.1 Setting up a QUnit Test Page

509

11.2.2 Writing a Unit Test for a Custom Control

511

11.2.3 Unit Tests for Apps

516

11.3 One-Page Acceptance Tests

524

11.3.1 Architecture

524

11.3.2 OPA Test Structure

525

11.3.3 Writing waitFor Functions

526

11.3.4 Writing an OPA Test

531

11.3.5 Application Lifecycle Handling

536

11.3.6 Structuring Tests with Page Objects

537

11.3.7 Full Application Test Setup

538

11.4 Mocking Data: Using the Mock Server

542

11.4.1 Basic Instantiation and Configuration

543

11.4.2 Advanced Concepts and Configuration

544

11.5 Linting Code

547

11.6 Summary

550

12 Don’ts

551

12.1 Worst Practices

551

12.1.1 Getting Application Styling All Wrong

551

12.1.2 Ignoring General Rules in SAPUI5 Application Development

555

12.1.3 Performance Breakers

556

12.2 How to Break your Apps during Updates

557

12.2.1 Using Private and Protected Methods or Properties in SAPUI5

558

12.2.2 Using Deprecated or Experimental APIs

558

12.2.3 Extend SAPUI5 Controls

559

12.3 Summary

559

Appendices

561

A IDE Setup

563

A.1 SAP Web IDE

563

A.2 WebStorm

579

B Accessing and Connecting to the Backend

589

B.1 Same-Origin Policy

589

B.2 Disable Web Security in Google Chrome

594

B.3 SAP HANA Cloud Platform Destinations

596

C App Deployment

605

C.1 SAP HANA Cloud Platform

605

C.2 SAP Web IDE and SAP HANA Cloud Connector

615

C.3 ABAP Server

625

C.4 Other Web Servers

636

D Cheat Sheets

639

D.1 Starting the App

639

D.2 Referencing Elements

640

D.3 JSON Model

642

D.4 OData Model

643

D.5 Bindings

646

D.6 Coding Conventions

647

D.7 JSDoc

648

D.8 Controls Cheat Sheet

650

E Additional Resources

651

E.1 openSAP Courses

651

E.2 Documentation

651

E.3 Websites

652

E.4 Books/E-Bites

653

E.5 Communities

653

E.6 GitHub Repositories

654

E.7 JavaScript Playgrounds

654

E.8 Tools

655

E.9 Google Chrome Plugins

655

F The Authors

657

Index

659