Fiori Technology & Architecture
The Fiori technology and architecture are extremely complex. Behind the simple and clear interface of the apps lie a myriad of process steps. Before implementing SAP Fiori apps, you need to configure the system landscape appropriately to support SAP Fiori.
It is necessary to set up both frontend components that provide the user interface and connect to the backend, as well as backend components that provide the data.
Fiori Technology & Architecture: Frontend
SAPUI5 (SAP User Interface 5) serves as the technical foundation for Fiori. This is a framework derived from OpenUI5, and consists of HTML5, JavaScript, XML and CSS. SAPUI5 is suitable for creating web applications in both SAP and non-SAP environment. In such web applications, the user interface and the database are clearly separated from one another.
A notable feature is the cross-platform compatibility of SAPUI5, given that it is a browser-based technology. This implies that not only applications for desktops can be developed, but also responsive applications for smartphones or tablets. For instance, the camera can be controlled to scan a barcode.
OData services can be used to provide data from CDS views (Core Data Services) or ABAP programs and to utilize and process this data in an application. Data from the backend can also be transmitted to the UI5 frontend using other technologies such as PHP. Under specific conditions, Fiori applications can also be utilized offline..
To ensure a consistent and SAP-compliant design, SAPUI5 provides several libraries for creating and designing applications. Furthermore, there are SAP Fiori Design Guidelines to assist in finding appropriate elements, such as tables, lists, buttons, text fields, or even entire app templates.
Fiori Technology & Architecture: Backend
OData stands for Open Data Protocol. It is a data access protocol that was released by Microsoft in 2007. An OData service enables data extraction from the SAP backend system through the SAP gateway. OData uses HTTP (Hyper Text Transfer Protocol) to transfer the data. The data is modeled using JSON or XML. An OData implementation consists of the three main components data model, protocol and services. The actual OData service is the implementation of the 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. The frontend and backend are separated to manage the user interface, as well as data management and 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 aligned with 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).
Additionally, 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 conducted 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, initially used exclusively for Java development. Due to the good extensibility of this IDE, a large number of programming languages can be processed today. As a result, it has been possible for some time to create, edit and execute ABAP programs and CDS views in Eclipse. To achieve this, the Integrated Development Environment (IDE) can be connected to an SAP system, allowing the user to access 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 also supported in parallel as a development environment. The BAS is an IDE that 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 into 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.
