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

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

Populate fields for the new attribute

Figure 19

Select parameters for the new attribute

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.