Development of SAP S/4HANA add-ons and SAP Fiori tools with ABAP and SAP BTP
This guide provides a step-by-step guide to developing customized add-ons and tools for SAP S/4HANA and SAP Fiori. It covers the key concepts and technologies - SAP ABAP for the backend, SAP Business Technology Platform (SAP BTP) for cloud services and SAP Fiori/SAPUI5 for the user interface. It also covers setting up the development environment, developing ABAP extensions and Fiori apps, integration methods, monetization strategies and best practices. The content is structured for intermediate developers and provides detailed explanations, sample code and clear screenshots to facilitate learning.
1. introduction to the development of SAP add-ons
Overview of SAP S/4HANA and SAP Fiori:
SAP S/4HANA is the next-generation ERP business suite from SAP that runs on the SAP HANA in-memory database. It uses modern innovations in data processing and a simplified data model to provide real-time analyses and optimized business processes.
SAP Fiori is SAP's modern user interface (UX) and consists of web-based applications developed with SAPUI5. Fiori offers intuitive, role-based user guidance across different devices and is increasingly replacing the classic SAP GUI as the main user interface in SAP S/4HANA.
Instead of monolithic transaction screens, Fiori offers a collection of focused apps (tiles) for specific tasks (e.g. creating a sales order or approving vacation requests). These apps are accessible via the Fiori Launchpad. By consistently adhering to design guidelines and using a responsive, HTML5-based approach, Fiori significantly improves usability and productivity.
Importance of add-ons and tools:
Every company has unique requirements. Add-ons (custom extensions or plugins) and tools (custom applications, reports, integrations) allow organizations to adapt the standard SAP S/4HANA to their specific needs without changing the SAP core code. By developing add-ons, companies can close functional gaps, automate customized processes or improve user productivity.
SAP provides official extension mechanisms so that custom code can adapt the system to specific requirements while the core remains stable. Well-designed add-ons help maximize the ROI of an SAP implementation by adapting to business processes and evolving independently of SAP upgrades (thereby maintaining a clean core). In the SAP ecosystem, a robust add-on can even become a standalone product that can be reused or purchased by others - incentivizing partners and developers to drive innovation on the platform.
Central technologies
- SAP ABAP: ABAP (Advanced Business Application Programming) is the primary programming language for the SAP S/4HANA backend. ABAP runs on the ABAP application server and is used to develop customer-specific reports, transactions, data dictionary objects, enhancements and business logic. In S/4HANA (on-premise and private cloud), ABAP remains central for enhancements.
ABAP is also available in SAP BTP (via the ABAP Environment, also known as "Steampunk") to develop cloud-based extensions with a "clean core" approach. The deep integration of ABAP with the database (including ABAP Core Data Services for advanced views) and its numerous frameworks (BAPIs, enhancement spots, etc.) make it a powerful tool for enterprise development.
- SAP Business Technology Platform (BTP): SAP BTP is the cloud platform that provides services and environments to develop and run applications that extend or integrate SAP systems. It includes various runtime environments (Cloud Foundry, ABAP Environment, Kyma, etc.) as well as services for authentication, databases, integration, analytics, AI and more.
For our purposes, BTP enables the provision of individual applications (e.g. a Fiori UI5 app or an ABAP service) in the cloud and their connection to an S/4HANA system (on-premise or cloud). It supports the development of extension applications without affecting the on-premise system and is therefore in line with SAP's "clean core" strategy. In summary, BTP provides the infrastructure and services to develop cloud applications, integrations and innovations based on SAP solutions.
- SAP Fiori/UI5: SAP Fiori is the UX framework and SAPUI5 is the underlying front-end technology (a JavaScript UI toolkit) for developing responsive web applications. Fiori apps are web applications that follow SAP's Fiori design guidelines for consistency and usability. They retrieve business data from the SAP backend via OData services and present it in intuitive user interfaces.
SAPUI5 (and its open source variant OpenUI5) is the HTML5 framework used to develop these apps. Understanding Fiori requires knowledge of how to develop SAPUI5 applications (controllers, views, models) and deploy them either on an SAP frontend server (for on-premise Fiori) or on SAP BTP (for cloud deployments). In practice, developers use tools such as SAP Web IDE or SAP Business Application Studio to develop UI5 apps and make them available to users via the Fiori Launchpad.
By mastering ABAP, SAP BTP and Fiori/UI5, a developer can develop powerful end-to-end solutions:
- ABAP for individual business logic and data processing,
- Fiori/UI5 for the user interface,
- SAP BTP for cloud deployment and integration.
2. setting up the development environment
Before development can begin, it is crucial to set up a suitable SAP development environment. This includes access to an SAP S/4HANA system for ABAP development, the installation of the required IDEs and tools and the provision of cloud resources on SAP BTP for the development and deployment of Fiori apps.
Required software and tools
The following table summarizes the most important components that need to be installed or accessed:
Tool / Component
Purpose
SAP S/4HANA system (developer access)
An SAP S/4HANA instance to which ABAP development access exists. This can be an on-premise installation or a sandbox/test system. It serves as a backend for the creation of user-defined tables, ABAP programs, OData services, etc.
SAP GUI for Windows (and/or SAP Business Client)
Traditional desktop client for logging on to SAP systems. Required for using classic SAP development transactions (SE11, SE80, SE38, etc.) and for checking backend functionality. The latest SAP GUI versions support S/4HANA and include SAP Logon for managing connections.
Eclipse IDE with ABAP Development Tools (ADT)
Modern IDE for ABAP development. ABAP Development Tools is a plugin for Eclipse that provides an ABAP-specific development environment for coding, designing CDS views, debugging, version control (transports), etc. This is required to work with advanced functions such as ABAP CDS and new programming models. This is required to work with advanced functions such as ABAP CDS and new programming models. Eclipse (e.g. Eclipse 2023-xx) can be downloaded and the ADT plugin added via the update page https://tools.hana.ondemand.com.
SAP Business Technology Platform (BTP) Account
An SAP BTP account (either a free trial version or an Enterprise account) is required to use cloud services. A subaccount is created in BTP, services such as SAP Business Application Studio or SAP Web IDE are activated and destinations are configured for the connection to the S/4HANA system. The BTP Cockpit is the web interface for managing these resources.
SAP Business Application Studio (BAS) or SAP Web IDE
Cloud-based IDEs for the development of SAPUI5/Fiori applications. BAS is the newer, container-based development environment on BTP that offers a desktop-like experience in the browser (and replaces Web IDE). Web IDE Full-Stack is an older (now obsolete) tool that also runs in the cloud or locally and provides templates and wizards for Fiori development. One of these environments is used to create and deploy the Fiori/UI5 app.
SAP Cloud Connector (optional, for on-premise integration)
If the S/4HANA system is operated on-premise, the SAP Cloud Connector, as a small on-premise component, enables a secure connection between the SAP BTP cloud and the local network. This is used together with BTP target configurations to enable cloud apps to communicate securely with on-premise S/4HANA OData services.
Installation of SAP GUI and ABAP Development Tools
To install SAP GUI, downloadthe installer(SAP GUI for Windows 7.70 or 8.00) from the SAP Marketplace(requires an S-User ID) or use a test environment that contains it. The installation is carried out via a wizard. After installation, configure a connection to your SAP S/4HANA system in SAP Logon(you will need the application server host, the system number and the client). Once the connection is established, you can open SAP GUI and access transactions such as SE11 (Data Dictionary), SE38 (ABAP Editor), etc.
For ABAP in Eclipse (ADT), first install a supported Eclipse IDE on your computer (e.g. Eclipse IDE for Java Developers). SAP recommends the latest stable Eclipse version. After installing Eclipse, add the ABAP Development Tools plugin:
1. open Eclipse and go to Help > Install New Software.
2. enter the update site URL for ADT(e.g. https://tools.hana.ondemand.com/latest).
3. select ABAP Development Tools from the list and continue with the installation.
4 After a restart, open the ABAP Perspective in Eclipse.
5. create a new ABAP project in the ABAP Perspective by establishing a connection to your S/4HANA system (this can be done either via an SAP logon entry or by manually entering the connection parameters ).
6. you can then browse ABAP packages and objects in Eclipse and perform development tasks with advanced functions such as syntax checking, code completion, debugging and Git integration via abapGit.
Setup of SAP BTP
If you do not yet have an SAP BTP account, register for an SAP BTP trial or free-tier version. As soon as you have a global account on SAP BTP, open the SAP BTP Cockpit in your web browser and carry out the following basic configuration:
1. create subaccount
- The subaccount represents an isolated environment(region + platform).
- Select a region (e.g. Europe Frankfurt) and a sub-account name.
- Select the entitlements (services) you want to use (e.g. SAP Business Application Studio, Portal Service (Launchpad), Destination Service, Cloud Connector, etc.).
2. space (Cloud Foundry Runtime)
- If you use the Cloud Foundry Runtime (e.g. for the provision of HTML5 apps), activate Cloud Foundry and create an organization and a space within the subaccount.
- This is necessary in order to use certain services or provide web applications.
3. tools & services
- Go to the Service Marketplace in the subaccount and activate the SAP Business Application Studio (BAS)or SAP Web IDE service.
- If you use BAS, create a service instance (Dev Space) of the type SAP Fiori (this is already preconfigured with SAPUI5 tools).
- If you use Web IDE, activate the subscription for SAP Web IDE Full-Stack and start it via the BTP Cockpit.
4. set up destinations
- If your Fiori app needs to retrieve OData services from S/4HANA, set up a destination in the BTP Cockpit.
- Go to Connectivity > Destinations and configure a new destination with the URL to the OData endpoint of your S/4HANA system (e.g. SAP Gateway Server URL), authentication details(OAuth or Basic Auth with technical user), etc.
- If your S/4 system is on-premise, you must also set up the SAP Cloud Connector to map the on-prem host to an accessible virtual host.
- To do this, install the SAP Cloud Connector on a server in your network and log in with your BTP account to establish the connection.
Destinations are essential as they enable cloud applications to consume secure on-premise OData services via SAP's connectivity layer.
Configuration of the Fiori/UI5 development environment
After BAS or Web IDE is activated, configure your Fiori development environment:
- In SAP Business Application Studio (BAS)
- Open your Dev Space, which already contains the SAPUI5 SDK and the necessary tools.
- If necessary, import relevant SDKs or set up a Git repository for your project.
- BAS is usually already preconfigured for Fiori development.
- In SAP Web IDE
- Start Web IDE via the BTP Cockpit(Service > SAP Web IDE > Open Web IDE).
- No local installation is required as it runs directly in the browser.
- Check whether the destination to the S/4HANA system is configured correctly(Web IDE uses the destinations defined in BTP Cockpit to discover OData services).
- Ensure SAPUI5 library version
- Make sure that you have access to a SAPUI5 version that matches the S/4HANA Fiori frontend version.
- In BAS/Web IDE, you can select the SAPUI5 version (e.g. 1.108 or 1.96, depending on the S/4HANA version).
- Alternative on-premise development for UI5
- If you prefer on-premise development, you could alternatively install the SAP Web IDE Personal Edition locally.
- You can also use any other IDE and work with the UI5 CLI tools.
- However, the use of SAP Cloud IDEs is recommended as they offer seamless integration with SAP systems.
Your development environment is now ready
With this facility you have:
ABAP development access (via SAP GUI and Eclipse ADT) for backend development
SAP BTP with a Fiori development environment(BAS or Web IDE) for UI development
In the next sections, we will develop ABAP add-ons and Fiori apps with this environment. 🚀
3. development of SAP add-ons with ABAP
SAP ABAP is used to extend S/4HANA by creating user-defined objects and extending standard functions. In this section, we cover the central ABAP development tasks:
- Creation of user-defined tables and function modules,
- Development of reports and transactions,
- Use of extension frameworks (BADIs and user exits) to modify the standard behavior,
- Creation of ABAP Core Data Services (CDS) views.
Familiarity with the SAP development environment(SE11, SE80 etc.) is a prerequisite.
ABAP development concepts
In SAP, development objects (programs, tables, data elements, classes, etc.) are typically created in the ABAP Workbench (SE80) or in the Eclipse-based ADT (ABAP Development Tools). ABAP follows a modular approach:
- Data structures are created in the ABAP Dictionary (transaction SE11). These include tables, data elements (field definitions), structures, views and search helps.
- Reusable logic can be encapsulated in function modules (SE37), class methods (SE24 for classes) or BAPIs.
- Reports (executable programs) are created via SE38 or in Eclipse ADT(REPORT or PROGRAM statement). Transactions (T-codes) are created via SE93 to make these programs or function modules executable for end users.
- SAP enhancement techniques(user exits, customer exits, BADIs, enhancement spots) make it possible to insert user-defined logic into standard SAP processes without changing the original code.
- ABAP CDS views are defined in Eclipse ADT as .ddl source files and provide a powerful way to create data models and make them available for OData.
These aspects are dealt with step by step below.
Creation of a user-defined table and a function module
Create user-defined table
Suppose we want to create a user-defined database table to store company-specific data such as "Customer sales by region". To do this, we use transaction SE11 (ABAP Dictionary) and proceed as follows:
1. open SE11 and select the database table. Enter a name for the new table (e.g. ZCUST_REV - user-defined objects usually start with "Z" or "Y") and click on Create.
2. enter a short description for the table, select a delivery class(e.g. 'A' for application tables) and define the table maintenance attributes (e.g. whether entries can be maintained via SM30 ).
3. define the table fields in the "Fields" tab:
- Field name
- Data element or predefined type
- Length
- Key identification (Primary Key)
- Example of fields:
- ZCUST_NO(customer number, NUMC(6), key field)
- ZREGION(Region, CHAR(3), Schlüsselfeld)
- ZREVENUE(turnover, DEC(15,2))
- If no predefined data elements are available, the "Predefined Type" button can be used to define types directly.
4. specify technical settings(configure data class and size category via the "Technical settings" button) to define the database storage parameters.
5. save and activate table - Activation creates the physical table in the database. It can then be called up via SE11 or SE16/SE16N to enter test data.
Illustration: Definition of a user-defined table in the ABAP Dictionary (SE11). In this example, the table ZCUST_REV is created with fields (e.g. customer number). The developer defines the name, the data type(NUMC with length 6 for the customer number) and the key identifier for each field. Such user-defined tables enable the persistent storage of application-specific data in the S/4HANA database.
As soon as the table is activated, it can be written to by ABAP programs or a maintenance dialog can be created for usersto edit entries. User-defined tables are transported across systems via workbench transports.
Function module
To create a reusable function (e.g. a function for calculating a bonus or for querying aggregated data), use SE37 (Function Builder):
1. open SE37, select Create function module and assign a name (e.g. ZCALC_BONUS) within a user-defined function group (functions exist in groups). Enter a short description.
2. define import parameters, export parameters and exceptions in the upper area of the Function Builder. These parameters form the interface of the function.
3. implement the ABAP logic in the source code area. For example:
- Importing an employee ID
- Query the database for sales data
- Calculate a bonus
- Return the bonus amount as export value
4. save and activate the function module. It can now be called from any ABAP program or released as a remote-capable API (RFC).
Function modules can also serve as user exits(SAP sometimes provides empty function modules that are called and filled by customers when certain events occur). They can also be integrated into OData or SOAP services and made available for external systems.
Developing a Custom Report and Transaction Code
Creation of a customized report and transaction code
Customized report
ABAP reports are stand-alone executable programs that are often used for data queries, simple outputs or batch jobs. To create a report:
1. open SE38 (ABAP Editor) and create a new program (type: "Executable").
2 Alternatively, you can create a new ABAP program in Eclipse ADT.
A simple report that lists customers and their sales could look like this:
REPORT zcustomer_revenue_report.
TABLES: zcust_rev. " declare usage of the custom table
SELECT zcust_no AS Customer, SUM(zrevenue) AS Total_Revenue
FROM zcust_rev
GROUP BY zcust_no
INTO TABLE @DATA(lt_rev_by_cust).
LOOP AT lt_rev_by_cust INTO DATA(ls_line).
WRITE: / ls_line-Customer, ls_line-Total_Revenue.
ENDLOOP.This program executes a SELECT query on the user-defined table to aggregate sales by customer. The results are then output in a loop. In practice, reports are often created with the ALV grid display for a better user interface and selection screens for user input (using PARAMETERS or SELECT-OPTIONS in the code).
Once the report has been created, it must be activated. You can run it directly in SE38 or via SA38 by entering the program name.
If end users should simply start this report, a transaction code can be created:
1. open SE93 (Maintain transactions).
2. select Create and enter a transaction code (e.g. ZCUST_REV_REP).
3. select "Program and selection screen" as the transaction type and link the transaction to the report program.
4. save the transaction - users can then run the report using this transaction code from the SAP Easy Access menu.
Custom transactions can also be included in user menus or roles so that they are displayed in the SAP Fiori Launchpad (as GUI transactions) or in the SAP GUI Easy Access menu.
Extension of SAP standard functionality (BADIs and user exits)
SAP provides extension mechanisms that allow user-defined code to be executed at predefined hook points in standard programs. This ensures that standard SAP code is not changed (which would make future upgrades more difficult), while still allowing custom logic to be inserted. The two most common enhancement techniques are User Exits (including Customer Exits) and BADIs (Business Add-Ins):
User Exits / Customer Exits
These are classic (usually procedural) extension techniques. A user exit is a subroutine or a function module that SAP calls at certain points in the program. By default, these exits do nothing, but can be implemented by customers.
📌 Example:
In the SD module, user exit MV45AFZZ enables the insertion of user-defined checks during order processing.
How to implement a user exit:
1. find the relevant SMOD/CMOD extension. SAP often groups several exits in an SMOD extension witha specific name.
2. open CMOD, create a project, assign the relevant extension and insert your code into the designated includes or function blocks.
3. after activation, the user-defined code is automatically executed as part of the standard process.
User exits often require code in includes or function modules that SAP has defined as exit points.
BADIs (Business Add-Ins)
BADIs are a more modern, object-oriented extension technique. A BADI is an interface with one or more methods that SAP provides at a specific point in the code. Developers can create one or more implementations of this interface to execute their custom code.
BADIs are managed via transactions SE18 (definition, by SAP) and SE19 (implementation, by customers). SAP provides BADI definitions (e.g. there is a BADI for enhancing invoice posting). The developer creates a BADI implementation in which he implements the logic in one of the methods provided.
Main difference between user exits and BADIs:
✅ User exits are older, procedural methods that are often more limited (e.g. embedded in includes).
BADIs are fully object-oriented and can have multiple implementations(some BADIs allow parallel or filter-controlled implementations).
Implementing a BADI - step by step
1. find the correct BADI definition
- Use SE18, the SAP documentation or the "Where to use" search in SAP GUI with the term "BADI".
- In newer systems, many enhancements are managed via enhancement spots, which can contain several BADIs.
2. create new implementation in SE19
- Open SE19, create a new BADI implementation, give it a name and select the appropriate BADI definition.
3. create class for the implementation
- The system prompts you to create a class that implements the BADI interface.
- In this class, you write the user-defined logic in the methods provided.
4. activate BADI implementation
- As soon as the implementation is activated, your code is automatically executed when the standard program calls the BADI via CALL BADI or the Enhancement Framework.
- If there are several implementations, either all are executed in parallel or only the appropriate implementation is executed based on a filter condition - depending on the BADI configuration.
Example of a BADI implementation
Assume that SAP's standard invoice posting uses the BADI BADI_INVOICE_POST with the CHECK_DATA method, which is called before the invoice is posted for data validation.
A developer could implement this BADI to perform additional checks, e.g:
✅ Checking a user-defined table for special rules
✅ Comparison with an external system before the invoice is posted
📌 Important:
The BADI mechanism ensures that the user-defined code is executed without changing the SAP standard logic and thus enables a flexible and maintainable extension of SAP functionality.
📖 According to official SAP documentation:
"BADIs (Business Add-Ins) are a powerful mechanism in ABAP for extending standard SAP functionality without changing the core code. They offer a flexible and maintainable way to customize SAP applications."
Similarly, user exits enable extensions at predefined points (e.g. at the end of form routines, etc.). Both techniques can be used within a project:
📌 Example: A user exit is used to add a new field on a screen, while a BADIis usedto fill the value for this field.
Steps for implementing a user exit (brief overview)
1. identify the exit - via SAP Notes or development documentation.
- Example: An SAP SD exit for sales orders could be located in program MV45AFZZ.
2. call up CMOD → create project → assign the relevant extension (an extension combines related exits).
3. for each component of the extension (e.g. an include or function module), click on Components and navigate to the corresponding include.
- Write the user-defined code within the include(between FORM...ENDFORM or as intended).
4. activate the project - The code in the includes is now executed as part of the SAP standard process.
Steps for implementing a BADI (brief overview)
1. find the BADI name
- Use SE18 or debugging/SQL trace to check whether GET_INSTANCE is called for a specific process.
2. open SE19 → create new BADI implementation → enter the BADI definition.
3. specify an implementation class (or accept the default class) and navigate to the class editor.
4. write code in the method
- Example: If the CHECK_DATA method has import parameters, a check can be implemented, an export flag can be set if required or an exception can be triggered.
5. activate the implementation.
Additional BADI options
Many BADIs have a filter option, i.e. the implementation can be restricted to certain criteria (e.g. company code or country). These settings are defined in the BADI implementation configuration.
Extension framework in SAP (from ECC 6.0 and S/4HANA)
With ECC 6.0 and S/4HANA, SAP introduced implicit and explicit enhancements.
These make it possible to add extensions in certain coding blocks or at the beginning/end of form routines.
📌 These are managed directly in the ABAP Editor via the "Enhance" option and are another way of extending standard or user-defined code.
📢 For medium-sized development projects, however, BADIs and user exits are the most frequently used techniques and should be the focus.
Creation and provision of ABAP CDS views
ABAP Core Data Services (CDS) views are a central component of S/4HANA development and play a crucial role in SAP's strategy for in-memory-optimized programming.
CDS views make it possible to move complex logic and calculations directly to the HANA database level. This allows them to be reused efficiently in user interfaces (Fiori) or integration scenarios.
CDS views are defined in ABAP with an Eclipse-based editor.
➡ They use a declarative SQL-like syntax and integrate with the ABAP Data Dictionary after activation.
Important features of CDS Views
CDS views are defined with the DEFINE VIEW syntax in a DDL source file.
- You can reference base tables or other views,
- Apply filters, joins, associations and even simple calculations.
✔ CDS views support annotations - metadata that:
- Provide the view as an OData service,
- Control the UI behavior in Fiori Elements.
After activation, a CDS view is generated:
- An SQL view in the HANA database,
- A runtime object in ABAP that can be used like a table in ABAP programs using a SELECT query.
Creation of a CDS view (step-by-step)
1️⃣ In Eclipse ADT:
- Create a new ABAP DDL source document (e.g. ZCUST_REVENUE_VIEW).
- A transport request and a package must be selected depending on the project.
2️⃣ Use of the CDS syntax to define the view.
- Example:
@AbapCatalog.sqlViewName: 'ZCUSTREVV'
@AbapCatalog.compiler.compareFilter: true
@OData.publish: true
define view ZCUST_REVENUE_VIEW
as select from zcust_rev
{
zcust_no,
zregion,
sum( zrevenue ) as total_revenue
}
group by zcust_no, zregionThis defines a CDS view that aggregates the user-defined table by customer and region and totals the sales.
The annotations used here specify the associated SQL view name and enable the OData Expose function.
📌 @OData.publish: true would automatically generate an OData service for this view in SAP S/4HANA.
Steps after defining the CDS view
1️⃣ Activate CDS-View
- Activation creates the database view and makes the OData service available.
- If OData is used, SAP automatically generates a service in the background, which you can find in transaction /IWFND/MAINT_SERVICE and activate for use.
2️⃣ Test CDS-View
- Perform data preview in Eclipse or
- Call up the generated SQL view in SE16.
CDS Views as a multi-layer architecture
CDS views can be divided into layers:
📌 Base layer → Composite layer → Consumption layer (Consumption Views).
CDS views are used extensively in S/4HANA - many preconfigured S/4HANA analyses and Fiori elements are based on them.
✅ A major advantage is that a CDS view can be provided as an OData service with just a few annotations.
- This often eliminates the need to manually create an OData service for simple read operations - the platform generates this automatically.
Provision and transport of CDS views
- After creation, CDS views can be transferred to other systems via the usual SAP transports.
- CDS views are objects of type R3TR DDLS and can be transported from DEV to QA and production after development and testing.
Summary
ABAP development for add-ons includes:
The creation of user-defined dictionary objects (tables, data elements),
✔ Writing ABAP programs or extending existing programs,
✔ The use of ABAP frameworks such as CDS and enhancement spots to extend standard functions in an upgrade-proof manner.
4. development of Fiori applications with SAP BTP
In this section, we switch to front-end development:
SAP Fiori applications with SAPUI5.
These applications run in the web browser (or in the Fiori Launchpad) and communicate with the SAP S/4HANA backend via OData services.
We use SAP's cloud-based development environments (SAP Web IDE or SAP Business Application Studio on SAP BTP) to create, test and deploy a Fiori app.
Overview of the SAP Fiori/UI5 architecture
An SAP Fiori application typically follows a client-server model:
Client side → The SAPUI5 app (HTML5/JavaScript application) runs in the browser and manages the user interface and user interactions.
✔ Server page →
- The SAP S/4HANA system (or an SAP BTP ABAP environment) provides business data via OData services.
- The SAP Gateway component (integrated in S/4HANA) publishes these OData REST endpoints, which are used by the UI5 app to create, read, update or delete data (CRUD operations).
SAP Fiori Launchpad - The central entry point
SAP Fiori apps are started from the SAP Fiori Launchpad.
📌 The Launchpad is a web platform that serves as a central homepage with tiles for each app.
✔ Each tile represents a Fiori app (or a link to a classic GUI transaction).
The tile is linked to an OData service and a UI5 component name.
✔ When a user clicks a tile, the UI5 app is loaded in the browser and calls the OData services in the backend to fetch or send data.
Fiori apps are role-based:
- Users only see the apps for which they are authorized.
- The authorizations control which actions are possible within the app.
Architecture: Separation of UI and backend through OData
Fiori uses a decoupled model in which the UI is separated from the backend by OData services:
The same OData service can serve multiple interfaces(web UI, mobile UI, etc.).
The UI does not communicate directly with the database, but via defined service APIs.
Summary
➡ "SAP Fiori apps are developed with SAPUI5, launched via the SAP Fiori Launchpad and obtain business data from the SAP S/4HANA backend via OData services."
The architecture is stateless (each OData call is independent → better scalability).
✔ Modern concepts such as "draft handling" for long-running transactions are supported.
Now we are developing a Fiori app - step by step. 🚀
Creation of a Fiori app with SAP Web IDE / Business Application Studio
In this example, we use the SAP Web IDE (full stack) to develop a Fiori app.
📌 The steps are very similar in SAP Business Application Studio (BAS).
Step-by-step guide to creating a Fiori app
1️⃣ Launch SAP Web IDE
- Open SAP Web IDE via the SAP BTP Cockpit (make sure it has been activated beforehand, as described in section 2).
- The web-based development environment should now be visible.
- Select File > New > Project from Template to start the project wizard for a new Fiori app.
- (In Business Application Studio: Open a Dev Space and use the "Fiori: Create Project" command or the Yeoman templates.)
2️⃣ Select project template
- The SAP Web IDE offers predefined project templates, e.g:
- SAP Fiori Worklist Application
- SAPUI5 Application
- Master-Detail Application
- For example, select the SAP Fiori Master-Detail Application and click Next.
Configure 3️⃣ project
- Enter a project name (e.g. CustomerRevenueApp).
- If necessary, specify a namespace.
- Select the data source for the app:
- If an OData service already exists (e.g. the previously created CDS View or an SAP standard service), select Service Catalog.
- Then select the preconfigured destination and the OData service from S/4HANA.
- The wizard automatically retrieves the service metadata.
- Select the entity set to be displayed in the app (e.g. an entity for customer sales).
Complete 4️⃣ Wizard
- The Web IDE now generates a complete project with all the necessary files:
- Controller (JavaScript)
- Views (XML)
- i18n texts (multilingualism)
- manifest.json (application description)
- This generated project is ready to run and can be tested immediately.
Run and test 5️⃣ app
- Right-click on the newly created project folder and select Run > Run as Web Application.
- This opens a new browser tab with a test URL (often port 8080 for local tests or an FLP sandbox mode in the cloud).
- The app is loaded and calls up the OData service (via the configured destination).
- If everything is set up correctly, you will now see real data from your backend, e.g:
- A customer list
- A detail page with sales data for each customer.
6️⃣ Develop the app further
- Now you can customize the generated code:
- Open the view XML files to change the UI layout or the labels.
- Edit the controller JS files to add additional logic (e.g. input validation, dynamic navigation).
- Customize the i18n property files to localize texts.
- Add new UI elements (charts, tables, filters) with SAPUI5 controls and bind them with OData data.
Typical development tasks in a Fiori app
✅ Data formatting (with formatters in UI5).
✅ Navigation between views (if not included in the template).
✅ Custom OData calls - method calls for actions such as approvals or data changes.
✅ Performance optimization
- Use of $select or $expand in OData queries to minimize the data load.
Debugging and testing during development
🛠 During development, it is often:
✔ Use the browser console (Chrome DevTools) for troubleshooting.
✔ Used the UI5 debugging tools.
✔ The Fiori Launchpad Sandbox mode in SAP Web IDE or BAS is used to test multiple apps in a simulated Launchpad environment.
🚀 Next step: further develop the Fiori app and make it available for productive use!
Illustration: Example of an SAP Fiori Launchpad home page with tiles
Each tile (square icon) represents a Fiori app or a business task (e.g. manage orders, team calendar). The Fiori Launchpad provides a role-based, personalized entry point for end users.
Clicking on a tile launches the SAPUI5 app, which then interacts with the S/4HANA backend via OData services.
Connection of the Fiori app with the SAP S/4HANA backend
In order for the Fiori app to display real-time data or execute transactions, it must communicate with SAP S/4HANA.
This is done via OData services.
📌 An SAP BTP destination was configured for the S/4HANA OData service in our environment.
📌 If the UI5 app is executed from the BTP environment, it uses this destination to communicate with the backend.
Important steps for integration
✔ Activate OData service in S/4HANA
- Use /IWFND/MAINT_SERVICE to activate the OData service.
- If a CDS view was created with @OData.publish: true, the associated ZCUST_REVENUE_VIEW_CDS service must be activated.
Define data source in manifest.json of the Fiori app
- In SAP Web IDE on BTP, a route such as /destinations/YourDestinationName/ is often used in the OData service URL.
- This allows the call to be made via the SAP Cloud Connector/Destination Setup to reach the on-premise system.
✔ Use BAS and SAP Launchpad Service
- If BAS is used and the app is provided in the SAP Launchpad service, the destination must be mapped similarly.
- During development, the app can be tested in a "mock" environment or with a proxy.
✔ Test integration
- Use tools such as the browser's network analysis or the SAP Gateway error logs (/IWFND/ERROR_LOG) to debug problems (e.g. missing authorizations or service errors).
- If necessary, OData calls must be adapted or $metadata requests added.
📌 Example:
When the app loads a customer list, it sends an OData request to :
➡ .../ZCUST_REVENUE_VIEW_CDS/CustomerRevenueSet
SAP Gateway receives the request, executes the CDS view and sends the data as a JSON response to the UI5 app.
🔒 Safety aspect:
The user stored in the BTP destination requires a PFCG role in S/4HANA that grants access to the OData service and the entity set.
Provision of a Fiori app on SAP BTP
After development and testing, the Fiori app must be made available so that end users can access it.
There are two common deployment scenarios:
1️⃣ Provision on SAP BTP (Cloud Foundry) as an HTML5 application
In SAP Web IDE there is the option Deploy > Deploy to SAP Cloud Platform.
✔ This packages the UI5 app and makes it availableas an HTML5 application in the Cloud Foundry Space of the BTP sub-account.
✔ After deployment, the app can be accessed via a URL or integrated into the SAP Launchpad Service (portal).
📌 Steps for deployment:
1. in SAP Web IDE:
- Deploy to SAP Cloud Platform and log in with BTP access data.
2. select the target environment:
- Select subaccount and Cloud Foundry Space.
- Specify the OData destination so that the app in the cloud finds the correct connection to S/4HANA.
- After deployment, the app appears in the HTML5 Applications section of the BTP Cockpit.
3. integrate the app into the Fiori Launchpad:
- In BTP Cockpit, navigate to Services > Launchpad (Site Manager).
- Create a new site or use an existing one.
- Add a new app in the Content Manager:
- Titles awarded
- Select Cloud Foundry HTML5 app as storage location
- Select the currently deployed application from the drop-down list
- Configure tile style and destination
4. assign app to a group and a catalog.
5. assign role for user.
✅ Now a user can log in to the Fiori Launchpad and see the tile for the app.
✅ Clicking on the tile opens the live application, which now runs on BTP and communicates with S/4HANA.
2️⃣ Deployment on an on-premise SAP front-end server (FES)
If no BTP front-end is used, the app can also be provided on a local SAP FES (front-end server):
📌 Steps for deployment on FES:
✔ The UI5 app must be uploaded to the SAPUI5 ABAP repository:
- Transaction /UI5/UI5_REP_UPLOAD
- Or via SAP Web IDE > Deploy to SAPUI5 ABAP Repository
✔ The app can then be launched via the on-premise Fiori Launchpad.
➡ This scenario is only relevant if BTP is not used.
➡ O ur focus is on cloud provision via BTP.
Summary: Deployment of our custom app in SAP BTP Launchpad
Start 1️⃣ Deployment → Click on "Deploy to SAP Cloud Platform" in the Web IDE
Select 2️⃣ Subaccount & Cloud Foundry Space → App is provided in BTP
3️⃣ Integrate into BTP Launchpad → Create app as a tile in the Launchpad service
4️⃣ Set permissions → Assign app to a catalog, a group and a role
5️⃣ Test app → The tile appears in the Fiori Launchpad, app runs with S/4HANA data
Why cloud deployment in BTP?
No UI installation on S/4HANA necessary - only the OData service needs to be available.
✅ Independent maintenance and updates for the UI5 app.
Future-proof architecture with cloud extensions instead of on-prem modifications.
Conclusion: Modern Fiori development with BTP
✔ We have created a Fiori app with Web IDE/BAS.
✔ The app was connected to S/4HANA via OData.
✔ The provision was made on SAP BTP.
📌 This architecture corresponds to SAP's "side-by-side" approach:
✅ Individual UI5 applications run in the cloud (BTP)
Backend communication takes place via standard APIs (OData)
S/4HANA remains upgradeable and is not modified directly
🚀 The app is now ready for use and integrated into the SAP cloud ecosystem!
5. integration with SAP S/4HANA
Integration is a crucial aspect in the development of add-ons.
➡ Custom solutions often need to communicate with SAP S/4HANA or other systems,
➡ Exchange data or
➡ Trigger processes across systems.
📌 O Data for Fiori apps is a method that has already been covered.
📌 Here we look at further integration options and best practices for SAP add-ons.
Integration techniques for SAP add-ons
✔ Use of OData services (SAP Gateway)
OData is the primary protocol for SAP Fiori and all RESTful integrations with SAP.
📌 When is a user-defined OData service required?
- If a user-defined function (e.g. a function module or an ABAP class method) has been developed,
- Can this be made available via an OData service?
- This is done with transaction SEGW (SAP Gateway Service Builder).
📌 Steps for creating an OData service:
1. create OData project in SEGW
2. define data model(entity types/sets manually or via RFC/BAPI import)
3. implement CRUD methods (GET, POST, PUT, DELETE) in ABAP
4. generate and activate service
5. external applications can call the service via HTTP(S)
OData supports XML or JSON and can be tested with tools such as SAP Gateway Client or Postman.
OData/REST is often preferred for real-time communication because it is lightweight and web-based.
✔ Development and provision of SAP APIs
In addition to OData, SAP S/4HANA can also provide other API formats:
SOAP web services(older, but still used for certain integrations - transaction SOAMANAGER)
RFC/BAPI interfaces(point-to-point integration, e.g. for .NET or Java applications via RFC SDK)
A user-defined BAPI or function module can be published as a web service.
SAP allows the provision of an RFC-capable function module as a SOAP service via SICF/SOAMANAGER.
Today, however, SAP recommends RESTful Services or the ABAP RESTful Application Programming Model (RAP)for new APIs.
SAP API Business Hub offers ready-made APIs for S/4HANA (OData and SOAP).
➡ Best practice: Use existing APIs before developing a new one.
Supported formats: OData/JSON, XML/SOAP etc. for communication with SAP and non-SAP systems.
Integration of SAP add-ons with external applications
If an SAP add-on needs to be connected to non-SAP systems (e.g. a third-party CRM or cloud services):
SAP BTP offers middleware such as SAP Cloud Integration (CPI) or API Management.
✔ Better than a direct HTTP call from ABAP (possible with CL_HTTP_CLIENT).
✔ Middleware decouples systems and ensures secure communication.
📌 Example:
An SAP add-on sends data to a cloud CRM.
Bad solution: Direct HTTP call from ABAP to the CRM.
✅ Better solution: Use SAP CPI as an integration layer to orchestrate API calls.
For simple integrations, ABAP can also consume web services or REST APIs (CL_HTTP_CLIENT, IF_HTTP_SERVICE).
✔ Typical integration scenarios
📌 F requent integration flows in extension projects:
Outbound IDocs or messages for event-driven integration(e.g. send IDoc when order is created).
Scheduled jobs that extract SAP data and send it to external systems(via file or HTTP).
✔ Real-time API calls, e.g. a user clicks in SAP → API call to third-party provider is triggered.
📌 Example with SAP BTP:
A serverless app on SAP BTP that regularly queries SAP data via an OData service and stores it in an external database.
Best practices for integration development
✔ Choose the right protocol:
- OData/REST → Real-time queries and updates.
- SOAP → If required by legacy systems.
- IDocs or events → For asynchronous data exchange.
✔ Pay attention to safety:
- OAuth tokens or API keys for external APIs.
- SAP authentication for incoming API calls (via SAP Cloud Connector or Gateway with user roles).
Testing is crucial:
- SAP tools: /IWFND/GW_CLIENT for OData, SLG1 for logs.
- External tools: Postman, SOAP UI for simulating API calls.
✔ Install error management:
- Log failed API calls (SLG1 Application Log).
- Send automatic alerts to admins in the event of errors.
Extension via APIs: more than just Fiori apps
📌 If an add-on is provided via services, it can be used not only in Fiori apps, but in any external application.
📌 Example:
✔ A mobile app could use the same OData service to retrieve S/4HANA data.
A partner system could trigger an action in SAP via an API.
➡ The principle: S/4HANA becomes the digital core and provides APIs to communicate with other systems.
Summary of the integration of SAP S/4HANA add-ons
✅ Most common method: OData services as an integration layer for data exchange with external applications.
✅ Flexible architecture: loose coupling between S/4HANA and external systems.
SAP as the digital core: add-ons use APIs to interact with Fiori, mobile apps or third-party providers.
🚀 Modern SAP integrations are API-based and enable a flexible, future-proof architecture!
6. monetization of SAP add-ons and tools
Once an SAP add-on or tool has been developed, the question of monetization arises.
➡ Possibilities:
✔ S ales to SAP customers
✔ O ffer as a service (subscription, consulting)
✔ Use as a competitive advantage in consulting
The SAP ecosystem offers various options for monetizing innovations:
Publication in the SAP Store (formerly SAP App Center)
📌 What is the SAP Store?
✔ An online marketplace from SAP where partners can offer their software products.
✔ Enables the listing of SAP S/4HANA extensions, Fiori apps and integrations.
✔ Provides access to thousands of SAP customers worldwide.
📌 Advantages of publishing in the SAP Store:
✔ High visibility for SAP customers.
✔ Customers can discover, test and buy solutions.
✔ SAP Store takes over payment processing - partners focus on product development and support
✔ Over 3,000 applications and services are already marketed via the store.
📌 How to publish an add-on in the SAP Store?
1. registration as SAP partner required.
2. review process by SAP (check for quality and integration standards).
3. optional: SAP certification of the solution (increases customer confidence).
4. customers can either use free trial versions or purchase licenses directly.
SAP PartnerEdge Program
📌 What is SAP PartnerEdge?
SAP's official partner program for the marketing and sale of SAP extensions.
✔ Four engagement models: build, sell, service, run.
✔ The "Build" variant is relevant for the monetization of an add-on.
📌 Advantages as a PartnerEdge Build partner:
SAP licenses for development & support.
SAP certification possible for the add-on.
✔ Marketing and sales support from SAP.
✔ Co-selling opportunities with SAP sales.
📌 Note:
➡ If you want to list your add-on in the SAP Store, you often have to be an SAP PartnerEdge Build member.
➡ PartnerEdge also regulates distribution agreements in order to monetize add-ons efficiently.
✔ Consulting & freelance services
📌 Monetization via consulting instead of software sales
- Many SAP developers offer consulting services instead of selling their add-on separately.
- Specialized add-ons are not sold directly, but are implemented individually for customers.
- SAP consultants with expertise in S/4HANA, ABAP and Fiori are in high demand.
📌 Advantages of the consulting model:
Monetization takes place via project fees instead of license sales.
✔ Each implementation can be individually adapted to the customer.
Freelancers often use their own tools/add-ons as "accelerators" to implement projects faster.
✔ No effort for software sales and license management - instead, direct billing for development time and expertise.
📌 Who is this model suitable for?
SAP consultants and developers who do not want to organize software sales and support themselves.
✔ Implementing individual solutions for customers instead of selling generic software products.
Licensing and sales models for SAP add-ons
📌 Possible licensing models:
Per-user licensing (price per user).
Per-server or CPU licensing (depending on system size).
Subscription model (SaaS) → Monthly or annual fee for cloud-based add-ons.
Usage-based monetization → Price per processed business transaction (e.g. per invoice or order).
📌 Pricing and maintenance:
✔ Companies expect maintenance contracts → often 15-20 % of license costs annually for support & updates.
✔ O ffer packages & editions:
- Basic version (standard functions)
- Premium version (extended features, integrations)
Pricing must reflect the benefits → Enterprise customers often demand scalability.
📌 Additional sales opportunities:
✔ Collaboration with SAP Sales (e.g. co-selling with SAP Account Executives).
Add-ons can be offered by SAP partners as part of larger deals.
✔ SAP Store vs. direct sales
📌 Differences between sales via the SAP Store and direct sales:
📌 Conclusion:
SAP Store is suitable for small to medium-sized solutions.
➡ For key account deals, direct sales or SAP sales partnerships are more advantageous.
✔ Cooperation with SAP implementation partners
📌 Advantage: SAP implementation companies work with many customers who have similar requirements.
- If an add-on fills a gap, partners could resell or recommend it.
- Partnerships with SAP integrators can be a good source of revenue.
✔ SAP PartnerEdge membership increases credibility and facilitates partner networks.
Important success factors for monetization
✔ Clear documentation of the add-on: features, benefits, ROI for the customer.
✔ Provide demos or test versions.
✔ Collect reference customers & success stories → Build trust for future buyers.
✔ Ensure long-term support and maintenance: Customers expect updates and compatibility with new SAP versions.
📌 Important: Keep an eye on the SAP roadmap!
- If SAP integrates a similar function into the standard, the add-on must be adapted or repositioned.
- Many successful SAP partner products started out as add-ons → Some have been taken over by SAP or have been developed into specialized solutions.
- Monitor the market & continuously incorporate innovations.
📢 Conclusion: Monetization strategies for SAP add-ons
✅ Use SAP Store for broad customer reach.
✅ Join SAP PartnerEdge to receive professional marketing & certification.
✅ Consulting & project business as an alternative to license sales.
✅ Use flexible licensing models (user-based, subscription, transaction-based).
✅ Build partnerships with SAP integrators.
✅ Ensure long-term maintenance & support.
🚀 With a clever monetization strategy, an SAP add-on can become a successful product or service!
7. best practices and optimization
When developing enterprise systems such as SAP, it is important to follow best practices to ensure that add-ons are efficient, secure and maintainable.
✔ Performance optimization
📌 Optimization of ABAP code and database queries
- Avoid nested SELECTs and large loops → Use SQL as directly as possible to exploit HANA performance.
- Prefer CDS views or joins instead of aggregating data in ABAP.
- Set indexes on user-defined tables to speed up data access.
- Use SAP analysis tools:
- SQL Trace (ST05) → Identifies expensive database queries.
- ABAP Runtime Analysis (SAT) → Finds slow ABAP processing.
- Performance Trace (ST12) → Measures performance and identifies bottlenecks.
📌 Performance tips for Fiori/UI5
- $batch to bundle several OData calls into one request.
- Use server-side paging ($top/$skip) to retrieve only required data.
- Use the $select option to load only relevant fields.
- Activate caching for frequently used data.
- Optimize UI5 app load time by loading only required components and avoiding unnecessary libraries.
✔ Security (security best practices)
📌 Security in ABAP code
- Implement AUTHORITY-CHECK to check authorizations for sensitive operations.
- Create your own authorization objects when the add-on provides new transactions or services.
- Secure dynamic SQL queries and operating system commands to prevent SQL injection and code injection.
- Use random values & hashing APIs for encryption (ABAP offers Secure Random APIs).
📌 Security for OData services & BTP
- Define SAP PFCG roles for OData services to control access to entity sets and CRUD operations.
- Use OAuth tokens or secure vaults instead of plain text passwords.
- XSS protection in UI5: Use data binding instead of rendering HTML directly.
- Dynamically adapt UI to user rights → Retrieve user roles and control which options are visible.
- Regularly apply SAP security patches and scan code with SAP Code Vulnerability Analyzer.
Error analysis and debugging
ABAP debugging & system analysis
- Use SAP GUI Debugger and Eclipse ADT Debugger to set breakpoints.
- Analyze ABAP dumps (ST22) → If an error occurs, ST22 shows the call stack and variable contents.
- Check system log (SM21) for system problems.
- Use application log (SLG1) to create your own logs for error analysis.
📌 Fiori/UI5 debugging
- Use browser console (F12) → Analyze JavaScript errors and network errors.
- Check SAP Gateway Error Log (/IWFND/ERROR_LOG) → Shows failed OData requests with payload.
- UI5 debugging tools:
- Ctrl + Alt + Shift + P → Show performance statistics.
- Ctrl + Alt + Shift + S → Technical information on the UI5 app.
SAP BTP debugging
- Check Cloud Foundry logs (cf logs).
- Analyze SAP Cloud Connector logs if on-premise connections fail.
✔ Maintainability and naming conventions
📌 Good naming conventions are crucial
- Provide objects with Z/Y prefix and descriptive suffixes (e.g. ZCUST_REVENUE_VIEW).
- Clear structuring of SAP objects → bundle all add-on objects in a separate package or namespace.
- Set comments in ABAP code, especially for complex logic.
- Prefer standard enhancement points (BADIs, enhancement spots) instead of changing standard code.
- If changes to standard objects are necessary, document them, as they must be taken into account in SAP updates.
✔ Testing: quality assurance and load tests
📌 C reate test data and test scenarios
- Writing ABAP unit tests for critical algorithms.
- Perform integration tests in Fiori to ensure that the data flow works correctly.
- Perform tests with different user roles to validate authorizations.
- Perform performance tests, e.g. run and optimize a report with 100,000 data records.
📌 Conclusion: Why best practices are important
🚀 By adhering to these best practices, you will significantly improve the quality and reliability of your SAP add-ons:
✅ Higher performance → Faster response times & optimized database queries.
✅ Secure applications → Protection against unauthorized access & security gaps.
Easier maintenance → Well-structured code facilitates subsequent adjustments.
Fault tolerance → Fewer problems in productive operation thanks to debugging strategies.
✅ Better user experience → Fast-loading, stable and intuitive Fiori apps.
➡ A high-performance, secure and well-documented add-on reduces support costs and improves your reputation as a developer or provider. 🚀
Conclusion
By following this guide, a developer with intermediate knowledge should be able to:
✅ S et up the SAP development environment (SAP GUI, Eclipse ADT, SAP BTP).
✅ Develop ABAP extensions in S/4HANA.
✅ Create a SAPUI5/Fiori app on SAP BTP that interacts with these extensions.
✅ Use OData services for integration with SAP.
✅ Understand options for providing or monetizing the solution.
✅ Apply best practices for performance optimization and security.
🚀 Thanks to practical exercises and visual support, the development of SAP add-ons is considerably simplified.
📌 With the basics taught here, a developer can not only build their own extensions, but also implement and optimize more complex SAP projects.
