Preface

15

Objective and Target Audience

15

How to Read This Book

16

1 Why SAP Fiori Elements?

21

1.1 Historical Development of User Interfaces at SAP

22

1.1.1 Emergence of Web Interfaces

23

1.1.2 Implementation of SAPUI5 and SAP Fiori

24

1.1.3 Templates for Recurring Requirements

27

1.2 Requirements for User Interfaces in SAP On-Premise and Cloud Products

32

1.2.1 On-Premise and Cloud Products

32

1.2.2 Consistent User Experience

32

1.3 Low-Code Development

35

1.4 Example Application

36

1.5 Summary

37

2 Overview of SAPUI5 and SAP Fiori

39

2.1 Introduction to SAPUI5

39

2.1.1 Comparison with Other Frameworks

40

2.1.2 Release Cycle

40

2.1.3 Responsive Design

40

2.1.4 Model View Controller

40

2.2 Standardized Development with SAP Fiori

43

2.2.1 SAPUI5 or SAP Fiori?

44

2.2.2 Versions of SAP Fiori

46

2.2.3 SAP Fiori Design Guidelines

49

2.2.4 SAP Fiori Launchpad

51

2.2.5 Extension Concept

58

2.3 Summary

63

3 OData: The Basis of All SAP Fiori Elements Applications

65

3.1 Introduction to the OData Standard

66

3.2 CRUDQ Methods

70

3.2.1 Query

71

3.2.2 Read

73

3.2.3 Delete

76

3.2.4 Create

76

3.2.5 Update

78

3.3 Filtering, Sorting, and Other Functions

78

3.3.1 Filtering

79

3.3.2 Sorting

83

3.3.3 Expand

83

3.3.4 Pagination

84

3.3.5 Formatting the Response

84

3.3.6 Select

84

3.3.7 Inlinecount and Count

85

3.4 Managing OData Services in the SAP System

85

3.5 OData and Core Data Services Annotations

92

3.6 Summary

95

4 Programming Models

97

4.1 Why Do We Need New Programming Models for the Cloud?

98

4.2 SAP Cloud Application Programming Model

100

4.3 ABAP RESTful Application Programming Model

110

4.4 Summary

115

5 Development Tools

117

5.1 Cloud Development Environments

117

5.1.1 SAP Web IDE Full-Stack

117

5.1.2 SAP Business Application Studio

125

5.2 Local Development Environments

134

5.2.1 SAP Web IDE, Personal Edition

135

5.2.2 Eclipse

140

5.2.3 Visual Studio Code

145

5.3 Summary

147

6 Introduction to Floorplans and Application Scenarios

151

6.1 Available Floorplans

151

6.1.1 Overview Page

152

6.1.2 Floorplans for Lists

154

6.1.3 Object Page

158

6.2 Use Cases for the Floorplans

159

6.3 Generic Annotations

160

6.3.1 UI.HeaderInfo

161

6.3.2 UI.selectionField

161

6.3.3 UI.lineItem

162

6.3.4 UI.hidden

162

6.4 Summary

162

7 Overview Page

163

7.1 Introduction

163

7.1.1 Structure of an Overview Page

163

7.1.2 Using Overview Pages

169

7.2 Annotations for Overview Pages

172

7.3 Core Data Services Views for Overview Pages

173

7.4 Developing an Overview Page in SAP Business Application Studio

175

7.4.1 Create a Project

175

7.4.2 Add a Table Card

178

7.4.3 Add an Analytical Card

183

7.4.4 Add a List Card

188

7.4.5 Add a Stack Card

191

7.5 Developing an Overview Page in SAP Web IDE

193

7.5.1 Create a Project

193

7.5.2 Define Cards

196

7.6 Summary

198

8 List Report and Worklist

199

8.1 Introduction

199

8.1.1 Dynamic Page Header

200

8.1.2 Content Area

202

8.1.3 Footer Toolbar

208

8.2 Annotations for List Reports and Worklists

209

8.2.1 Annotations for List Reports

210

8.2.2 Annotations for Worklists

210

8.3 Development of a List Report in SAP Web IDE

211

8.3.1 Create a Project

211

8.3.2 Maintaining Annotations in the Core Data Services View

215

8.3.3 Maintaining Annotations Locally

219

8.4 Developing a List Report in SAP Business Application Studio

222

8.4.1 Create a Project

222

8.4.2 Maintain Annotations

226

8.5 Developing a Worklist in SAP Business Application Studio

227

8.5.1 Create a Project

228

8.5.2 Maintaining Annotations Locally

230

8.6 Summary

235

9 Analytical List Page

237

9.1 Introduction

238

9.1.1 Overview

238

9.1.2 Header

241

9.1.3 Content Area

244

9.2 Annotations for Analytical List Pages

245

9.3 Core Data Services Views for Analytical List Page

249

9.4 Developing Analytical List Pages in SAP Business Application Studio

252

9.4.1 Create a Project

252

9.4.2 Define a Visual Filter

255

9.4.3 Display Key Performance Indicators

259

9.5 Developing an Analytical List Page in SAP Web IDE

264

9.6 Further Development of the Analytical List Page

267

9.7 Summary

270

10 Object Page

271

10.1 Introduction

271

10.1.1 Header

272

10.1.2 Content Area

274

10.1.3 Footer Toolbar

276

10.2 Annotations for the Object Pages

277

10.2.1 Header Annotations

277

10.2.2 Annotations for Facets in the Header and Content Area Sections

280

10.2.3 Semantic Annotations

285

10.3 Core Data Services View for an Object Page

288

10.4 Development of an Object Page in SAP Web IDE

289

10.5 Development of an Object Page in SAP Business Application Studio

297

10.6 Summary

302

11 Deployment

305

11.1 Continuous Integration and Continuous Delivery

305

11.2 Deployment Options

307

11.2.1 On-Premise Deployment

308

11.2.2 Cloud Deployment

311

11.2.3 Mobile Deployment

314

11.3 Configuring SAP Fiori Launchpad

316

11.3.1 On-Premise Configuration

317

11.3.2 Configuration in the SAP BTP, Neo Environment

327

11.3.3 Configuration in the SAP BTP, Cloud Foundry Environment

332

11.4 Summary

337

12 Extensions

339

12.1 Developing with Guided Development

340

12.2 Extending Overview Pages

345

12.2.1 Adding a Custom Filter

345

12.2.2 Developing a User-Specific Card

351

12.3 Extending List Reports

355

12.3.1 Adding a User-Specific Action

356

12.3.2 Adding a User-Specific Filter

359

12.4 Extending Object Pages

361

12.5 Extending Analytical List Pages

364

12.5.1 Adding Default Filters

364

12.5.2 Adding a User-Specific Filter

366

12.6 Implementing an Adaption Project

370

12.6.1 Overview

370

12.6.2 Creating an Adaption Project

371

12.6.3 Building Extensions in the Graphical Editor

374

12.6.4 Deploying an Adaption Project

379

12.7 Summary

383

13 Navigation

385

13.1 Internal Navigation

385

13.1.1 General Annotations for Navigation

386

13.1.2 Methods of Declaring Navigation

387

13.2 External Navigation

391

13.2.1 General Annotations for Navigation

391

13.2.2 Methods of Declaring Navigation

393

13.2.3 Open Navigation Target in a New Browser Tab

395

13.3 Summary

396

A Important Annotations

397

A.1 User Interface Annotations

397

A.2 Analytics Annotations

399

A.3 Consumption Annotations

399

A.4 Common Annotations

400

A.5 Semantics Annotations

400