Skip to Content
Previous

Create a BUILD Prototype

By Meredith Hassett

Create a high fidelity prototype with BUILD

You will learn

Create a prototype application with BUILD’s gallery and the easy to use drag and drop interface.

Details


Step 1: View Gallery applications

Log in to your BUILD account.

gallery location in menu bar

From the top menu bar, select Gallery. This will take you to the listing of all available template application prototypes you can use with BUILD. The Gallery allows you to quick start an application prototype without having to build it from scratch.

gallery overview page
Please log in to access this content.
Step 2: Select a Gallery app

In the Gallery, find the search bar and type in inventory.

gallery search bar for inventory

This will filter down the list of applications. Select the Inventory Dashboard application from the filtered list.

inventory dashboard gallery app

The prototype overview will provide you details about what screens are included and their navigation and what files are included.

inventory dashboard app overview page
What are the two files included as part of the Inventory Dashboard application (enter file names in all lower case, separated by a space)?
×
Step 3: Clone a prototype

Cloning a prototype will add the prototype to your project collection. Once in your collection, you can make edits and modifications to your local version.

On the prototype overview, click the Clone button under the basic details.

clone button on inventory dashboard

Verify that you want clone the application prototype when prompted by click Clone.

clone project prompt

When the clone is complete, BUILD will let you know. When prompted, click OK to view the cloned prototype in your workspace.

cloning complete
Please log in to access this content.
Step 4: Modify the prototype

To open the UI editor, click on one of the screens under the Prototype section.

select prototype to open ui editor

Here you can search for controls, drag and drop them onto the screen, and modify properties of the controls. You can also re-order data and remove controls that you don’t need.

UI editor screen
Please log in to access this content.
Step 5: Add a table

To add a table to the main chart area, start by clicking the grayed-out chart area. This will select this view.

select grayed-out chart area

On the left hand side, you will find a controls list. Search for Table in this list.

controls search in left side menu bar

Find the Table control under the List control types.

table details

Drag and drop the control to underneath the chart.

drag table control to chart area
After adding the table to the detail view, the Properties pane on the right side of the screen reflects the Table properties. What is the value of the Empty Table Text property?
×
Step 6: Add columns to the table

You can customize the control from the GUI interface. To add columns, right click on a column in the table.

This will bring up a local menu bar. Select Add Column Left from the options to create a new column.

right click menu with add column highlighted

Repeat this action. You should have 2 new columns.

table control with 2 new columns
Please log in to access this content.
Step 7: Rename the Column Headers

The names of the columns can also be modified in the GUI. To do this, double click on the header name.

column header highlighted for renaming

This will highlight the header name and make it editable. Rename the headers to match the names below.

Part ID Image Part’s Name Availability Demand
renamed column headers final
Please log in to access this content.
Step 8: Add controls to the table cells

In the controls list on the left hand side, search for Label.

label search in control menu

Drag and drop the label control into the first column first cell.

In the control list, search for Image.

image search in control menu

Drag and drop the image control into the second column first cell.

table with added controls

You can modify control properties in the right hand side bar. In the properties pane for the image control, find the Size property. Change the Height (h) from Auto to 50px

properties pane, size highlighted
Please log in to access this content.
Step 9: Populate the data

To populate data to the table, find the Data tab on the left hand menu bar. This will show the pre-populated data sources for this prototype.

data selected in lef side pane

Select the Parts entity and drag and drop it on the table.

parts entity mapped to table

Column names that match properties of the entity will automatically map. You can also manually bind a specific field to a control. To bind a column to a specific field, expand the entity on the data pane to see the available fields.

parts entity expanded to show fields

Drag and drop the Images field to the Image Control.

images field mapped to image column
Please log in to access this content.
Step 10: Preview the prototype

To preview the final view, click on the Eye icon in the top tool bar.

preview icon highlighted

This will show you a “live” version of your prototype. You can preview how your application prototype will look on desktop, tablet, and mobile devices.

preview of app prototype

To get back to the UI Editor, click the UI Editor button.

In your live preview, click the Flying Car product. What is the Part ID of the Steering Wheel?
×
Step 11: Change the theme

You can modify the overall color scheme, known as a “Theme” in SAP Fiori. Go back to the UI Editor.

theme icon highlighted

In the UI Editor, locate the icon with a paintbrush on the top tool bar. Click it.

theme options with Belize highlighted

Select SAP Belize from the menu items. This will update the overall theme for the application. No need to update each individual screen or control!

prototype with Belize theming
Please log in to access this content.
Step 12: Share your app

Once your prototype is complete, BUILD lets your share your app in a couple different ways. To share your app, in the UI Editor, click on the Share button.

share button in UI editor

A dialog box will pop up with a shareable link, a Slack integration, and a download option. Copy the link.

To close the dialog box and go back to the UI Editor, click Close.

share options box
Paste your shared BUILD application URL in the box below.
×

Updated 11/01/2017

Time to Complete

25 Min

Beginner

Tags

Next
Back to top

Call me now