Technology & Architecture

Technology & Architecture - Frontend

SAPUI5 (SAP User Interface 5) serves as the technical basis for Fiori. This is a framework derived from OpenUI5, consisting of HTML5, JavaScript, XML and CSS. SAPUI5 is suitable for creating web applications in the SAP and non-SAP environment. In such web applications, the user interface and the database are clearly separated from each other.

A special feature is the cross-platform compatibility of SAPUI5, as it is a browser-based technology. This means that not only applications for desktops can be created, but also responsive applications for smartphones or tablets. Through various libraries, it is also possible to access different device functions. For example, the camera can be controlled to scan a barcode.

It is possible to use OData services to provide data from CDS views (Core Data Services) or ABAP programs and to use and process this data in an application. Data from the back end can also be transferred to the UI5 front end using other technologies such as PHP. Under certain conditions, Fiori applications can also be used offline.

To ensure a uniform and SAP-compliant design, SAPUI5 provides various libraries for creating and designing applications. In addition, there are SAP Fiori Design Guidelines to support the search for suitable elements, such as tables or lists, buttons, text fields or even entire app templates.

Technology & Architecture - Backend

OData stands for Open Data Protocol. This is a data access protocol that was released by Microsoft in 2007. An OData service enables data extraction from the SAP backend system via the SAP gateway. OData uses HTTP (Hyper Text Transfer Protocol) to transfer the data. The modeling of the data is done with JSON or XML. The main components of an OData implementation are the data model, the protocol and the services. The actual OData service is the implementation of an OData protocol, which in turn consists of the service document and the service metadata document.

In addition to an S/4HANA system, a backend can also be an ECC, CAR or BW system. In principle, OData can also be used separately from SAP systems, front-end and back-end are split in order to be able to manage the user interface, as well as the data management and the database tables separately.

The call is made via URI (Uniform Resource Identifiers), which determine which OData service is called with which data model. According to the REST guidelines, the call of the OData service is permitted by the following requests:

  • GET: get a single entry or a list of entries
  • POST: create a new entry
  • PUT: modify an existing entry
  • DELETE: Delete an existing entry
  • PATCH: Update individual attributes of an existing entry

SAP WebIDE development environment

The SAP Web IDE is a browser-based development environment that can be used for frontend development of SAP Fiori apps as well as SAPUI5 and openUI5 applications. It can be installed locally or in the cloud. In addition to ready-made templates for specific Fiori apps, such as a Master Detail Application or a List Report Application, there is also a layout editor for creating your own designs. The graphical elements are already anchored in the SAP Fiori Design Guidelines, so that the developer recognizes when he wants to insert an element, for example, in an unintended place. Furthermore, there is the possibility to simulate different screen formats (smartphone, tablet, desktop).

In addition, when creating an app from a template, a data source defined in the backend can also be easily integrated. Testing of a developed application can be done in several modes, e.g. via Component.js or index.html or in a SAP Fiori Launchpad sandbox. In the latter, for example, navigation to and from a launchpad can be tested. Finally, a finished application can be deployed from the Web IDE to a SAPUI5 ABAP repository or to the cloud. A connection to Git is also possible.

For the creation of IoT apps (Internet of Things), the SAP IoT Application Enablement Toolkit can be used.

Eclipse development environment

Eclipse is an open source development environment introduced in 2001, which was initially only used for Java developments. Due to the good extensibility of this IDE, a large number of programming languages can be processed today. Thus, it has been possible for some time to create, edit and execute ABAP programs and CDS views in Eclipse. For this purpose, the IDE (Integrated Development Environment) can be connected to an SAP system so that the user has access to the development objects and transport requests. For this to be possible, the SAP Development Tools must be installed as a plug-in.

More information about the installation and release notes can be found here: SAP Development Tools (ondemand.com)

SAP Business Application Studio development environment

The SAP Business Application Studio (BAS) is the successor of the Web IDE and was released in February 2020. However, the Web IDE is supported in parallel as a development environment. The BAS is an IDE which is offered as a cloud service. Included are a command line console, integrated debugging and an optimized code editor. Additional tools tailored to specific business scenarios are grouped in so-called Dev Spaces. They also contain pre-installed runtime environments for testing S/4 HANA extensions and SAP Fiori apps. Extensions and Fiori apps are the main focus of this IDE. For mobile applications, there is also the Mobile Development Kit.

(Source of fig.: https://www.sapstore.com/solutions/45318/SAP-Business-Application-Studio---the-evolution-of-SAP-Web-IDE)