Create an SAP Build prototype

Log in to your SAP Build account.

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

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

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

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

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.

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

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

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

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.

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

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

Find the Table control under the List control types.

Drag and drop the control to underneath the chart.

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.

Repeat this action. You should have 2 new columns.

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

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

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

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

In the control list, search for Image.

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

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

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.

Select the Parts entity and drag and drop it on the 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.

Drag and drop the Image field to the Image Control.

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

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.

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

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

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

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!

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

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.