| Preface |
|
19 | (6) |
| Part I Getting Started |
|
|
|
|
25 | (22) |
|
|
|
26 | (5) |
|
1.1.1 Considerations for Prototyping |
|
|
27 | (2) |
|
1.1.2 Ensuring Prototype Success |
|
|
29 | (2) |
|
1.2 The Role of Prototyping in Application Development |
|
|
31 | (4) |
|
1.2.1 Classic Software Development Lifecycle and Methodology |
|
|
32 | (1) |
|
1.2.2 The Prototyping Software Development Lifecycle and Methodology |
|
|
33 | (2) |
|
1.2.3 Design-Led Development |
|
|
35 | (1) |
|
1.3 Variations of Prototypes |
|
|
35 | (10) |
|
1.3.1 Low-Fidelity Prototypes |
|
|
35 | (4) |
|
1.3.2 High-Fidelity Prototypes |
|
|
39 | (3) |
|
1.3.3 Examples of High-Fidelity Prototypes |
|
|
42 | (3) |
|
1.4 SAP Build as a Prototyping Tool |
|
|
45 | (1) |
|
|
|
46 | (1) |
|
2 Accessing the SAP Build Environment |
|
|
47 | (8) |
|
2.1 Creating a Trial Build Instance |
|
|
47 | (4) |
|
2.2 Trial Instance Limitations |
|
|
51 | (2) |
|
|
|
53 | (1) |
|
|
|
54 | (1) |
|
|
|
55 | (20) |
|
|
|
55 | (3) |
|
|
|
58 | (1) |
|
|
|
59 | (1) |
|
|
|
59 | (2) |
|
|
|
61 | (5) |
|
|
|
63 | (2) |
|
|
|
65 | (1) |
|
|
|
66 | (2) |
|
3.6.1 User Experience Design Services |
|
|
67 | (1) |
|
3.6.2 User Experience Value Calculator |
|
|
67 | (1) |
|
|
|
68 | (1) |
|
|
|
69 | (2) |
|
|
|
71 | (1) |
|
|
|
72 | (2) |
|
|
|
74 | (1) |
|
|
|
74 | (1) |
|
|
|
75 | (30) |
|
4.1 Clone a Project from the Gallery |
|
|
75 | (7) |
|
4.2 Creating a New Project |
|
|
82 | (8) |
|
4.2.1 Creating a New Project in the SAP Build Desktop Client |
|
|
83 | (6) |
|
4.2.2 Creating a Project from a Mobile Device |
|
|
89 | (1) |
|
|
|
90 | (11) |
|
|
|
91 | (3) |
|
|
|
94 | (1) |
|
|
|
95 | (2) |
|
|
|
97 | (3) |
|
|
|
100 | (1) |
|
|
|
101 | (1) |
|
|
|
101 | (4) |
| Part II Building Prototypes |
|
|
5 Managing Pages and Files |
|
|
105 | (34) |
|
|
|
105 | (10) |
|
|
|
107 | (2) |
|
5.1.2 Duplicate, Delete, and Rename pages |
|
|
109 | (2) |
|
5.1.3 Rearrange Page Order |
|
|
111 | (1) |
|
5.1.4 Add Hotspots and Connections between Pages |
|
|
111 | (3) |
|
|
|
114 | (1) |
|
|
|
115 | (8) |
|
5.2.1 New Project Initial Page Creation Screen |
|
|
115 | (6) |
|
5.2.2 Adding Pages from the Page Map |
|
|
121 | (1) |
|
5.2.3 Adding Pages from the UI Editor |
|
|
121 | (2) |
|
|
|
123 | (9) |
|
5.3.1 Standard Page Templates |
|
|
123 | (4) |
|
5.3.2 Additional and Advanced Templates |
|
|
127 | (5) |
|
5.4 Adding and Managing Files |
|
|
132 | (6) |
|
|
|
133 | (1) |
|
|
|
134 | (1) |
|
|
|
135 | (1) |
|
|
|
136 | (1) |
|
5.4.5 Capturing Images from Mobile Devices |
|
|
137 | (1) |
|
|
|
138 | (1) |
|
6 Working with the User Interface Editor |
|
|
139 | (16) |
|
6.1 User Interface Editor Overview |
|
|
139 | (15) |
|
|
|
141 | (1) |
|
|
|
142 | (5) |
|
6.1.3 Controls, Images, and Data Pane |
|
|
147 | (3) |
|
|
|
150 | (2) |
|
6.1.5 PROPERTIES and DISCUSSION Panes |
|
|
152 | (1) |
|
|
|
153 | (1) |
|
|
|
154 | (1) |
|
7 User Interface Controls and Properties |
|
|
155 | (184) |
|
|
|
156 | (9) |
|
|
|
157 | (1) |
|
|
|
157 | (1) |
|
|
|
158 | (1) |
|
|
|
159 | (4) |
|
|
|
163 | (1) |
|
|
|
163 | (1) |
|
|
|
164 | (1) |
|
|
|
165 | (18) |
|
|
|
165 | (1) |
|
|
|
166 | (2) |
|
|
|
168 | (1) |
|
|
|
169 | (1) |
|
|
|
170 | (2) |
|
|
|
172 | (2) |
|
|
|
174 | (1) |
|
|
|
175 | (1) |
|
|
|
176 | (3) |
|
7.2.10 Multi-Dropdown List |
|
|
179 | (2) |
|
|
|
181 | (2) |
|
|
|
183 | (4) |
|
|
|
183 | (1) |
|
|
|
184 | (1) |
|
|
|
185 | (1) |
|
|
|
186 | (1) |
|
|
|
187 | (21) |
|
|
|
187 | (1) |
|
7.4.2 Chart Dimensions and Measures |
|
|
188 | (2) |
|
|
|
190 | (1) |
|
|
|
191 | (1) |
|
|
|
192 | (1) |
|
|
|
193 | (1) |
|
7.4.7 Horizontal Bullet Chart |
|
|
194 | (1) |
|
7.4.8 Vertical Bullet Chart |
|
|
195 | (1) |
|
|
|
196 | (1) |
|
7.4.10 Stacked Column Chart |
|
|
197 | (1) |
|
|
|
198 | (1) |
|
|
|
199 | (1) |
|
7.4.13 Vertical Waterfall Chart |
|
|
200 | (1) |
|
7.4.14 Horizontal Waterfall Chart |
|
|
201 | (1) |
|
|
|
202 | (1) |
|
|
|
203 | (1) |
|
7.4.17 Micro Column Chart |
|
|
204 | (1) |
|
7.4.18 Micro Radial Chart |
|
|
205 | (1) |
|
7.4.19 Micro Bullet Chart |
|
|
206 | (2) |
|
|
|
208 | (8) |
|
|
|
208 | (2) |
|
|
|
210 | (1) |
|
|
|
211 | (1) |
|
|
|
212 | (1) |
|
|
|
213 | (1) |
|
|
|
214 | (2) |
|
|
|
216 | (21) |
|
|
|
216 | (1) |
|
|
|
217 | (1) |
|
|
|
217 | (1) |
|
|
|
218 | (1) |
|
|
|
219 | (1) |
|
|
|
220 | (1) |
|
|
|
221 | (2) |
|
|
|
223 | (1) |
|
|
|
224 | (1) |
|
|
|
225 | (1) |
|
|
|
226 | (1) |
|
|
|
227 | (2) |
|
|
|
229 | (1) |
|
7.6.14 Progress Indicator |
|
|
229 | (2) |
|
|
|
231 | (1) |
|
|
|
232 | (1) |
|
|
|
233 | (1) |
|
|
|
234 | (3) |
|
|
|
237 | (12) |
|
|
|
237 | (1) |
|
|
|
238 | (1) |
|
|
|
239 | (1) |
|
|
|
240 | (1) |
|
|
|
241 | (2) |
|
|
|
243 | (1) |
|
|
|
244 | (1) |
|
|
|
245 | (2) |
|
|
|
247 | (2) |
|
|
|
249 | (12) |
|
|
|
249 | (2) |
|
|
|
251 | (2) |
|
|
|
253 | (1) |
|
|
|
254 | (4) |
|
|
|
258 | (1) |
|
|
|
259 | (1) |
|
|
|
260 | (1) |
|
|
|
261 | (22) |
|
|
|
262 | (1) |
|
|
|
263 | (1) |
|
|
|
264 | (2) |
|
|
|
266 | (1) |
|
|
|
267 | (2) |
|
|
|
269 | (1) |
|
|
|
270 | (1) |
|
|
|
271 | (2) |
|
|
|
273 | (1) |
|
|
|
274 | (1) |
|
|
|
275 | (1) |
|
7.9.12 Calendar Date Interval |
|
|
276 | (2) |
|
|
|
278 | (1) |
|
|
|
279 | (2) |
|
7.9.15 Dropdown List Item |
|
|
281 | (1) |
|
|
|
282 | (1) |
|
|
|
283 | (6) |
|
|
|
283 | (1) |
|
|
|
284 | (1) |
|
|
|
285 | (1) |
|
|
|
286 | (1) |
|
|
|
286 | (1) |
|
|
|
287 | (1) |
|
|
|
288 | (1) |
|
|
|
289 | (3) |
|
7.11.1 Dropdown List Filter |
|
|
289 | (1) |
|
|
|
290 | (1) |
|
|
|
291 | (1) |
|
|
|
292 | (6) |
|
|
|
292 | (1) |
|
|
|
293 | (1) |
|
|
|
294 | (1) |
|
|
|
295 | (1) |
|
|
|
296 | (1) |
|
|
|
297 | (1) |
|
|
|
298 | (7) |
|
7.13.1 Code Header Form Element |
|
|
299 | (1) |
|
7.13.2 Numerical Header Form Element |
|
|
299 | (1) |
|
|
|
300 | (1) |
|
|
|
301 | (2) |
|
|
|
303 | (1) |
|
7.13.6 Header Form Contact |
|
|
303 | (2) |
|
7.13.7 Standard Header Form Element |
|
|
305 | (1) |
|
|
|
305 | (6) |
|
|
|
306 | (1) |
|
|
|
306 | (1) |
|
7.14.3 Numerical Form Element |
|
|
307 | (1) |
|
7.14.4 Standard Form Element |
|
|
308 | (1) |
|
|
|
309 | (1) |
|
7.14.6 Custom Form Element |
|
|
310 | (1) |
|
|
|
311 | (2) |
|
|
|
311 | (2) |
|
7.16 Object Page Controls |
|
|
313 | (1) |
|
|
|
313 | (1) |
|
|
|
313 | (9) |
|
|
|
315 | (1) |
|
|
|
315 | (1) |
|
|
|
316 | (1) |
|
|
|
317 | (1) |
|
7.17.5 Stacked Column Chart Card |
|
|
318 | (1) |
|
7.17.6 Combined Chart Card |
|
|
319 | (1) |
|
7.17.7 Scatter Plot Chart Card |
|
|
320 | (1) |
|
7.17.8 Vertical Bullet Chart Card |
|
|
321 | (1) |
|
|
|
322 | (7) |
|
7.18.1 Condensed List Card |
|
|
323 | (1) |
|
7.18.2 Condensed Bar List Card |
|
|
324 | (1) |
|
7.18.3 Extended List Card |
|
|
325 | (1) |
|
7.18.4 Extended Bar List Card |
|
|
326 | (2) |
|
|
|
328 | (1) |
|
|
|
329 | (3) |
|
|
|
329 | (1) |
|
|
|
330 | (1) |
|
|
|
331 | (1) |
|
|
|
332 | (2) |
|
|
|
332 | (1) |
|
|
|
333 | (1) |
|
7.21 SAP Leonardo Internet of Things Bridge Controls |
|
|
334 | (3) |
|
|
|
334 | (1) |
|
|
|
335 | (1) |
|
7.21.3 Geomap Form Element |
|
|
336 | (1) |
|
7.21.4 Geomap Link Form Element |
|
|
337 | (1) |
|
|
|
337 | (2) |
|
8 Working with the Canvas |
|
|
339 | (30) |
|
8.1 Essential Toolbar Functions |
|
|
339 | (1) |
|
|
|
339 | (1) |
|
8.1.2 Copy/Paste/Duplicate |
|
|
340 | (1) |
|
8.2 Page Elements and Properties |
|
|
340 | (7) |
|
8.2.1 Page Property Definitions |
|
|
341 | (2) |
|
8.2.2 Changing the Page Title |
|
|
343 | (1) |
|
8.2.3 Page Header and Footer |
|
|
344 | (3) |
|
8.3 Adding Controls to the Canvas |
|
|
347 | (5) |
|
8.3.1 Adding New Controls |
|
|
347 | (3) |
|
8.3.2 Control Operations Using the Context Menu |
|
|
350 | (1) |
|
8.3.3 Copying and Duplicating Existing Controls |
|
|
350 | (2) |
|
8.4 Interacting with Controls on the Canvas |
|
|
352 | (7) |
|
|
|
353 | (1) |
|
8.4.2 Selecting Multiple Controls |
|
|
354 | (2) |
|
8.4.3 Moving and Rearranging Controls |
|
|
356 | (2) |
|
8.4.4 Modifying Text in Controls |
|
|
358 | (1) |
|
|
|
359 | (2) |
|
8.6 Working with Advanced Controls |
|
|
361 | (6) |
|
|
|
361 | (1) |
|
|
|
362 | (2) |
|
|
|
364 | (2) |
|
|
|
366 | (1) |
|
|
|
367 | (2) |
|
|
|
369 | (40) |
|
9.1 Data Modeling Concepts and Sources |
|
|
369 | (3) |
|
|
|
370 | (1) |
|
|
|
371 | (1) |
|
9.2 Modeling and Editing Data |
|
|
372 | (25) |
|
|
|
372 | (2) |
|
9.2.2 Data Editor Overview and Manual Data Modeling |
|
|
374 | (6) |
|
9.2.3 Custom Property Formulas |
|
|
380 | (4) |
|
|
|
384 | (7) |
|
9.2.5 Using Entity Data Model XML files |
|
|
391 | (1) |
|
9.2.6 Import an API from the SAP API Business Hub |
|
|
392 | (4) |
|
9.2.7 Importing and Exporting Data |
|
|
396 | (1) |
|
9.3 Using Data in Prototypes |
|
|
397 | (11) |
|
9.3.1 Binding Data to Pages |
|
|
397 | (2) |
|
9.3.2 Binding Data to Controls |
|
|
399 | (3) |
|
9.3.3 Binding Data in Templates |
|
|
402 | (1) |
|
9.3.4 Binding Images to Controls |
|
|
403 | (1) |
|
9.3.5 Binding Data to Charts |
|
|
404 | (4) |
|
|
|
408 | (1) |
|
|
|
409 | (44) |
|
10.1 Building a Low-Fidelity Prototype |
|
|
409 | (23) |
|
10.1.1 Beginning Your Low-Fidelity Prototype |
|
|
410 | (13) |
|
10.1.2 Sending a Prototype to End Users |
|
|
423 | (9) |
|
10.2 Building a High-Fidelity Prototype |
|
|
432 | (20) |
|
10.2.1 Working with Images |
|
|
432 | (4) |
|
10.2.2 Working with Icons |
|
|
436 | (2) |
|
10.2.3 Working with Tables |
|
|
438 | (14) |
|
|
|
452 | (1) |
|
11 Finalizing Your Prototype |
|
|
453 | (12) |
|
11.1 Preview Your Prototype |
|
|
453 | (7) |
|
|
|
454 | (5) |
|
|
|
459 | (1) |
|
11.2 Publishing Your Prototype |
|
|
460 | (3) |
|
|
|
461 | (1) |
|
|
|
461 | (1) |
|
11.2.3 Share via ZIP File |
|
|
462 | (1) |
|
|
|
463 | (2) |
|
12 Tracking Feedback with Studies |
|
|
465 | (36) |
|
12.1 What Is a Feedback Study? |
|
|
465 | (1) |
|
12.2 Benefits of a Feedback Study |
|
|
466 | (1) |
|
12.3 Create a New Feedback Study |
|
|
466 | (12) |
|
12.3.1 Associate Questions to Images or Pages |
|
|
469 | (2) |
|
12.3.2 Create New Study Questions |
|
|
471 | (1) |
|
12.3.3 User Response Options |
|
|
472 | (1) |
|
|
|
473 | (2) |
|
12.3.5 Publish Study to Capture Feedback |
|
|
475 | (1) |
|
12.3.6 Sharing Study with Others via Email |
|
|
476 | (2) |
|
|
|
478 | (8) |
|
12.4.1 Starting the Study |
|
|
478 | (4) |
|
12.4.2 Providing Feedback |
|
|
482 | (4) |
|
12.4.3 Submitting Feedback |
|
|
486 | (1) |
|
|
|
486 | (12) |
|
12.5.1 Viewing the Study Results |
|
|
487 | (1) |
|
|
|
487 | (11) |
|
12.6 How to Incorporate Study Results into Your Prototype |
|
|
498 | (1) |
|
|
|
499 | (2) |
|
13 Taking the Prototype Forward |
|
|
501 | (24) |
|
13.1 SAP Build and the SAP Cloud Platform |
|
|
501 | (2) |
|
13.1.1 What Is the SAP Cloud Platform? |
|
|
501 | (1) |
|
13.1.2 What Is SAP Web Integrated Development Environment? |
|
|
502 | (1) |
|
13.1.3 Example Workflow: Prototype to Production |
|
|
502 | (1) |
|
13.2 Preparing SAP Cloud Platform |
|
|
503 | (8) |
|
13.2.1 Enabling Services in SAP Cloud Platform |
|
|
504 | (2) |
|
13.2.2 Creating New Destinations |
|
|
506 | (5) |
|
13.3 Importing the Prototype to SAP Web IDE |
|
|
511 | (11) |
|
13.3.1 Importing via Direct Integration |
|
|
511 | (6) |
|
13.3.2 Importing from Trusted Identity Provider |
|
|
517 | (1) |
|
13.3.3 Importing from a ZIP file |
|
|
518 | (4) |
|
13.4 Benefits of Using SAP Web IDE |
|
|
522 | (1) |
|
|
|
523 | (1) |
|
|
|
524 | (1) |
|
14 Future Capabilities, Teach Design, Get Involved |
|
|
525 | (8) |
|
14.1 Design Doing in the Classroom |
|
|
525 | (3) |
|
|
|
528 | (3) |
|
14.2.1 Citizen Development |
|
|
528 | (1) |
|
14.2.2 Functionality Enhancements |
|
|
529 | (2) |
|
14.3 Call to Action: Getting Involved |
|
|
531 | (2) |
| The Authors |
|
533 | (2) |
| Index |
|
535 | |
