Tutorial: Build Your Own SAP Fiori Approve Purchas...

jamesvernon_edenstrom · ‎09-16-2016

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.

Note:

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.

Also, get to know the SAP Fiori Design Guidelines. In this tutorial, the SAP Fiori app that we’re going to build is based on the master detail app as defined in the SAP Fiori Design Guidelines.

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:

Frontend:

SAP Web IDE – documentation and getting started info can be found here.

Backend:

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 example

Code before

Code to be inserted

Code after

Code example

Code before

Coding to be deleted

Code after

Code example

Code before

Code that is discussed

Code after

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.