Tutorial: Build Your Own SAP Fiori Approve Purchase Order App
This is the beginning of a tutorial series about how to build your own SAP Fiori Approve Purchase Order app.
The purpose of this tutorial is to show you step-by-step how to build your own SAP Fiori Approve Purchase Orders app and provides additional insights into why certain aspects have been developed as they are.
To get started with the tutorial, it worth taking a look at some of the background information provided here in this chapter about SAP Fiori, design-led development, and the reference app on which this tutorial is based.
Just like an SAP Fiori app, this tutorial will basically consists of two parts:
The frontend part: the UI part implemented using SAPUI5 that consumes an OData service.
The backend part: the OData service. The way the service is implemented may differ depending on the release you are working with, e.g. EhP7 of SAP Business Suite on SAP HANA or SAP S/4HANA. In this tutorial, we’ll focus on Core Data Service (CDS) views that are the foundation of the SAP S/4HANA programming model.
This tutorial doesn’t cover the entire design-led development process, but assumes that the discover and design phases have been completed. After the first two phases of the design-led development process, there should be a UI mockup that can be implemented. To implement the UI, you need to derive a data model from the UI mockup. The data model is a service definition that describes the data to be provided for the app. The service definition is kept in a separate file (metadata.xml) that is shared between the frontend and backend.
This tutorial will also provide the required metadata.xml and sample data files.
This tutorial refers to version Q1/2016 of the reference apps / SAPUI5 version. Code may differ depending on your version. Additionally, some features of the reference app have be omitted for the sake of simplicity. This will be mentioned explicitly during the course of this tutorial.
Before you start this tutorial
SAP Fiori apps wrap exquisite user experience around business functions. Therefore, before you start, you should be familiar not only with development aspects but also with the design aspects of building an app. The design led development process ensures that design aspects are reflected in your app.
SAP Fiori apps are built using SAPUI5. SAPUI5 comes with excellent documentation and tutorials as part of the SAPUI5 Developer Guide. You should already be very familiar with SAPUI5 principles before you start this tutorial.
The app in this tutorial is based on the Approve Purchase Orders app that is part of the Fiori Reference Apps – a collection of sample applications used to illustrate best practices about how to build SAP Fiori apps. It’s worth taking a look at the reference app before you begin.
Something else to take a look at is the OpenSAP course: Build Your Own SAP Fiori App in the Cloud – 2016 Edition.
In order to successfully complete this tutorial, you need access to the following tools and systems:
SAP Web IDE – documentation and getting started info can be found here.
Standard developer authorization
SAPGUI and ABAP Development Tools for SAP NetWeaver
Please see the following explanations about how code examples are used in this tutorial.
Code to be inserted
Coding to be deleted
Code that is discussed
Note that any software coding or code lines/strings (“Code”) provided in this tutorial are only examples and are not intended for use in a productive system environment.
About the app
The Approve Purchase Orders app depicts a typical example of the approval process. It uses the master-detail pattern and shows a list of purchase orders on the left and the corresponding details on the right. Users can search for certain purchase orders and either accept or reject them. Once the purchase order has been approved or rejected, it disappears from the list. The app is designed to work on desktop and mobile devices. For the latter, offline mode is not supported.
The following diagram shows the architecture of the app. Solidly filled objects are part of the infrastructure used: red are the frontend parts; green are the backend parts. The diagonally shaded objects are the ones that we’ll develop and/or adapt in this tutorial.
I hope this introduction to the tutorial has sparked your interest in the chapters to come.
This post will be updated with chapters once they become available.
- Part 2: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 2)
- Part 3: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 3)
- Part 4: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 4)
- Part 5: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 5)
- Part 6: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 6)
- Part 7: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 7)
- Part 8: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 8)
- Part 9: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 9)
- Part 10: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 10)
- Part 11: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 11)
- Part 12: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 12)
- Part 13: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 13)
- Part 14: (Tutorial: Build Your Own SAP Fiori Approve Purchase Order App – Part 14)