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

1 What Is Prototyping?

25

1.1 Why Prototype?

26

1.1.1 Considerations for Prototyping

27

1.1.2 Ensuring Prototype Success

29

1.2 The Role of Prototyping in Application Development

31

1.2.1 Classic Software Development Lifecycle and Methodology

32

1.2.2 The Prototyping Software Development Lifecycle and Methodology

33

1.2.3 Design-Led Development

35

1.3 Variations of Prototypes

35

1.3.1 Low-Fidelity Prototypes

35

1.3.2 High-Fidelity Prototypes

39

1.3.3 Examples of High-Fidelity Prototypes

42

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.5.1 Learning Cards

63

3.5.2 Courses

65

3.6 Services

66

3.6.1 User Experience Design Services

67

3.6.2 User Experience Value Calculator

67

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.2.1 Creating a New Project in the SAP Build Desktop Client

83

4.2.2 Creating a Project from a Mobile Device

89

4.3 Project Cockpit

90

4.3.1 Navigation Panel

91

4.3.2 Persona List

94

4.3.3 Prototype Page Map

95

4.3.4 Feedback Studies

97

4.3.5 Invite Team

100

4.3.6 Action Buttons

101

4.4 Summary

101

5 Managing Pages and Files

105

5.1 Page Map

105

5.1.1 Add New Pages

107

5.1.2 Duplicate, Delete, and Rename pages

109

5.1.3 Rearrange Page Order

111

5.1.4 Add Hotspots and Connections between Pages

111

5.1.5 Open UI Editor

114

5.2 Adding Pages

115

5.2.1 New Project Initial Page Creation Screen

115

5.2.2 Adding Pages from the Page Map

121

5.2.3 Adding Pages from the UI Editor

121

5.3 Page Templates

123

5.3.1 Standard Page Templates

123

5.3.2 Additional and Advanced Templates

127

5.4 Adding and Managing Files

132

5.4.1 Files List

133

5.4.2 Upload File

134

5.4.3 Preview File

135

5.4.4 File Options Menu

136

5.4.5 Capturing Images from Mobile Devices

137

5.5 Summary

138

6 Working with the User Interface Editor

139

6.1 User Interface Editor Overview

139

6.1.1 Menu Bar

141

6.1.2 Toolbar

142

6.1.3 Controls, Images, and Data Pane

147

6.1.4 OUTLINE Pane

150

6.1.5 PROPERTIES and DISCUSSION Panes

152

6.1.6 Page Canvas

153

6.2 Summary

154

7 User Interface Controls and Properties

155

7.1 Page Templates

156

7.1.1 Footer

157

7.1.2 Freestyle Page

157

7.1.3 Responsive Page

158

7.1.4 Object Page

159

7.1.5 Image Page

163

7.1.6 Worklist Page

163

7.1.7 List Report Page

164

7.2 Action Controls

165

7.2.1 Button

165

7.2.2 Link

166

7.2.3 Hotspot

168

7.2.4 Toggle Button

169

7.2.5 Segmented Button

170

7.2.6 Navigation List

172

7.2.7 Object Marker

174

7.2.8 Breadcrumbs

175

7.2.9 Menu Button

176

7.2.10 Multi-Dropdown List

179

7.2.11 Step Input

181

7.3 Tile Controls

183

7.3.1 Tile

183

7.3.2 Tile Content

184

7.3.3 Numeric Content

185

7.3.4 News Content

186

7.4 Chart Controls

187

7.4.1 Chart Data Editor

187

7.4.2 Chart Dimensions and Measures

188

7.4.3 Bar Chart

190

7.4.4 Line Chart

191

7.4.5 Column Chart

192

7.4.6 Pie Chart

193

7.4.7 Horizontal Bullet Chart

194

7.4.8 Vertical Bullet Chart

195

7.4.9 Stacked Bar Chart

196

7.4.10 Stacked Column Chart

197

7.4.11 Scatter Chart

198

7.4.12 Bubble Chart

199

7.4.13 Vertical Waterfall Chart

200

7.4.14 Horizontal Waterfall Chart

201

7.4.15 Heatmap Chart

202

7.4.16 Donut Chart

203

7.4.17 Micro Column Chart

204

7.4.18 Micro Radial Chart

205

7.4.19 Micro Bullet Chart

206

7.5 Container Controls

208

7.5.1 Icon Tab Bar

208

7.5.2 Icon Tab

210

7.5.3 Tab Separator

211

7.5.4 Image Carousel

212

7.5.5 Slide Tile

213

7.5.6 Message Strip

214

7.6 Display Controls

216

7.6.1 Item Header

216

7.6.2 Bar

217

7.6.3 Table Toolbar

217

7.6.4 Item Status

218

7.6.5 Item Attribute

219

7.6.6 Image

220

7.6.7 Label

221

7.6.8 Text

223

7.6.9 Title

224

7.6.10 Item Identifier

225

7.6.11 Item Number

226

7.6.12 Icon

227

7.6.13 Toolbar Spacer

229

7.6.14 Progress Indicator

229

7.6.15 Currency

231

7.6.16 Formatted Text

232

7.6.17 Draft Indicator

233

7.6.18 Timeline

234

7.7 Layout Controls

237

7.7.1 Form

237

7.7.2 Form Section

238

7.7.3 Form Row

239

7.7.4 Grid

240

7.7.5 Horizontal Box

241

7.7.6 Vertical Box

243

7.7.7 Nested Box

244

7.7.8 Panel

245

7.7.9 Block Layout

247

7.8 List Controls

249

7.8.1 List

249

7.8.2 List Item

251

7.8.3 Standard List Item

253

7.8.4 Table

254

7.8.5 Feed List

258

7.8.6 Feed List Item

259

7.8.7 File Uploader

260

7.9 User Input Controls

261

7.9.1 Text Area

262

7.9.2 Calendar

263

7.9.3 Checkbox

264

7.9.4 Dropdown List

266

7.9.5 Date Picker

267

7.9.6 Date Time Input

269

7.9.7 Input

270

7.9.8 Search Field

271

7.9.9 Slider

273

7.9.10 Switch

274

7.9.11 Radio Buttons

275

7.9.12 Calendar Date Interval

276

7.9.13 Rating Indicator

278

7.9.14 Select

279

7.9.15 Dropdown List Item

281

7.9.16 Select Item

282

7.10 Map Controls

283

7.10.1 Map

283

7.10.2 Resource

284

7.10.3 Legend

285

7.10.4 Legend Item

286

7.10.5 Circle

286

7.10.6 Route

287

7.10.7 Spot

288

7.11 Filter Bar Controls

289

7.11.1 Dropdown List Filter

289

7.11.2 Filter

290

7.11.3 Custom Filter

291

7.12 Table Controls

292

7.12.1 Action Button

292

7.12.2 Code Column

293

7.12.3 Numerical Column

294

7.12.4 Standard Column

295

7.12.5 Link Column

296

7.12.6 Custom Column

297

7.13 Header Controls

298

7.13.1 Code Header Form Element

299

7.13.2 Numerical Header Form Element

299

7.13.3 KPI

300

7.13.4 Header Contact

301

7.13.5 Header Form

303

7.13.6 Header Form Contact

303

7.13.7 Standard Header Form Element

305

7.14 Form Controls

305

7.14.1 Form Group

306

7.14.2 Code Form Element

306

7.14.3 Numerical Form Element

307

7.14.4 Standard Form Element

308

7.14.5 Link Form Element

309

7.14.6 Custom Form Element

310

7.15 Section Controls

311

7.15.1 Contact List

311

7.16 Object Page Controls

313

7.16.1 Section

313

7.17 Chart Cards

313

7.17.1 Donut Chart Card

315

7.17.2 Line Chart Card

315

7.17.3 Bubble Chart Card

316

7.17.4 Column Chart Card

317

7.17.5 Stacked Column Chart Card

318

7.17.6 Combined Chart Card

319

7.17.7 Scatter Plot Chart Card

320

7.17.8 Vertical Bullet Chart Card

321

7.18 List Cards

322

7.18.1 Condensed List Card

323

7.18.2 Condensed Bar List Card

324

7.18.3 Extended List Card

325

7.18.4 Extended Bar List Card

326

7.18.5 Table Card

328

7.19 Simple Cards

329

7.19.1 Image Card

329

7.19.2 Link List Card

330

7.19.3 Stack Card

331

7.20 Stack Card Controls

332

7.20.1 Form Element

332

7.20.2 Footer Action

333

7.21 SAP Leonardo Internet of Things Bridge Controls

334

7.21.1 KPI Card

334

7.21.2 Geomap Card

335

7.21.3 Geomap Form Element

336

7.21.4 Geomap Link Form Element

337

7.22 Summary

337

8 Working with the Canvas

339

8.1 Essential Toolbar Functions

339

8.1.1 Undo/Redo

339

8.1.2 Copy/Paste/Duplicate

340

8.2 Page Elements and Properties

340

8.2.1 Page Property Definitions

341

8.2.2 Changing the Page Title

343

8.2.3 Page Header and Footer

344

8.3 Adding Controls to the Canvas

347

8.3.1 Adding New Controls

347

8.3.2 Control Operations Using the Context Menu

350

8.3.3 Copying and Duplicating Existing Controls

350

8.4 Interacting with Controls on the Canvas

352

8.4.1 Selecting Controls

353

8.4.2 Selecting Multiple Controls

354

8.4.3 Moving and Rearranging Controls

356

8.4.4 Modifying Text in Controls

358

8.5 Control Icons

359

8.6 Working with Advanced Controls

361

8.6.1 Forms

361

8.6.2 Tables

362

8.6.3 Block Layouts

364

8.6.4 Panels

366

8.7 Summary

367

9 Working with Data

369

9.1 Data Modeling Concepts and Sources

369

9.1.1 Data Modeling

370

9.1.2 Data Sources

371

9.2 Modeling and Editing Data

372

9.2.1 Modeling Data

372

9.2.2 Data Editor Overview and Manual Data Modeling

374

9.2.3 Custom Property Formulas

380

9.2.4 Modeling in Excel

384

9.2.5 Using Entity Data Model XML files

391

9.2.6 Import an API from the SAP API Business Hub

392

9.2.7 Importing and Exporting Data

396

9.3 Using Data in Prototypes

397

9.3.1 Binding Data to Pages

397

9.3.2 Binding Data to Controls

399

9.3.3 Binding Data in Templates

402

9.3.4 Binding Images to Controls

403

9.3.5 Binding Data to Charts

404

9.4 Summary

408

10 Sample Prototypes

409

10.1 Building a Low-Fidelity Prototype

409

10.1.1 Beginning Your Low-Fidelity Prototype

410

10.1.2 Sending a Prototype to End Users

423

10.2 Building a High-Fidelity Prototype

432

10.2.1 Working with Images

432

10.2.2 Working with Icons

436

10.2.3 Working with Tables

438

10.3 Summary

452

11 Finalizing Your Prototype

453

11.1 Preview Your Prototype

453

11.1.1 Preview Modes

454

11.1.2 Interaction

459

11.2 Publishing Your Prototype

460

11.2.1 Sharing a Link

461

11.2.2 Sharing via Slack

461

11.2.3 Share via ZIP File

462

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.3.1 Associate Questions to Images or Pages

469

12.3.2 Create New Study Questions

471

12.3.3 User Response Options

472

12.3.4 Preview Study

473

12.3.5 Publish Study to Capture Feedback

475

12.3.6 Sharing Study with Others via Email

476

12.4 Study Execution

478

12.4.1 Starting the Study

478

12.4.2 Providing Feedback

482

12.4.3 Submitting Feedback

486

12.5 Study Results

486

12.5.1 Viewing the Study Results

487

12.5.2 Study Metrics

487

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.1.1 What Is the SAP Cloud Platform?

501

13.1.2 What Is SAP Web Integrated Development Environment?

502

13.1.3 Example Workflow: Prototype to Production

502

13.2 Preparing SAP Cloud Platform

503

13.2.1 Enabling Services in SAP Cloud Platform

504

13.2.2 Creating New Destinations

506

13.3 Importing the Prototype to SAP Web IDE

511

13.3.1 Importing via Direct Integration

511

13.3.2 Importing from Trusted Identity Provider

517

13.3.3 Importing from a ZIP file

518

13.4 Benefits of Using SAP Web IDE

522

13.5 Restrictions

523

13.6 Summary

524

14 Future Capabilities, Teach Design, Get Involved

525

14.1 Design Doing in the Classroom

525

14.2 Future Capabilities

528

14.2.1 Citizen Development

528

14.2.2 Functionality Enhancements

529

14.3 Call to Action: Getting Involved

531