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.
Reading this article, you’ll learn how to:
- Create a user account in the Build.me website
- Create projects for the prototype
- Develop the prototype for the SAP Fiori Track Sales Order app in Build.me
- Upload data for the prototype test
- Test the prototype application and provide feedback for it
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
The stages of development of an SAP Fiori app
Before implementing an SAP Fiori solution, a business first 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
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.