Table of Contents

Open all
Close all
Preface
17
Target Audience
17
Objective
17
How to Read This Book
18
Acknowledgments
21
PART I Introduction
23
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
PART II Building Applications with SAPUI5
61
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
PART III Finishing Touches
541
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
Index
725