Prototyping with SAP Build

a Walk-Through Guide
as of July 2018, Version (1807)
Purpose:
The purpose of this guide is to enable you to explore the features of SAP Build by
creating a prototype of a real app. You will create a low-fidelity prototype, comprising
images and clickable areas, develop this into a realistic prototype, and import it into
SAP Web IDE, where your development team can use it as the code-base of the app.
By following this guide, and completing the exercises within, you will learn how to the
do the following:
- Create a low fidelity prototype in minutes
- Share your prototype with users and gather feedback
- Integrate data into your prototype by importing sample data, adding objects,
and defining data properties and formulas
- Import your prototype in WebIDE

Assets for these exercises are available here:

https://www.build.me/splash/sites/default/files/Prototyping_with_BUILD_Assets_0.zip

2
Revision Log

Context .................................................................................................................................5
Part 1 - SAP Build User interface explained .........................................................................6
10 minutes
Part 2 - User profile ............................................................................................................11
5 Minutes
Part 3 – Low Fidelity prototyping ......................................................................................14
15 minutes
Part 4 - Feedback Studies...................................................................................................21
Create a Study .......................................................................................................................... 21
15 minutes
Take a user study ..................................................................................................................... 25
5 minutes
Review Study results ............................................................................................................... 28
10 minutes
Part 5 – Working with Ui5 Prototypes...............................................................................31
List of Alerts page .................................................................................................................... 31
40 minutes
Message Details page .............................................................................................................. 40
40 minutes
Device page .............................................................................................................................. 49
40 minutes
Part 6 - Import into WebIDE ..............................................................................................60
Configure Destinations in SAP Cloud Platform and SAP Web IDE...................................... 60
10 minutes
Import your SAP Build project in SAP Web IDE .................................................................... 64
5 minutes

3
Revision Log
Version Date Who Remarks
1 20160316 Thomas DUBREUIL Initial version – SAP Build Beta 4
2 20160629 Thomas DUBREUIL SAP Build Beta 5 screenshots
Reorganized sections
Added goals and intent
3 20160710 Thomas DUBREUIL Added additional goals
4 20161018 Thomas DUBREUIL Minor updates
5 20161118 Thomas DUBREUIL Minor updates
6 20170119 S PERE & JL Updated with January 2017 SAP Build
TERREE Version
7 20170208 Brian Murray Copy edit
8 20170213 Thomas Dubreuil Formatting
Part 1 Edit
9 20170425 Thomas Dubreuil Updated with March 2017 SAP Build
Version
10 20170518 Thomas Dubreuil Updated with May 2017 SAP Build
Version
11 20170719 Thomas Dubreuil Updated with June 2017 SAP Build
Version
12 20180719 Joelle El Hayek Updated with July 2018 SAP Build
Version
13 20180727 Thomas Dubreuil Edits and updates

4
Context

Our mission at SAP Design is to deliver solutions to scale design and enable our internal
and external customers to build the right apps with the right experience. With our
solutions, we want to help our users on their journey towards Digital Transformation
and the Intelligent Enterprise.
SAP Build is a complete set of cloud-based tools to design and build your enterprise
app, available at https://www.build.me .

With SAP Build, you don’t have to be a designer or a developer to design apps with a
great user experience. SAP Build offers the following:
• A series of comprehensive Learning Cards that teach you Design Thinking
methodologies for designing applications that have a great user experience (UX).
• Access to the knowledge and expertise of the SAP Build user-community and
experts via the SAP Build Community pages and SAP Build blog.
• Access to hands on help from design professionals via the SAP User Experience
(UX) Design Services.
• A public Gallery of projects that showcases design materials, including personas
and journey maps, and fully-responsive prototypes, that will inspire you, and
that you can clone and use as the basis for your own project!
• The Prototype tool that enables non-technical users to create interactive
prototypes that conform to the best design practices.
• The Feedback tool that enables you to gather feedback from users about your
design images and prototypes so that you can iterate and constantly improve.
• The ability to jumpstart development without writing a line of code by importing
and integrating your prototype code into an Integrated Development
Environment such as SAP Web IDE.

With SAP Build, your company can adopt the design-driven methodology that SAP
recommends and promotes. It enables everyone to build highly-usable prototypes
without being constrained by a lack of dedicated UX designers or specialized HTML5
developers.
For SAP employees, SAP Build supports the design-led development (DLD) process by
streamlining design-gate (D-Gate) submissions and reviews.

SAP Build is available in SAP Cloud Platform, where it is hosted and operated by SAP.

You can use a limited version of SAP Build for free. You can purchase SAP Build to get
the following advantages:
• A tenant dedicated to your company
• An Admin user to manage access
• An unlimited number of users
• An unlimited number of projects per user
• The ability to create studies on html5 prototypes
• The legal right to deploy in production an application designed with SAP Build

5
Part 1 - SAP Build User interface explained
10 Minutes

Let us walk you through the SAP Build User interface, and look at how it is organized,
and how the different components are related.

Note that Chrome is the only browser supported for prototyping.

Right after you log in, you’ll see your SAP Build Home page. From here you can
navigate to different parts of the tool. This schema shows some of the most common
paths between pages or modules.

You just need to remember these following two features and you’ll never get lost:

1: The icon on the top left always returns you to your Home page.

6
 2: Once you’re in a project, the Toolpicker in the header bar enables you to
switch between the Persona tool, the Prototype tool, the Files tool, and the Feedback
tool.

Now to the UI Editor. It is organized with a central canvas, a toolbar on top and
panels on either side.

Each area has a different purpose

On top of the Canvas, a Toolbar allows for:

• Change options of the display of the prototype (size, theme, grid, snap, zoom)
• Show/Hide side panels
• Undo/Redo
• Create a study, Publish and preview the prototype

7
From the top left panel, you can drag images, controls and data onto the canvas to
compose your prototype.

• The CONTROLS Tab lists all available controls for the prototype. The controls are
organized by type and ready to be dragged onto the canvas or in the Outline.
There are many controls, Search is a best practice.

• The IMAGES Tab displays images you can drop onto the canvas. If you want to
upload more files, use the menu in the header bar to navigate to the Files section.

• The DATA Tab displays your data model objects and properties and lets you
navigate to the Data Editor.

8
The OUTLINE in the BOTTOM LEFT Panel lists pages and a hierarchy of all objects in
them. Use it as an alternative way to select, reorder, rename or delete controls. It also
supports Copy and paste with keyboard shortcuts (Ctrl-c and Ctrl-v).

Use the DISCUSSION Tab in the RIGHT Panel to ask questions or leave comments
for other Team members. Discussions happen at page level.

The PROPERTIES Tab in the RIGHT Panel is divided into three sections.

• PROPERTIES, where you can adjust the way a control looks in the canvas. Note
that you can also use it as an alternate way to bind data. By default, some barely-
used properties are hidden in the Show More subsection.

• ACTIONS where you define the actions following an event on the control, for
example a Navigation when a button is pressed.

9
• CHILDREN where you can micro manage the hierarchy of controls. You can zoom
in, add or delete controls that are children of the one you are looking at.

Happy prototyping!

10
Part 2 - User profile
5 Minutes

In this section, you will learn how to manage your user profile settings and
information. This is important because:
- All users may not be allowed to access all organizations. For example, if you
create a project in a private organization and do not have the appropriate
security settings, you may not be able to share it with people outside this
organization. In doubt, ask your SAP Build Admin user!
- You can add a profile picture, so your colleagues know what you look like!

What to do Screenshot

Connect to https://www.build.me

If you don’t have a SAP Build account,

select the Sign Up button. You require a
valid email address to confirm your
account.

In the future, you’ll pick the Log In

button to log in instead.

Once logged in, select your avatar in the

top right corner, and select User Profile.

11
 Verify that your name, email, job title and
company name are correct. Edit your
details if necessary.

Select Photo and upload a new avatar

picture from your files.

1. Select the Organization Tab. In the

drop-down, pick one of the following
default organizations:
• Standard (public tenant)
• Your company name (only
available to paying customers)
2. If the organization you are looking for
is not listed, paste the following in
address bar of your browser:

https://www.build.me/go/<Name_of_the
_organization>

If you are allowed to access the

organization, reopen your user profile, it
should be added to the dropdown list

12
Select Communication.
Check the box “I agree to receive SAP
Build newsletter and other product
information.”; we are now friends!
Just kidding, adjust the messaging to
your preferences. For the sake of the
exercises in this guide, keep
“Collaboration” checked!

Click Save

13
Part 3 – Low Fidelity prototyping
15 minutes

In this section, you will learn how to create an interactive prototype from sketches
using pre-existing images.
Assets for this exercise are available here:
https://www.build.me/splash/sites/default/files/Prototyping_with_BUILD_Assets_0.zip

In this example, you are building an application that enables farmers to better manage
their fields by reviewing the auto generated alerts and taking appropriate actions.
This application comprises three screens:

Images

Screen 1: A list of alerts ordered by

priority

Screen 2: The details for a single alert

showing a navigable map with clickable
sensors in the impacted fields.

14
Screen 3: The detailed information from
the sensor

Procedure Screenshot

Login to SAP Build.

Your Workspace is displayed. Create a

new project.

In the popup Start from Scratch section,

select Create New Project

15
Name the project Smart Farming

Select Start with Image.

A new empty prototype has been created

in your project. Name it “Smart Farming –
Low Fidelity“

Drop the images directly from your

downloaded assets folder onto to your
browser window:
- Page 1.jpg (List of Alerts)
- Page 2.jpg (Message Details)
- Page 3.jpg (Device)

Important Note: If you have the images

on your phone, you can also use the SAP
Build Mobile Upload feature, instead of
Drag/Drop or Desktop Upload. You will
still need Chrome tough.

16
Each thumbnail represents a page in your
prototype. On each thumbnail, double-
click the page name, and enter the
following names:
• Alerts
• Message Details
• Device

Note: You can also rename the pages by

selecting the icon on the right of the
title bar to display the menu, and then
selecting Rename. This icon only appears
on mouseover.
Using this menu, you can also:
Change the orientation of the image by
selecting Rotate Image.
Replace a certain image with a different
one by selecting Replace.
Create an exact copy of a certain image
by choosing Duplicate.

To reorder the pages, select the title bar

above a thumbnail and drag and drop the
it to a new position.
Display the page in the following order,
left to right:
• Alerts
• Message Details
• Device

Note: The first page cannot be moved.

Drop another page on it to move it …

17
On the Alerts page thumbnail, select,
drag, and release on the cell containing
Storm Alert to create a hotspot.

Immediately next, click the Message

Details page thumbnail to create a link
with the floating arrow.

On the Message Details page thumbnail,

select, drag, and release on one of the 4
pins on the map create a hotspot.

Immediately next, click the Device page

thumbnail to create a link with the
floating arrow.

Repeat the last two steps for the

remaining 3 pins on the map.

Note: If you make a mistake you can

resize, move, and delete hotspots.

Create hotspots on the back button on

each thumbnail image and link them to
the previous page.

18
These screens being designed for a
Tablet application, select the Tablet
(Landscape) device in the toolbar. This
enables users to view the application at
the correct screen size.

Click the Chat Bubbles icon in the

toolbar start a conversation thread and
exchange ideas, thoughts, and feedback
about each screen with the people on
your project team.

Select the Preview button under your

avatar and ensure that the prototype is
working as expected and that you can
navigate to and from every page using
the hotspots that you defined.

Select Back to Page Map to return to the

page map.

19
Select Share to publish a URL for the
published project that you can share with
others.

Click the Download Tab. You can use it

to get a standalone version of your
HTML prototypes in a compressed .zip
file

Select Create Study to begin creating a

feedback study based on this prototype.

20
Part 4 - Feedback Studies

In this section, you will learn how to share a prototype with users and ask for
feedback. You will then participate in the study - as if you were a target user - and
then review the feedback.

Create a Study
15 minutes

You will learn how to create questions that ask users to perform an action on an
interactive prototype, and how to create questions about static images.

What to do Screenshot

1. Name the study Design

Validation.

2. Enter the following description:

Please test and provide your

feedback regarding the design of
this prototype.

3. Select Create and go to

Feedback.

21
The prototype is now included in the
study as your first question.
Click the tile to open the question

1. In the right panel, enter the

following text for the question:
Go to the page with detailed
information from the sensor.
Please provide feedback in every
screen.

2. Select Respond by performing

an action. This type of answer
also allows annotations by end
users.

3. Make sure Study format is set to

Tablet (Landscape)

Action questions require a Start and a

Target.
On the canvas, select Device as the
Target.

22
Select Done to return to the Feedback
page.

Click New Question

This enables you to add an additional

question to the study.

You can use this to create questions

about images, or about prototypes within
this project. For example, you can ask
people if they would like to use your
application with a multiple-choice
answer.

Notice there are two tabs:

• Images
• Prototypes

Click Cancel to close.

Preview the study to view what your

target users will see in a new tab.

Review the study, and then close the

preview tab.

Publish the study.

Remember, you can’t modify published

studies.

23
Your study is now published

Okay

There are no participants to your study...

Time to invite a few colleagues
Click Invite new participants.

You can enter colleagues’ email

addresses and invite them to participate
in the feedback study.

Note: Email addresses can be pasted

from a comma or semi colon separated
list. The format of the entered emails will
also be validated.

When you’ve added all the email

addresses you want, select Invite.
Note that you can also invite yourself.

24
Take a user study
5 minutes

You will learn how to take the user study as if you are one of the participants.

Study thumbnails are displayed on the

Feedback page. You can go there from
the header toolbar

Note: On the study tile, you can see that

you have 0 participants, 0 comments, and
0 answers. This is because nobody has
participated yet.

Hover your mouse on the Hamburger

menu icon to retrieve the URL of your
study, double click to select it and press
Ctrl + C on Windows (or Cmd + C on
Mac) to copy it.

To take the study, paste the study URL in

a new browser tab...

Select Start Study.

Interact with the prototype application

and attempt to complete the
instructions/answer the question.

Select Drop Comments.

25
 1. Select on an area on the image to
leave comments and sentiments.

2. Save the comments.

3. When you have left all your

comments, click Done.

4. As the prototype is now active

again, navigate by selecting the
hotspot on Storm Alert.

Repeat leaving feedback on the Message

Details page and on the Device screen.

Note that the more clicks you use, the

more results you will have later in
Review Results, so do not hesitate to
navigate back and forth.

Select Finish if you think you’ve

answered the question.

Select Done to close the study

26
Close the browser tab

27
Review Study results
10 Minutes

You will review the feedback left by the participants and get insight on their behavior,
sentiments, and navigation while using your prototype

What to do Screenshot

Open your Alerts page

Note that in our example one user took

the study, leaving 3 comments

Select the Design Validation tile to

review study results.

Review the study results

In the Questions tab, you can see the

number of users who finished the study

All of the participants (1) successfully

navigated to the final page. It took on
average 2m 22s to do this. The
participant on average visited 3 pages of
the application to do this.

28
Open the question to navigate and
review comments and sentiments for all
screens.

Select on a comment in the right panel to

see where it was placed in the prototype.

Note: If several users take the study, you

will see a list of all comments for all users
for this screen.

Unselect Comments to return to the

interactive prototype.

Select Heatmap to view a visual

representation of where users clicked on
the prototype.

Unselect Heatmap to return to the

interactive prototype.

Select the Breakdown tab.

Here you can see summary statistical

information about each prototype page.

Select the Page Flow tab.

Here you can get insights into how the

users navigate between prototype pages.

29
Select the Statistics tab.

Here you can see overall statistics about

a HTML prototype perform-an-action
question, and information about
participants who attempted to complete
the question.

Close the study details popup

You can also click on Download Results

from the main Feedback page to
download a summary of the received
feedback.

The summary is in Excel format and

contains several sheets: Study Summary,
Participant Summary, and Question
Summary.

30
Part 5 – Working with Ui5 Prototypes

In this section, you will learn how to work with common UI5 controls, align items, and
use realistic sample data, so that your prototype is as close as possible to the final
app.
For user validation, we recommend that you create feedback studies to gather
feedback each time you make significant changes.

We’ll start with making the UI looking close to the target prototype, then we’ll add
realistic data, then polish the prototype to display the data correctly. We’ll do this
page by page;
If you accidentally run into some unexpected manipulation of controls, do not panic!
You can restore the previous state using the Undo function from this toolbar icon

or, if you prefer that, use the good old Ctrl-z keyboard shortcut.

Note: If you do not want to start from scratch, you can clone an existing prototype
from the SAP Build Gallery and then customize to fulfill your needs! But during this
exercise, you will be starting from scratch.

List of Alerts page

40 Minutes

Summary of work to be done in this page (after creating your project, inviting
participants, and choosing the appropriate template)
- Add the images for this project (to be used later on page 3)
- Add meaningful data from the data model
- Rename the 1st page
- Create and customize the list items
- Make sure the Search bar works as expected
- Set the navigation and transition from this page to the Message Details page

What to do Screenshot

Go to your Workspace. Create a New

Project and name it Smart Farming – High
Fidelity

Note: You could also reuse the Smart

Farming project from Part 3 and create a
new prototype in it:

31
Select Invite Team to invite colleagues to
participate to your project.

It is a good idea to invite all the people

that you want to participate in the
elaboration of the prototype, including
designers, key users, and developers.
Invited people are notified in their SAP
Build home page and by email.

Note: you need to be a team member to

import the code of the prototype in
WebIDE

Select Start with Template to start

building your prototype.

Name your prototype Smart Farming

Prototype.

Choose the Flexible Column Layout

template.

32
You will be redirected to the page map of
your new project.

Navigate to the first page of your

prototype to start editing it.

Choose the Images tab on the top left

menu to add the images needed for this
prototype.

33
Drag/drop all the four images from your
downloaded assets folder.

34
Before we start with working on the user
interface, let’s talk about data in SAP
Build so you understand better what we
are doing here.
The data model will be used to display
realistic data into the prototype. It also
allows context to be kept while
navigating, making the prototype more
meaningful to the users. It will also make
your prototype ready to work with
prototyping Actions like
Create/Read/Update/Delete of Data.

A data model can be seen as a database

that the prototype will use to display
information. Data Model range from a
single object to many! We will explore the
Data editor later in this exercise.

Choose the Data tab on the top left menu

to add the data file needed for this
prototype.

Click on Import and choose the Smart

Farming Excel data file from your
downloaded assets folder. Your data
objects will now be displayed.

35
Next, you will start editing the first page
of your prototype and make it ready to
display the data from the data model.
Go to the OUTLINE section at the bottom
of the Left Panel. Double click Page 1 and
rename it to List of Alerts.

Right click on the Object List in the page

Outline and Delete it. In this project we
will be using a Standard List instead.

36
Choose the Controls tab at the top of the
left Panel and search for “Standard”. Drag
and drop the Standard List to your page
right under the List Page Header.

Note: there is a tooltip that will display if

you hover your mouse on the control in
the left panel. When available, there is
link to the SAP Fiori Guidelines for that
control.

Double click on the List Page Header and

rename it to List of Alerts.

Note: In line editing is available

everywhere there is no data bound.

Select your newly added Standard List

and bind the Message data object to it
using the Properties menu on the right,
simply by choosing Message from the
drop-down list of available data objects.

Note: You can also do the data binding by

dragging the Message data object from
the Data tab on the left onto the first List
Item.

Now you will customize the list items.

Select the first item in the list or in the

Outline, and bind the appropriate data
fields to it from the Properties menu on
the right as follows:

-Title: Desc
-Description: Status
-Info: Date

37
Now let’s add the binding for the message
icon.
The Icon field is one that you need to add
yourself to the data model a it is not in
the Excel file you added. We will calculate
it based on the message type.

To do so, navigate to the Data tab on the

left menu and choose Data Editor. Click
on the Message object in the data model
to edit it. You will see its data fields on
the right. Choose New Property and add
Icon of type String.

Note: If you want to edit your Data, you

can do so in the “SAMPLES” Tab.
Best practice is to create the structure of
the Data Model in SAP Build, export it to
Excel, edit the data and reimport the
Excel file back to SAP Build.

Click on the newly added property and

choose Create Formula.

In the Formula Dialog, Drag and drop an

If-Else condition and populate it with the
appropriate properties, values, and
operators as shown in the screenshots on
the right.

Note:
Message Type is a Property
= is an Operator
Alert, sap-icon://warning and sap-
icon://message-information are Values

38
Now leave the Data editor and bind the
newly created “Icon” property to the
“Icon” field of the Standard List Item.

Note: You can use Drag and Drop or bind

from the control properties in the right
panel.

Result should look like this:

Now you will add the Actions needed for

this page.

Select the Search bar and choose Add

Action from the Properties menu on the
right. Customize the action as follows:
- Interaction: Live Change
- Action: Search
- Collection: Standard List of Message
- Search On: All properties

Next select the standard list of items and

customize its actions as shown on the
right, so that clicking an item on the list
will open the Details page (Page 2).

Note: as we are using a Data Model with

this prototype, the Data displayed in page
2 will depend on the item clicked in the
List of Alerts page. This we call
Navigation with Context.

You can now click on preview and make

sure that searching for a list item and
navigating from Page 1 to Page 2 both
work as expected.

39
 Message Details page
40 Minutes

Summary of work to be done in this page:

- Rename the page
- Add and customize the Object Header of the page
- Add and customize the Form containing the message details
- Add and customize the Map containing the sensors
- Customize the Table containing the Impacted Fields information
- Customize the Footer buttons and make sure they work as expected
- Set the navigation and transition from this page to the Device page

What to do Screenshot

Now, you will start editing the second

page of your prototype.
Go to the page Outline. Double click Page
2 and rename it to Message Details.

Similarly, rename the page header to

Message Details inline

Select the Object Header in the Outline

to start editing it.
Do the data binding by dragging the
Message data object from the Data tab on
the left to the selected Object Header.

Now set the values of its Properties as

shown in the screenshot on the right.

40
Your Object Header should look as
follows:

Choose the Controls tab and search for

Form. Drag and drop it to your page right
under the Object Header.

As a title is not needed for this section,

right click on the Title Form Title in the
page Outline and Delete it.

Then set the Default Line Height property

on the right to OFF, to align the rows of
the form with labels on top.

Now select the Form Section in the page

Outline to begin customizing it.
Select the first Row in the section. Double
click the Label and rename it to Severity.

41
In the OUTLINE, make sure the first row
is selected

On the Right Panel you will see a

CHILDREN section.
Expand Fields (1),
Add a Text control
Delete the Input

Note: This could be done with drag and

drop, in the UI or in the Outline. Now you
know another way to place controls

Select the newly added text and bind it to

the Severity field using from the
Properties tab on the top right

Similarly, edit the 3 remaining rows as Before data binding:

follows:

-Row 2:
Rename the Label to Status
Delete the Drop-Down List, add a Text
Bind the Text to the Status data property

-Row 3:
Rename the Label to Assigned to After data binding:
Delete the Drop-Down List, add a Text
Bind the Text to the Owner data property

-Row 4:
Rename the Label to Comment
Bind the Text to the Comment data
property

42
Choose the Controls tab and search for
Map. Drag and drop it to your page right
under the Form.

Now select the newly added Map and do

the data binding by dragging the Device
data object from the Data tab on the left
on to it.

Then change its Property value on the

right to Device via Device.

This way, we will display spots for each

device associated with a message, based
on the relationship between the two
objects.

Click on Show More in the properties to

set the center of the Map and the initial
Zoom Level

We already know the center of the Map

comes from the Data, so bind it to the
GPSCoords

Set initial zoom level to 12 (but this is up

to you if you like to scroll!)

Repeat for Zoom level: 12

43
Staying in the Properties tab on the right,
scroll down to the Children section.

Expand the Visual Objects and click on

Spots.

Next expand the Items section and click

on Spot.

Now customize the properties of each

spot as shown in the screenshot on the
right in order to display the spots at the
correct coordinates on the map.

Set the ACTION for the Spots so that

clicking one will take you to the next page

Now you will start customizing the table

below the map. Select it, right click and
choose Add Toolbar to add a title.

Rename the title to Impacted Fields.

44
Delete each of the toolbar icons on the
right.

Note: you can also select the icons in the

layout editor and press Backspace on
your keyboard

Now select each of the 3 columns and

rename their headers to Field, Content,
and Planned Harvest from left to right.

Bind the table to the Field data object

using the Properties menu on the right.

Note: use Drag and drop if you prefer

Now you will bind the controls in the first

row to the data.
When binding, always use the first row
and the result will be automatically
replicated in other rows.

Select the Item Identifier control in the

first column (Field) and bind it to the
Name data property.

Select the Text control in the second

column (Content)bind it to the Content
data property.

Select the Item Number control in the

third column (Planned Harvest) and bind it
to the HarvestDate data property.
Remove the Unit Value (USD)

45
When you are done, your table will look
as follows in the screenshot on the right

Next you will customize the existing

footer.

Now customize the Cancel button to

become one that will help the user mark
an alert as complete. Select the button
and edit its Properties as shown in the
screenshot on the right.

The button will now look like this

Change the Action associated with that

button to “Change Value” on the property
“Status”, with value “Complete”.
This will change the Status of the Alert to
Complete.

Add a second action. Set it to show a

confirmation message that the status has
been changed.

Now customize the Save button to

become one that will help the user assign
an alert to someone.
Select the button and edit its Properties
as shown in the screenshot on the right.

Your footer should now look like this

46
Add an action to the Assign button such
that it opens a new dialog when clicked.
Choose Dialog 1 under Dialog Name. You
will notice that a new page (Dialog 1) gets
added in the outline.

Now navigate to the newly added dialog

(Dialog 1) from the Outline to start editing
it.

Rename the title to Assign

Choose the Controls tab and search for

Form. Drag and drop it inside your Dialog.

In the page Outline, right click the Form

Title and Delete it.

47
Also, from the page Outline, right click on
each of the third and fourth Form Rows
to delete them.

Rename the first label to Assign to and

the second label to Comment.

Now Drag and Drop a Text Area control

from the CONTROLS TAB to the the
Form Row “Comment” in the OUTLINE.

Delete the Drop-down list

In order to be able to change a data

model value from this dialog, it must be
bound to the Data object
Select the Dialog and bind it to the
message object

48
Add three actions to the OK button as
shown in the screenshot on the right.
The first action is to change the Status of
the Alert to In Progress.
The second is to save the changes.
The third is to close the dialog.

Now add two actions to the Cancel

button as shown in the screenshot on the
right.
The first action is to cancel the changes.
The second is to close the dialog.

You can now click on preview to make

sure that the actions on the dialog work
as expected – and that your assigned
owner and added comment are
successfully reflected on the Message
page.

Device page
40 Minutes

Summary of work to be done in this page:

- Rename the page
- Customize the Object Header of the page
- Add and customize the Form containing the device information
- Add and customize the Bar and Line Charts
- Add and customize the Feed List

What to do Screenshot

49
Now, you will start editing the third page
of your prototype.
Go to the page Outline. Double click Page
3 and rename it to Device.

Select the Object Page Header and

modify its properties in the CHILDREN
section:
Delete the Button under Actions

Add a Link under Bread Crumbs Links.

Rename the Bread Crumb Link to Back

instead of Link.
You will use this link to navigate to the
previous page, so set the associated
action to Navigate Back

50
This page will display data from a Device.
Select the whole page and bind it to the
Device data object from the Properties
menu on the right.

Select the Object Page Header in the

page Outline and customize it from the
Properties menu by setting its properties
Image -> Picture
Title -> Name
Subtitle -> Model

In the page Outline, Delete the Vertical

Box

Similarly, right click and Delete the Hello

and Welcome label.

51
Now Delete the Footer Bar that is inside
the Header.

Your header will look as follow in the

screenshot on the right.

Now let’s start to work on the content of

the page. Object pages are organized with
sections and subsections for easy
navigation.
Select the first Sub Section to start
customizing it. Change its title to Info.

Note: as this is the only subsection in the

section, the subsection title is promoted
in the toolbar as a section title

Then choose the Controls tab and search

for Form. Drag and drop it to your page
inside the first Sub Section.
Delete the default label “Some random
text” in the subsection so that the Form is
properly aligned in the section.

Select the newly added Form and Delete

the title from the Properties menu.

52
Then delete the last two form rows so
that the form is left with only two rows
instead of four

Customize the first row:

Change the value of the label to Model.
Replace the input with a Text and bind it
to the Model field.

Then customize the second row:

Change the value of the label to
Manufacturer.
Replace the input with a Text and bind it
to the Manufacturer field.

Set the Default Line Height to off to align

the rows in your form with labels on top

53
Your form will look as follows in the
screenshot on the right.

Now let’s work on the next section.

In the OUTLINE, open the second section
of the object page and select the
subsection it contains.
Change its title to Data History.

Then choose the Controls tab and search

for Column Chart.
Drag and drop it to your page inside the
Sub Section.
Delete the “Some random text” label so
that the chart is aligned to the left in the
section.
Drag and drop a second Column Chart
next to the first one.
Finally search for Line Chart in the
Controls tab.
Drag and drop it to your page next to the
two other charts.

Now you will customize each of the 3

charts and do the appropriate data
binding

Select the first Column Chart.

First thing to do is to bind the chart with a
data set. Do this from the Chart
properties, bind the Chart with the
Temperature DataSet

54
Set Chart Dimension in the Properties
menu as Date.

Note: if you cannot see the binding,

refresh the page.

Note: Dimensions and measures can be

found in CHILDREN or OUTLINE

Then set its Chart Measure in the

Properties menu as Value

Set the Label to °F

Your first Column Chart will look as

follows on the screenshot on the right.

Bind the second column chart with the

Rain Dataset

55
Set its Chart Dimension in the Properties
menu as Date

Then set its Chart Measure in the

Properties menu as follows in the
screenshot on the right.

Your second Column Chart will look as

follows on the screenshot on the right.

56
Bind the Line Chart to the Hygrometry
Dataset

Set the Chart Dimension to the Date

property

Set the Chart Measure to the Value

property with the Label %

Your third Line Chart will look as follows

on the screenshot on the right.

57
Now select the Sub Section in the Third
Section to start customizing it. Change its
title to Messages.

From the CONTROLS Tab drag and drop

a Feed List in the MESSAGES Subsection

Delete the “Some random text” Label as

we will not be using it.

Bind the newly added Feed List to the

DeviceTextData field.

Select the first item in Feed List and

customize the properties with the
following bindings:
Icon -> Type
Sender -> Date
Text -> Text

58
Your Feed List will look as follows in the
screenshot on the right.

You can now click on preview to make

sure that everything works as expected.

When everything works as expected, we

need to publish the project to be able to
run the next section: Import into WebIDE

Hit the SHARE button in the toolbar

Wait for the URL to be displayed before

closing

59
Part 6 - Import into WebIDE

In this section, you are going to import your prototype to Web IDE to turn it into an
app and deploy it.
This task is normally performed by a developer. In order to get access to the
prototype from SAP Web IDE, the developer needs to be a member of the team in
SAP Build. This is also a good way to ensure feasibility. If not possible, the prototype
can still be exported as a Zip file from SAP Build.

SAP is offering a new release of SAP Web IDE (herein, “SAP Web IDE, multi-cloud
version”), side by side with the standard SAP Web IDE, which is no longer being
developed. When you navigate to the SAP Cloud Portal cockpit services, you will see
two different tiles, SAP Web IDE and the new SAP Web IDE, multi-cloud version.

The procedure below details the steps to be taken when working with SAP Web IDE
Multicloud. For SAP Web IDE standard, please refer to the SAP Build documentation.

Configure Destinations in SAP Cloud Platform and SAP Web IDE

10 Minutes

If you are using a licensed version of SAP Build you can skip this section. All
destinations were created automatically when the SAP Build service was enabled for
your company SAP CP account.

If you are a freemium user, you need to do some configuration steps in SAP CP for
SAP Build and WebIDE to be able to communicate effectively.

What do do Screenshot

The first thing to do is create the “Link”

between SAP Web IDE and SAP Build in
SAP Cloud Platform. For this, we will
create a “Destination” that will tell
WEBIDE where to import the prototypes
from.

In SAP Build, click your avatar and select

Help.

60
From the menu on the left, expand:

SAP Web IDE

>Extend Prototypes with SAP Web IDE
>Destinations
>Import Destinations

Download the SAP Build_Production

http://sap.github.io/SAP
destination by clicking the Link
Build_User_Assistance/Destinations/SAP
Note: Build_Production
Ui5 destinations are useful for SAP
employees only
Other destinations are only required
when using SAP Web IDE standard
version

Open SAP Cloud Platform and login to

your account

Note: If you do not have a SAP Cloud

Platform account, go to
https://account.hana.ondemand.com/ to
get a trial account.

61
Once logged in SAP Cloud Platform,
Open “Destinations” from the left menu

Import the destination that you

previously exported from SAP Build user
assistance

Go to Services from the left menu and

search for SAP Web IDE.

Check that SAP Web IDE Full-Stack

version is enabled. If it isn’t, click the tile
to enable it

62
Click the tile to display the links.
Go to SAP Web IDE service.

In Features, enable Import prototype

from SAP Build.

Make sure you Save at the bottom of the

page.

The configuration is done.

Refresh your SAP Web IDE to reflect the

changes.

63
Import your SAP Build project in SAP Web IDE
5 Minutes

You will now import the SAP Build prototype into SAP Web IDE to get starter UI5
code through some config.

What do do Screenshot

Select New project from Template on

the SAP Web IDE Home page.

In the drop down select SAP Build

Project.

Select Next.

Name your project.

Select Next.

Note: Spaces are not allowed in the

project name.

64
Login if required. You need to login using
the email address and the password that
you use to login to SAP Build

Select your SAP Build system and your

published project.
The SAP Build system is your profile
organization, as described in Chapter 1

Select Finish.

Right click your project in the Projects

folder.

Select Run as Unit Test to run it.

Review the code for your project.

65
Congratulations, you did it!

We hope you’ve enjoyed this exercise… please leave comments on.

- Twitter @BuildwithBuild
- By posting a comment on https://standard.build.me/community
- Or sending a mail to contact.build@sap.com

66