Objectives
This lesson covers the various user interface technologies and application frameworks that can be used on the SAP Business Technology Platform. These include technologies such as SAP Fiori and SAPUI5, the SAP Cloud Application Programming Model (CAP), and the ABAP RESTful application programming model.
This lesson contains the following topics:
Various user interface (UI) technologies are presented that can be used for the development of applications on SAP BTP. These include SAP Fiori, SAPUI5, and other modern web technologies.
Front-end applications enable user interactions. They can be developed for web, desktop, or mobile devices, although this training focuses on web applications as they can conveniently use cloud services.
Web applications present information and enable user interactions via user interface elements. They are based on three pillars:
To make development easier, there are many mostly open source frameworks that use design patterns such as Model View Controller (MVC). Well-known examples are Angular, React, and Vue.
Web technologies support responsive applications that adapt to different device form factors, ideal for mobile use.
OData is a protocol based on REST which provides the means to provide CRUD (create, read, update, delete) functionality to applications implemented as calls to remote APIs over HTTP. It defines best practices and improves the interoperability of APIs through specific document types such as service and metadata documents. OData services use the entity data model and the Common Schema Definition Language (CSDL). OData offers functions such as complex filtering, pagination, and free-text search.
The latest version is OData v4, but OData v2 is still supported, especially by SAP. In the SAP ecosystem, back-end technologies are used to provide OData APIs, while front-end technologies mainly work with OData.
OData is favored for synchronous integrations, for example, in SAP S/4HANA, where it replaces BAPI technology. Although SOAP is still used for asynchronous integrations, there are efforts to use OData here as well. It is important to note that other SAP products, such as SAP NetWeaver and SAP Business Suite, also support OData.
SAPUI5 is a JavaScript framework developed by SAP that improves the user-friendliness of web applications. It is also available as open source under the name OpenUI5. This framework can be used for any web application, but is used for SAP front-end applications to manage data from SAP back-end applications. It uses the OData protocol and supports REST APIs.
UI5 applications follow the MVC pattern (Model View Controller) and enable data bindings. They run on different devices, adapt automatically, and use device-specific functions. UI5 supports extensibility, enables the customization of themes, supports multiple language environments and offers accessibility features.
You can find more information about UI5 here.
SAPUI5 enables the design of front-end layers and offers configurable controls. SAP Fiori, a common user experience for front-end applications, ensures a consistent user experience across different platforms and device types. More information about SAP Fiori can be found here.
SAP S/4HANA Cloud applications are created with SAPUI5 and use SAP Fiori as the user interface. This also applies to other cloud-based SAP products such as SAP Marketing Cloud. SAP S/4HANA on-premise uses both SAP Fiori and older UI technologies such as SAP GUI.
Despite different UI technologies in SAP acquisitions such as SAP Commerce Cloud and SAP Ariba, SAP strives for a unified user experience. As part of this endeavor, SAP has released UI5 Web Components, a library of reusable UI elements for web development frameworks such as React, Angular, and Vue.
There are over 2000 applications that use the SAP Fiori design: so-called SAP Fiori Apps. The so-called SAP Fiori Lighthouse Apps offer special business advantages, as they support tasks and processes that are missing in the SAP Business Suite or simplify them and make them more efficient.
SAP Fiori Elements provide a framework for accelerating SAPUI5 application development. They are based on five typical layouts used in enterprise applications. Developers can use Fiori Elements to create SAPUI5 applications that use OData and are supported by predefined views and controllers. The framework automatically integrates features such as message handling, global edit flow, design handling, keyboard shortcuts, and navigation. By adding annotations, the application can be customized to specific requirements without having to write JavaScript code, which can be added if necessary. SAP Fiori elements therefore offer more than just layout templates.
With SAP Fiori elements, you can use one of the following floor plans:
SAP Fiori Elements UIs can be created wizard-controlled in the SAP Business Application Studio. SAP Fiori Elements UIs are the standard technology of the SAP Cloud Application Programming Model (CAP) and the ABAP RESTful application programming model.
SAP UI5-based applications are created with the following SAP BTP services:
SAP Fiori front-end applications are deployed on the SAP BTP, Cloud Foundry environment as HTML5 applications.
The SAP Cloud Application Programming Model (CAP) provides an abstraction layer that makes it easier for developers to create and manage cloud applications. It provides a standardized programming language and environment and supports seamless integration with other SAP services.
The SAP Cloud Application Programming Model (SAP CAP) is a framework that makes it easier for developers to create cloud applications at enterprise level. The framework makes all relevant libraries, languages, and tools directly available and guides developers through the development process using a golden path.
This path consists of proven best practices and ready-made solutions that are ready for immediate use. This makes SAP CAP suitable for recurring tasks.
Based on the principle of Convention over Configuration, development teams can start work immediately thanks to a minimum configuration that can be called up at any time. The compact structure of SAP CAP provides all the necessary software development kits (SDK) for Node.js and Java. Services can be provided via synchronous and asynchronous interfaces from the beginning.
CAP is part of the Side-by-Side Extensibility Strategy.
Full stack extensibility with SAP S/4HANA.
The SAP Cloud Application Programming Model is based on three pillars:
The SAP Business Application Studio or Microsoft's Visual Studio can be used as the IDE, depending on the configuration. The SAP Business Application Studio is ready for development, which is why it is the recommended variant for creating CAP apps.
Core Data Services (CDS) are a central component of SAP CAP and the integral modeling language. They enable the simplification and harmonization of a company's business data models. By standardizing data with CDS, it can be used across systems, which speeds up development and reduces costs. From a technical point of view, CDS defines the data models directly in the working memory and not on the application server, which is an important difference.
For developers, CDS simplifies the work by allowing all queries and expressions to be recorded in simple object notations (JavaScript). Different source languages can be parsed and compiled into different target languages. All entities can be defined directly in the modeling language and provided with attributes so that they can then be used in the developed services.
SAP CAP offers comprehensive service SDKs for Java and Node.js, which enable the provision of services via synchronous and asynchronous interfaces. In addition, the SDKs allow the simple integration of authentication and log in services with just a few lines of code. On the user side, only Node.js is required, while SAP CAP loads the required libraries as needed.
CAP Applications are full-stack implementations. They are developed with the following SAP BTP services:
It is also possible to develop CAP Apps with open source tools such as Visual Code Studio.
CAP Apps are deployed on SAP BTP, Cloud Foundry environment or on the SAP BTP, Kyma runtime.
ABAP RESTful application programming model enables developers to create REST-based services using ABAP. It is an essential part of ABAP Cloud and it provides a modern development environment and supports integration with existing ABAP-based systems.
Below you see a matrix outlining some of the different ABAP programming frameworks (including historical ones) that can be used with different products / versions and the specific features available. As a essential part of ABAP Cloud, ABAP RESTful application programming enables development using all modern features that cloud native design requires. These include supporting both OData V2 & V4 as well as annotations both in back-end CDS views as well as in SAP Fiori tools as part of SAP Business Application Studio.
A collection of concepts, tools, best practices, frameworks, generators and much more.
A strategic development approach for SAP and an essential part of ABAP Cloud
Can be used in the following products
Can be used for all project implementation scenarios:
The following types of APIs are possible:
ABAP RESTful application programming model has several layers where artifacts at each layer implement specific functions.
Overview of the artifacts used and their dependencies:
Business objects (BO) represent the data model and define the data-related logic, called behavior, independent of the specific consumption. ABAP RESTful application programming model business objects are defined by CDS data modeling views, CDS behavior definitions, and behavior implementations in ABAP classes.
The business object projection is an approach to project a subset of the business object for a specific business service. The projection enables flexible service consumption and role-based service designs. In ABAP RESTful application programming model, a BO projection consists of CDS projection views, CDS behavior projections and, if necessary, additional, or consumption-specific implementations.
A service definition defines the scope of a business service, in particular the business object projection that is to be represented through this service.
A service binding defines the communication protocol such as OData V2 or OData V4 and the type of service to be offered to a consumer, such as UI services or a Web service.
SAP Fiori UI provides a special user interface for frequently used application patterns. In this case, for example, UI annotations are transferred to the SAP Fiori app development. The SAP Fiori Ui is created on SAP BTP in the SAP Business Application Studio. It can be hosted either in the SAP S/4HANA back-end or on SAP BTP.
A Web API provides a public interface for accessing the OData service by any OData client independent of a particular UI.
The following is an example of using SAP Business Application Studio to create an SAP Fiori app. After creating the SAP Fiori app, you can decide where the app should be deployed.
Either on:
Once SAP Fiori elements has been created in the SAP Business Application Studio, it can be hosted on the SAP BTP, Cloud Foundry runtime. This means that the business users must be logged on to SAP BTP. It is not necessary to be known in the company network (employees).
Once SAP Fiori elements has been created in the SAP Business Application Studio, it can be hosted on SAP S/4HANA. This includes all deployment options (public edition, private edition or on-premise). This means that the business users must be known in the company network (employees).
In all SAP S/4HANA installations used, the ABAP RESTful application programming model back-end is developed with Eclipse and ADT tools. In principle, the front end can be created with any available front-end technology. SAP Fiori Elements applications developed using the SAP Business Application Studio is recommended.
ABAP RESTful application programming model applications are always hosted on an ABAP stack. The associated front end, if based on SAP Fiori, is hosted on Cloud Foundry as an HTML5 application.
Other source materials:
This lesson covers the development of mobile applications on SAP BTP, including the use of SAP Mobile Services and other mobile development tools.
With SAP Mobile Services, you can develop, configure, and manage mobile applications that enable mobile access to company data. The most important functions of Mobile Services include:
App content lifecycle management.
Push notifications for timely updates of company data.
Support for storing company data on the device (offline apps).
App security.
App monitoring and usage reporting.
Mobile services supports the development of multiple app types, namely: native apps, cross-platform apps, web apps, and mobile development kit clients. Define, manage, and monitor your apps throughout their lifecycle.
Intelligent update mechanisms keep your apps and app configurations up to date through optimized downloads and allow you to maintain multiple app versions in the field.
When you are offline, switch to the local data source, which is kept up to date through OData synchronization functions and open standards.
Select the authentication types that meet your data protection requirements from several options.
Send updates and notifications from the back-end data source to mobile applications. Use the push button to send ad-hoc notifications to users of a specific application.
View app-specific usage analytics, statistics, and reports that comply with GDPR standards.
Extend existing on-premise solutions or use SAP BTP to create a fully cloud-hosted solution using HANA as back end, Java runtime, HTML5 app, and mobile app tools.
The mobile development kit as part of SAP Mobile Services is a tool for creating mobile applications. You can use the SAP Mobile Services Cockpit to define metadata and mobile functions. A project is then generated, which you can then edit in a supported editor. The main focus here is on a low-code approach.
The mobile development kit as part of SAP Mobile Services can be used to create multichannel applications that run on mobile devices as well as web applications. Mobile devices translate metadata, configuration, and scripts into native code at runtime for an optimized mobile experience. For web applications, the web runtime environment takes over the execution in the Cloud Foundry environment.
SAP Mobile Cards provides a low-code environment for designing and publishing elegant mobile cards that contain compact business information. These cards enable user interaction, that is, they can be used as entry points for business transactions or workflows.
Mobile cards can be used as enriched notifications, quick worklist items, tickets, teasers, and wallet-sized cards for various information sharing purposes:
SAP offers the BTP SDK for iOS and Android to accelerate the development of powerful native applications that use the full functionality of the mobile platforms. These applications can use platform features such as fingerprint scanners and location services while being integrated with SAP BTP, ensuring a consistent SAP Fiori user experience at enterprise level. Both SDKs follow similar principles and include wizards that generate mobile application projects and integrate the SDK libraries. This enables access to SAP Mobile Services and the integration of SAP Fiori Access Control.
SAP Build provides a suite of tools that enable users to create and customize applications without programming knowledge. These tools are useful for business users who want to develop their own solutions.
So far, you have learned about CAP and ABAP RESTful application programming model as side-by-side implementation tools. SAP offers further development tools within the SAP Build family of solutions in addition to those two options.
SAP Build is home to a whole range of solutions. In the image above, the tools for creating side-by-side extensions are divided into low-code and pro-code. With the exception of SAP Build Process Automation, they all belong to the SAP BTP capability application development. The following image shows the navigation paths to the corresponding development tools (green). This training focuses on the Build an Application path.
Low-code tool
This allows you to create web applications and mobile applications in low-code mode by drag and drop.
Once the app has been created using a graphical editor, it can be deployed to Cloud Foundry.
This allows you to create data-based back ends on the SAP BTP. This allows you to persist data and execute application logic. Programming can then be carried out against this back end.
Pro-Code Tools
You can build SAP Fiori applications and deploy them to the appropriate environment, including Cloud Foundry or the SAPUI5 ABAP repository. You can also extend SAP Fiori applications using a SAPUI5 customization project.
SAP Fiori tools simplify the development of SAP Fiori elements and Freestyle SAPUI5 applications by providing extensions to your SAP Business Application Studio environment. These extensions help you to create applications, visualize navigation, automatically generate code, and much more. Development is done manually with templates in the SAP Business Application Studio.
This allows CAP applications to be created almost automatically through Generative AI (Joule). These are then deployed on Cloud Foundry.
Log in to track your progress & complete quizzes