Learn how to develop prototypes of SAP Fiori applications with Build. Discover how to enter comments and interact with the prototype before developing applications in SAP Fiori.
Key Concept
An application prototype allows an organization to communicate, discuss, and define ideas between the designers and the user. SAP Fiori allows a very wide design experience, enabling application prototypes to allow relevant interaction before the final design. With the Build solution, you can create SAP Fiori application prototypes for interaction and feedback with the user prior to the development of final applications. SAP offers a broad portfolio of the user experience (UX) design services to help organizations and companies become more human centered. Build is an open source, cloud-based social platform that enables users, even those with no user interface (UI) development knowledge, to easily create fully interactive prototypes with realistic data, share them with colleagues, and consolidate this feedback without writing a line of code. The main objective of developing SAP Fiori prototypes in Build.me is to create efficient applications. Stages of the preparation of SAP Fiori applications are discover, design, and develop. I focus on the design stage (Figure 1).

Figure 1
The stages of development of an SAP Fiori app
Before implementing an SAP Fiori solution, a business must understand the needs of its users. Organizations invest time in user research and design at the beginning of the product life cycle to make sure they are creating software solutions users want to use.
A prototype application allows SAP Fiori experts to interact with the user to develop the best final design. The prototype should be built in a short time, using the right programs, and you should not use many resources. The solution used for the development of a prototype SAP Fiori is Build, which belongs to SAP’s user experience (UX) solutions.
Build is an open-source, cloud-based social platform. User registration development and use is free of the charge to date. Some functionalities such as direct connection to your enterprise SAP Cloud Platform may be restricted to the licensed solution. That allows you to connect your prototype to business data.
In my example, I show you how to develop the prototype SAP Fiori application Track Sales Order. Track Sales Order enables a sales representative to track and display a summary (a list of sales orders) and detailed sales order information. When you are developing the application, you work in a screen that consists of a left zone of the prototype application, and in the central area, you see the Sales Order section, which includes the item, status, and document information details (Figure 2).

Figure 2
Image of the prototype: Track Sales Order
This Track Sales Order prototype enables a sales representative to track and display summary and detailed information about sales orders.
I show you how to perform the following steps
1. Create a user account in Build.me. Build is a user experience (UX) service. There are a few tasks required before you can get up and running using Build. In this step, I explain the actions required to register in Build. With the registration you can continue with the creation of the prototype.
2. Create projects. I walk you through the necessary steps to create a new project from the WORKSPACE tab on the Build Home page. In a Build project, you can create a unique HTML prototype application.
3. Develop the prototype SAP Fiori app Track Sales Order in Build.me. I explain the necessary steps by creating realistic and interactive prototype pages for Track Sales Order in the prototype tool using available templates.
The prototypes developed in Build are based on the functionalities of SAP Fiori.
4. Upload data for the prototype test. I describe the necessary steps to create and add objects manually. (These objects are files in .csv or Excel format for the custom data log load, which the application will use—for example, Sales document number, Customer and Customer Name.) You may want to add an object to a data model or create a data model manually from the Data panel. This step allows you to have data for the prototype test. The data you register allows you to have real tests with the application that you created.;
5. Test the prototype and provide feedback for it. I show you how to create and share Build feedback studies to gather detailed feedback about images and prototypes.
The website and solution Build.me are part of the SAP strategy UX service that provides design and user experience best practices, tools, and e-learning to help organizations implement a design-led and user-centered approach to innovation.
Step 1. Create a User Account in Build.me
The Build solution is designed to prototype SAP Fiori develoment on the web (it is a cloud-based solution). To start, create a BUILD account. In your web browser, enter the site www.build.me Later, you proceed to enter the option of SIGN UP (Figure 3).

Figure 3
The Build sign-up page
Registration in Build starts with your email address. Click the PROCEED button (Figure 4). In the following screens, this information is requested: first name, last name, email, and password.

Figure 4
Create a Build account
At the end of the registration, a link is sent to your email to activate the account. Open the email and select the link to verify your email address.
Step 2. Create Projects
In this step, you indicate the necessary steps to create a new project. For my example, I show you how to create a project from the WORKSPACE tab on the Home page. Click the WORKSPACE tab and then click the SEE FULL GALLERY link (Figure 5).

Figure 5
Click the SEE FULL GALLERY link
In the next screen you can view a catalog of example applications. This catalog is a collection of SAP Fiori-based app templates designed by the Build community. You can explore the published projects, and for my example, click Track Sales Order (Figure 6).

Figure 6
Model selection of Track Sales Order
Figure 7
Figure 7
Clone an application
An information message is issued, confirming the application is cloning. Click the CLONE button after you receive this confirmation message.
The cloned project, Track Sales Order, and clone of the public file in the project are displayed in the WORKSPACE tab (Figure 8).

Figure 8
The cloned Track Sales Order project
Step 3. Develop the Prototype SAP Fiori App Track Sales Order
In this step, you include the Track Sales Order new pages based on the shipment documents associated with the sales order in your SAP Fiori application prototype. I describe the necessary steps for this action.
After you click the WORKSPACE tab (Figure 9), the system displays the projects that you are developing. In my example, the project is Track Sales Order.

Figure 9
Watch the projects in WORKSPACE
Click the image of your project. You then see a summary of pages of your project and a button called GO TO PAGE MAP. After you click this button, you can to go to the editing detail of your prototype application (Figure 10).

Figure 10
The GO TO PAGE MAP button
Now look at the pages that make up your prototype application. In the Contacts page, click the details icon
and then click the Duplicate Page option (Figure 11).

Figure 11
Select the Duplicate Page option
A window confirms that a new page has been created. First, you rename the Shipment page. To complete this step, click the detail icon. Select the Rename option (Figure 12).

Figure 12
Rename the Shipment page
After changing the name, double-click your new Shipment page to display the Edit page options. In the details of the Edit page, change the header title. Go to the Page Header field and change the name to Shipment (Figure 13).

Figure 13
Change the Page Header title
Now click the STANDARD LIST ITEM area (Figure 14).

Figure 14
Change the icon in the LIBRARY field
In the right side of the screen, change the icon in the LIBRARY field. Place an icon referenced to shipment, for example, a truck. Right-click the LIBRARY field and then select an icon from a drop-down list of icons. Select the shipping status icon.
Also, in the Properties section located on the right side of the screen, include the transport document properties (Figure 15).

Figure 15
Include the transport document properties
- Title: 1200001200
- Description: National Shipment
- Info: Completed
- Info Status: Success
Return to the Page Map by clicking the page map view icon
in the top menu bar. In the Page Map, locate the Sales Orders page and click it to open the Edit Page (Figure 16).

Figure 16
Edit page for Sales Orders
Click the Header Data zone. The main data of the document, such as document number or document date, is found in the Header Data section. In the lower right section, click the Attributes area and click the ADD button to enter a new attribute (Figure 17) to configure the actions, texts, and other actions of the fields.

Figure 17
Add a new attribute
Figure 18
Figure 18
Populate fields for the new attribute
Figure 19
Figure 19
Select parameters for the new attribute
Figure 20

Figure 20
Preview the application prototype
At the top of Figure 20, you see three icons for options to use the SAP Fiori application prototype: tablet, desktop, and phone
.
On the left side of the application is the Sales Order listing with document information (net value, number, and date). On the right side of the application are the details of the sales document (item, quantity, status) as shown in Figure 21.

Figure 21
The prototype application SAP Fiori Track Sales Order
If you click the Doc Shipment hyperlink (Figure 22), the system displays the created page named Shipment (Figure 23).

Figure 22
Click the Doc Shipment link

Figure 23
The Shipment page status
Step 4. Upload Data for the Prototype Test
You can create or import a data model into your prototype pages and then link the data to your user interface (UI). I explain the necessary steps to create and add objects manually. You may want to add an object to a data model or create a data model manually from the Data panel. This step allows you to have data for the prototype test. The data you register allows you to have real tests with the application.
The use of this functionality is located at the top left of the screen. Click the DATA button (Figure 24) to start using the data editor.

Figure 24
Click the DATA button to start using the data editor
After you click the DATA button, the system displays the tables and relationships that store the data of your SAP Fiori application prototype (Track Sales Order). The tables store the information in the application—for example, Sales Order, Materials, Quantities, and Status.
In the application program Track Sales Order, the present data storage tables are SalesOrder, SalesOrderItem, Product, and Shipping (Figure 25).

Figure 25
Data storage tables
After you click the DATA EDITOR button in Figure 25, you can see the tables and relationships that are in the application prototype (Figure 26). You see in the upper right the SAMPLES icon that allows you to enable the options of Import Data and Export Data.

Figure 26
Data Editor
The option to export data allows you to generate a file in Microsoft Excel, with the current values of the SAP Fiori application prototype. In this way, you can modify it with data related to the company (Figure 27).

Figure 27
Export data
Clicking the EXPORT option generates an Excel file that can be modified with values associated with your company or the case that you are making for the prototype of the application (Figure 28).

Figure 28
File data
After modifying the records in the Excel file, you can import them into the tables or database of the application prototype by clicking the IMPORT FILE link (Figure 29).

Figure 29
The IMPORT FILE link
Step 5. Test and Feedback Studies Prototype Application
In this step, I show you how to create and share Build feedback studies to gather detailed feedback about images and prototypes.
From the main page, in the upper bar click the name of your project (for my example, click Track Sales Order) to go to the main page of your project. Click the CREATE A STUDY link (Figure 30).

Figure 30
Create a Study
This action opens a screen that includes Study Name and Description fields. Enter a name (Track Sales Order) in the Study Name field and a description for the study in the Study Description field. Click the SAVE button to save your data (Figure 31).

Figure 31
Insert a study name and description
Creating a feedback study allows you to obtain feedback from users based on their experience with the SAP Fiori application prototype. In the Feedback page, select Create Question (Figure 32).

Figure 32
Select Create Question
Select or upload one or more images in the Images tab. The images are uploaded and displayed in the Select Images dialog. Select the images you want to include and click the SELECT button (Figure 33). Upload images of the zones or screens of the application in which you have questions for your users.

Figure 33
Select or upload one or more images
Select the thumbnail of the first image to add a question about the image and the Create a Question dialog is displayed (Figure 34).

Figure 34
Insert a question
An example of a question might be, Is the screen user friendly? In the right panel, specify how you want participants to respond to the question by selecting one of the following options:
- Respond by dropping annotations: specifies that participants respond by selecting an image to drop the annotation icons. (Examples of icons are a smile and a frown
). - Respond by entering text: specifies that participants can respond by entering an answer.
- Select answer(s) from multiple choices: specifies that participants can choose their responses to the question from a number of multiple choices.
After you make your selections, click the DONE button.
At the end you can publish your prototype of the SAP Fiori application Track Sales Order. Click the PUBLISH button (Figure 35). A message is then issued that the SAP Fiori application prototype will be published.

Figure 35
Publish the prototype
At the end, a web link is generated that you can share for the SAP Fiori Track Sales Order application prototype (Figure 36).

Figure 36
Invitation to participate in this study
By means of this email or link, users can interact with your application prototype SAP Fiori. They can complete tasks such as performing tests or documenting queries.
Diony J. Ruiz R.
Diony J. Ruiz R. is an SAP architect and senior consultant at Group Intellego. He has 12 years’ experience in SAP Sales and Distribution and SCE (Supply Chain Execution), Logistic Execution (LE), transportation, and warehouse management picking. He has additional knowledge in SAP MM (Materials Management).
He has worked in industries such as manufacturing, pharmaceuticals, logistics, third-party logistics distribution, services, public government, chemical, maritime and customs, metallurgy, automotive, and mining industries.
His roles have included SAP Consultant Specialist, Project Leader, and Area Leader.
He is an SAP Certified Professional.
You may contact the author at dionyruiz@gmail.com.
If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.