Options for creating your own Fiori Apps: An overview of SAPUI5 and SAP Fiori Elements
There are several ways to create your own Fiori apps. Some visualizations, such as the multidimensional report, can be created directly within the Fiori user interface.
SAP offers two further options for more complex apps in Embedded Analytics with Fiori:
What is SAPUI5 and what is SAP Fiori Elements, and when should each development approach be used?
SAPUI5 stands for “SAP User Interface for HTML 5“. It is the fundamental UI technology of the Fiori user interface. With the Freestyle approach, SAPUI5 enables the completely free development of very complex Fiori apps. However, this requires a lot of experience in web development and with various programming languages such as JavaScript and HTML 5. Freestyle development with SAPUI5 requires a lot of development time, and finished apps have high maintenance costs, for example, during system updates, which overall leads to high lifetime costs.
SAP Fiori Elements is an SAPUI5 Framework that uses pre-built templates, also called floorplans, to drastically reduce the development time and maintenance effort of নিজস্ব Fiori Apps. The six available floorplans use the metadata of an OData Services, to automatically create the majority of a Fiori app. The created app can then be adapted to the user's needs using UI annotations, no-code tools and Freestyle SAPUI5 extensions.
The choice between development within the Fiori user interface, Fiori Elements development, and SAPUI5 freestyle development should be adapted to the complexity requirements.
An Analytical List Page without deep adjustments should be created directly with the “Manage KPIs and Reports” app within the Fiori UI, for example. The Fiori Elements Framework should only be used if a separate Overview Page or deeper adjustments are required. SAPUI5 Freestyle development only comes into play when no floorplan fits the planned application, or when the complexity requirements are very high.
What are the advantages of SAP Fiori Elements?
What can a Fiori Elements app look like?
Example of a Fiori Elements App
- The screenshot shows an overview page created by s-peers using the Fiori Elements Framework.
- It is not possible to create such a Fiori app with the tools of the Fiori user interface. With the SAPUI5 Freestyle approach, such an app would involve very high development costs, which are greatly reduced by Fiori Elements.
- The Overview Page presents an operational reporting dashboard for project Capital Expenditure (CapEx) costs, which is not currently available in the SAP standard.
- A slightly adapted standard Analytical Query CDS View is used as the data source.
FAQs SAP Fiori Elements
SAP provides the SAP Business Application Studio (SAP BAS) or Visual Studio Code (VS Code) with the "SAP Fiori Tools - Extension Pack" for this purpose. Both development environments are very similar and based on the same architecture. VS Code is installed locally, while SAP BAS only works in the web browser. For the best performance, s-peers therefore recommends VS Code, but the developer still has to install Node.js for this.
For development, it is also recommended to use Git as a version control system, as the Fiori Elements Framework often generates large amounts of code that can quickly become confusing.
For the development of the virtual data model, which provides the OData service for the Fiori Elements Framework, the Eclipse development environment with the ABAP Development Tools is used.
Just like SAP S/4HANA Embedded Analytics, the Fiori Elements Framework can be used free of charge with an existing SAP S/4HANA system. For SAP BAS, expanded virtual machine capacities may incur additional costs, while VS Code is completely free.
- Basic
- Custom Page
- List Report Page
- Overview Page
- Analytical List Page
- Form Entry Object Page
- Worklist Page
No. While complex operational reporting dashboards can be created using the own Overview Pages, the Fiori Elements Framework does not transform SAP S/4HANA Embedded Analytics into an Enterprise Analytics solution. Since CDS views are used as a data source, the Fiori Elements Framework in combination with Embedded Analytics cannot replicate data, operate data warehousing, or create snapshots, which limits the application for strategic or management reporting. The framework is also not suitable for planning.
Here you can learn more about the full-fledged Enterprise Analytics solution SAC: https://s-peers.com/sap-analytics/business-technology-platform/sap-analytics-cloud/
The UI annotations, which define the user interface of the Fiori Elements App, can either be defined in the CDS View and thus be provided via the OData Service, or directly in the frontend via the VS Code or SAP BAS development environments.
This page was created by our former master student Miguel Gato Lopez. Interested in a job at s-peers AG? Then take a look here!
