---

Before the application comes the prototype. With this guide to SAP Build, learn how to develop detailed, interactive prototypes of SAP Fiori and SAPUI5 applications. Enhance mockups by conducting user research, and collaborating on design projects. Request and implement feedback from end users and prepare your prototype to be turned into a fully-functional application. If you Build it, they will come.

---

... Preface ... 19

... Objective of This Book ... 19

... Target Audience of This Book ... 20

... How to Read This Book ... 20

... Acknowledgments ... 22

... Let´s Get Started ... 22

... Getting Started ... 23

1 ... What Is Prototyping? ... 25

1.1 ... Why Prototype? ... 26

1.2 ... The Role of Prototyping in Application Development ... 31

1.3 ... Variations of Prototypes ... 35

1.4 ... SAP Build as a Prototyping Tool ... 45

1.5 ... Summary ... 46

2 ... Accessing the SAP Build Environment ... 47

2.1 ... Creating a Trial Build Instance ... 47

2.2 ... Trial Instance Limitations ... 51

2.3 ... Accessing SAP Build ... 53

2.4 ... Summary ... 54

3 ... Exploring SAP Build ... 55

3.1 ... Navigation ... 55

3.2 ... Workspace ... 58

3.3 ... Tour ... 59

3.4 ... Gallery ... 59

3.5 ... Learning ... 61

3.6 ... Services ... 66

3.7 ... Blog ... 68

3.8 ... Community ... 69

3.9 ... Search ... 71

3.10 ... Account ... 72

3.11 ... Bottom Menu ... 74

3.12 ... Summary ... 74

4 ... Creating a New Project ... 75

4.1 ... Clone a Project from the Gallery ... 75

4.2 ... Creating a New Project ... 82

4.3 ... Project Cockpit ... 90

4.4 ... Summary ... 101

... Building Prototypes ... 103

5 ... Managing Pages and Files ... 105

5.1 ... Page Map ... 105

5.2 ... Adding Pages ... 115

5.3 ... Page Templates ... 123

5.4 ... Adding and Managing Files ... 132

5.5 ... Summary ... 138

6 ... Working with the User Interface Editor ... 139

6.1 ... User Interface Editor Overview ... 139

6.2 ... Summary ... 154

7 ... User Interface Controls and Properties ... 155

7.1 ... Page Templates ... 156

7.2 ... Action Controls ... 165

7.3 ... Tile Controls ... 183

7.4 ... Chart Controls ... 187

7.5 ... Container Controls ... 208

7.6 ... Display Controls ... 216

7.7 ... Layout Controls ... 237

7.8 ... List Controls ... 249

7.9 ... User Input Controls ... 261

7.10 ... Map Controls ... 283

7.11 ... Filter Bar Controls ... 289

7.12 ... Table Controls ... 292

7.13 ... Header Controls ... 298

7.14 ... Form Controls ... 305

7.15 ... Section Controls ... 311

7.16 ... Object Page Controls ... 313

7.17 ... Chart Cards ... 313

7.18 ... List Cards ... 322

7.19 ... Simple Cards ... 329

7.20 ... Stack Card Controls ... 332

7.21 ... SAP Leonardo Internet of Things Bridge Controls ... 334

7.22 ... Summary ... 337

8 ... Working with the Canvas ... 339

8.1 ... Essential Toolbar Functions ... 339

8.2 ... Page Elements and Properties ... 340

8.3 ... Adding Controls to the Canvas ... 347

8.4 ... Interacting with Controls on the Canvas ... 352

8.5 ... Control Icons ... 359

8.6 ... Working with Advanced Controls ... 361

8.7 ... Summary ... 367

9 ... Working with Data ... 369

9.1 ... Data Modeling Concepts and Sources ... 369

9.2 ... Modeling and Editing Data ... 372

9.3 ... Using Data in Prototypes ... 397

9.4 ... Summary ... 408

10 ... Sample Prototypes ... 409

10.1 ... Building a Low-Fidelity Prototype ... 409

10.2 ... Building a High-Fidelity Prototype ... 432

10.3 ... Summary ... 452

11 ... Finalizing Your Prototype ... 453

11.1 ... Preview Your Prototype ... 453

11.2 ... Publishing Your Prototype ... 460

11.3 ... Summary ... 463

12 ... Tracking Feedback with Studies ... 465

12.1 ... What Is a Feedback Study? ... 465

12.2 ... Benefits of a Feedback Study ... 466

12.3 ... Create a New Feedback Study ... 466

12.4 ... Study Execution ... 478

12.5 ... Study Results ... 486

12.6 ... How to Incorporate Study Results into Your Prototype ... 498

12.7 ... Summary ... 499

13 ... Taking the Prototype Forward ... 501

13.1 ... SAP Build and the SAP Cloud Platform ... 501

13.2 ... Preparing SAP Cloud Platform ... 503

13.3 ... Importing the Prototype to SAP Web IDE ... 511

13.4 ... Benefits of Using SAP Web IDE ... 522

---