Preface

15

Purpose of This Book

15

Target Audience

16

Structure of This Book

16

Acknowledgments

18

Stefan Haas

19

Bince Mathew

19

1 SAP S/4HANA Architecture

23

1.1 Core Architecture

23

1.1.1 Overview

24

1.1.2 OData

25

1.1.3 SAP HANA

26

1.1.4 SAP NetWeaver ABAP

27

1.1.5 SAP Fiori Front-end Server Based on SAP NetWeaver Gateway

27

1.1.6 SAPUI5

28

1.1.7 SAP Fiori Launchpad

28

1.2 Backend

29

1.2.1 Virtual Data Model

29

1.2.2 The Transactional Architecture (BOPF)

37

1.2.3 Analytics

40

1.3 User Experience

41

1.3.1 SAP Fiori

42

1.3.2 SAP Fiori Launchpad

42

1.4 SAP S/4HANA Editions

42

1.4.1 On-Premise Architecture

42

1.4.2 Cloud Architecture

43

1.4.3 Release Strategies

45

1.5 SAP Cloud Platform

46

1.6 Summary

47

2 SAP Fiori and the Design-Led Development Process

49

2.1 What Is SAP Fiori?

49

2.1.1 SAP Fiori 1.0

50

2.1.2 SAP Fiori 2.0

51

2.1.3 Design Principles

52

2.1.4 Responsiveness and Adaptiveness

54

2.1.5 SAP Fiori Launchpad

54

2.2 Design-Led Development Process

62

2.2.1 Discover

63

2.2.2 Design

64

2.2.3 Develop

64

2.3 Different SAP Fiori App Types

64

2.3.1 Freestyle

64

2.3.2 SAP Fiori Elements

65

2.4 Prototyping Tools

77

2.4.1 Axure

78

2.4.2 SAP Build

78

2.4.3 Building a Prototype Using the SAP Build Tool

80

2.5 Summary

94

3 ABAP Programing Model for SAP Fiori

95

3.1 Core Data Services

95

3.2 SAP Gateway

97

3.3 OData

99

3.3.1 Overview

99

3.3.2 OData Service Creation

101

3.4 Service Adaptation Description Language

109

3.4.1 Data Model Definition Phase

110

3.4.2 Service Implementation Phase

111

3.5 Business Object Processing Framework

113

3.5.1 Read-Only Application with Quick Actions

113

3.5.2 New Application without Draft

114

3.5.3 Draft-Enabled Application

115

3.5.4 New Application with Draft

115

3.6 SAP Fiori

116

3.7 Summary

117

4 Developing an SAP Fiori Elements List Report and Object Page

121

4.1 Core Data Services Views

121

4.1.1 ABAP Development Tools in Eclipse

122

4.1.2 Introduction to the Data Model

125

4.1.3 Creating Basic Interface Core Data Services Views

130

4.1.4 Adding Calculated Fields

136

4.1.5 Adding Data Control Language Files

146

4.2 Transactional Processing with the Business Object Processing Framework

150

4.2.1 Generating a BOPF Business Object from a CDS Model

150

4.2.2 Testing Business Object Nodes

155

4.2.3 Creating a Quick Action Using Business Object Processing Framework

156

4.3 Virtual Elements in Core Data Services

160

4.3.1 Adding a Virtual Element to a Core Data Services View

160

4.3.2 Implementing an ABAP Code Exit to Populate the Virtual Element

160

4.4 Creating an OData Service

161

4.4.1 Auto-Exposing the OData Service

161

4.4.2 Activating the OData Service on the SAP Gateway Hub System

162

4.4.3 Testing the OData Service Using the SAP Gateway Client

164

4.5 Adding User Interface Annotations

164

4.5.1 Creating a Metadata Extension File

165

4.5.2 User Interface-Relevant Annotations for the List Report

166

4.5.3 User Interface Annotations for the Object Page

172

4.6 Generating a List Report Template in SAP Web IDE Full-Stack

177

4.7 Extending the User Interface

181

4.7.1 Implementing User Interface Extensions via Breakout

181

4.7.2 Adding a QUnit Unit Test

184

4.8 List Report Application versus Worklist Application

187

4.9 Summary

187

5 Developing an Overview Page

189

5.1 Core Data Services Views

189

5.1.1 Creating a Simple Core Data Services View

190

5.1.2 Adding a Data Control File

199

5.2 Adding User Interface Annotations

199

5.2.1 Creating Annotations for an Analytical Card

200

5.2.2 Creating Annotations for a List Card

202

5.3 Creating an OData Service

206

5.3.1 Creating the OData Project

206

5.3.2 Adding Overview Page Card CDS Views into the Project

206

5.4 Exposing CDS Views as an OData Service

208

5.4.1 Importing the OData Service

208

5.4.2 Registering the OData Service

209

5.5 Generating an Overview Page Template Project in SAP Web IDE

210

5.5.1 Generating the Basic Overview Page Layout

210

5.5.2 Adding the List Analytical Card

215

5.5.3 Adding the Standard List Card

218

5.5.4 Adding the Bar List Card

220

5.5.5 Adding the Table Card

222

5.5.6 Overview Page Output

224

5.6 Summary

225

6 Developing an Analytical List Page

227

6.1 Introduction

227

6.2 Building the Required CDS Views

227

6.2.1 Building Dimension Views

229

6.2.2 Building Cube Views

229

6.2.3 Building the Main Query View

231

6.3 Configuring the Title Area

232

6.4 Configuring the Filter Area

236

6.5 Configuring the Content Area

239

6.5.1 Configuring the Default Chart

239

6.5.2 Configuring the Table

241

6.6 Combining All the UI Annotations in the Metadata Extension View

243

6.7 Generating an Analytical List Page from SAP Web IDE

247

6.7.1 Adding Key Performance Indicators to the Project

251

6.7.2 Adding Visual Filters to the Project

253

6.8 Summary

259

7 Developing a Freestyle Application

261

7.1 Smart Controls

261

7.1.1 Smart Field

262

7.1.2 Smart Link

263

7.1.3 Smart Form

264

7.1.4 Smart Table

266

7.1.5 Smart Filter Bar

268

7.2 Application Development with the SAP Web IDE Full-Stack

270

7.2.1 Setting Up an OData Service

270

7.2.2 Object Creation Page Using Smart Fields and Forms

276

7.2.3 List Report Page Using Smart Table and Filter Bar

283

7.2.4 Add an OPA5 Integration Test

285

7.3 Summary

295

8 Deploying Applications to the SAP Fiori Launchpad

297

8.1 Uploading a User Interface to the ABAP Frontend Server

297

8.1.1 Deploying Applications from SAP Web IDE

297

8.1.2 Uploading Applications Directly into the Frontend Server

300

8.2 SAP Fiori Launchpad Admin Page

304

8.2.1 Catalogs

305

8.2.2 Groups

306

8.2.3 Roles

306

8.3 Creating the Technical Catalog and Business Catalog

307

8.4 Creating the Application Tiles

309

8.5 Creating Groups for Application Tiles

320

8.6 Creating and Assigning a Transaction PFCG Role to Users

322

8.7 Setting Up Intent-Based Cross-Application Navigation from OVP to LRP

329

8.8 Summary

331

9 Version Control in SAP Web IDE Using Git

335

9.1 Git Introduction

335

9.2 Git Basics

335

9.2.1 Creating Initial Project Repositories Using GitHub

337

9.2.2 Initializing the Local Repository for the Projects in SAP Web IDE

339

9.2.3 Linking the Local Repository with the Remote Repository in GitHub

340

9.2.4 Submitting Code to Repository (Stage, Commit, Push)

341

9.2.5 Cloning the Project into SAP Web IDE

347

9.2.6 Getting Code from the Remote Branch (Fetch, Merge, Pull)

350

9.2.7 Working with Branches

355

9.3 Summary

360

10 Automated Testing

361

10.1 Backend Test Automation

363

10.1.1 Unit Testing (ABAP Unit)

364

10.1.2 Unit Testing (Core Data Services Test Double Framework)

376

10.2 Frontend Test Automation

380

10.2.1 Unit Testing (QUnit)

381

10.3 End-to-End Test Automation Tools

386

10.3.1 Setting Up Nightwatch.js

387

10.3.2 Creating the Create Purchase Document End-to-End Nightwatch.js Test

388

10.3.3 Running the Create Purchase Document End-to-End Nightwatch.js Test

389

10.4 Summary

390

11 Continuous Integration

393

11.1 Introduction

394

11.1.1 Continuous Integration

394

11.1.2 Continuous Delivery

395

11.1.3 Continuous Deployment

396

11.2 Setting Up a Continuous Integration Pipeline for SAPUI5 on the ABAP Server

397

11.2.1 Setting Up a Local Jenkins Automation Server

398

11.2.2 Creating an Initial Jenkinsfile

400

11.2.3 Creating the Continuous Deployment Pipeline

401

11.2.4 SAPUI5 Grunt Plug-ins

403

11.2.5 Implementing the Build Stage

404

11.2.6 Automatically Triggering Builds on Git Push

407

11.2.7 Implementing the Test Stage

408

11.2.8 Implementing the Deploy Stage

411

11.3 Continuous Integration on the ABAP Server

414

11.3.1 Quality Checking Using the ABAP Test Cockpit

415

11.3.2 Scheduling ABAP Unit Tests Using the ABAP Unit Runner

418

11.4 Summary

421

Appendices

423

A Developing Applications on the SAP Cloud Platform

423

A.1 Introduction to SAP Cloud Platform

423

A.2 SAP Cloud Platform Application Programming Model

424

A.3 Developing an App on SAP Cloud Platform Using SAP Web IDE Full-Stack

426

A.4 Summary

451

B The Authors

453