Application Development with FIORI Elements

Introduction

SAP Fiori Elements, formerly known as smart templates, has been around since 2015 (when SAP S/4HANA come out) and provides a framework for the most common application patterns. 

If you are an ABAP developer with little or no coding experience developing software applications with JavaScript, SAP FIORI Elements comes to your rescue. With SAP Fiori elements, you can build an application with predefined FIORI guidelines and have an app up and running in a matter of hours. 

As a developer, you need to expose the required business data from the SAP HANA database using OData. SAP Fiori elements enable you to scale your application creation in a fast, convenient, centrally-managed, and expertly-designed way. To learn more about FIORI Introduction, history, and architecture, we highly recommend going through SAP FIORI Introduction & Architecture. 

New to SAP Fiori?

Learn Fiori for end users and get start with Fiori App Development.

Development using SAPUI5 or FIORI Elements

With the advancement of web applications, every developer has a dilemma on what technology to use to build a FIORI application. Which one is better? SAPUI5 or FIORI Elements? 

Let us try to unfold it at a very high level for starters. There are two primary ways to build a FIORI Application: SAPUI5 or FIORI Elements. If you want to have a full custom application framework with navigation and data binding, then SAPUI5 is the right choice.

SAPUI5 is the modern and efficient technology based on the HTML5 framework used to create enterprise-grade and cross-platform FIORI Applications. This would require a developer to know HTML, CSS, JavaScript. 

However, if you are developing many FIORI applications with common UI patterns and need an efficient and quick way of deployment, then SAP FIORI Elements is the way to go. 

Once you know the type of development you want to follow - SAPUI5 or FIORI Elements - the major question arises on what IDE can be used for development. There are various IDE that a developer can use while doing FIORI development (i.e., VS Code, Web IDE, SAP Business Application studio, and so on). Web IDE / SAP Web IDE is a web-based tool that has been around for a long time now and is used as a useful tool for building SAP UI5 applications. 

SAP has come up with the next generation of SAP Web IDE called SAP Business Application Studio, which is primarily used for development using FIORI Elements. If you are interested in learning more about SAPUI5, please have a look at SAP UI5 and FIORI, a blog that focuses on core SAPUI5. For now, let us learn more about SAP Business application studio in the next section. 

SAP Business Application Studio

SAP Business Application Studio is a powerful and modern development environment tailored for efficient development of business applications for the Intelligent Enterprise. It is available on AWS, Azure, Alibaba Cloud, and SAP Cloud Platform trial environment. 

SAP Business Application Studio is built on open source and leading industry standard. It has an experience like other leading IDEs and provides a desktop-like experience in the cloud, which allows developers to efficiently develop, test, build, and run the solution. This also helps developers to have better development experience and become immediately productive when using app studio. It supports development in JAVA, Node.js, and includes a command-line interface (CLI). 

SAP Business Application Studio creates Dev Spaces in the cloud that have pre-installed tools and do not require any installation, allowing the developer to focus on the business domain. There are four kinds of Dev Spaces that SAP Business Application Studio offers: Basic, SAP FIORI, SAP Cloud Business Application, SAP Cloud Platform Mobile Service (for mobile application development). And for Fiori development, the SAP FIORI Dev Space.

Application Development using FIORI Elements 

FIORI Elements is a metadata-driven framework used to build enterprise applications speedily and efficiently. It is a collection of several page types that form the foundation of your app. SAP Fiori design template includes layout, formatting, navigation, search, and tools to modify the standard pages. Building apps from the standard page types means the developers can focus on the business logic and use the user interface that SAP provides. 

Using this template-based approach, all applications built by the development team will be consistent alongside the apps that SAP develops. Fiori elements provide five different page types, shown above, (Overview page, List report page, Object Page, Analytical list page, Worklist page), which cover approximately 80% of the scenarios of interacting with SAP backend data.  

An overview page provides a summary of a specific domain and contains various types of lists, charts, and graphs. The list report page is like an ALV report, with several filter options, listing the details from the backend system in a tabular format.

Each line can be clickable and lands on an object page that holds details about the line clicked. An analytical page is a graphical depiction of data with embedded analytics capabilities. The worklist is the simplest version, where different tabs correspond to predefined filters, such as different phases of a workflow.

Let us now understand how these standard layouts and pages help with an example of a list report application. The list report would adopt the standard UI logic (like navigation, search, filter, sort, variant management, draft management, screen configurations, etc.) out of the box and will always look consistent. The developer will also have additional options to customize the application with more controls and specific behaviors.

To summarize, we hope that you now have a basic understanding of the new FIORI development standards. With the ability to quickly and consistently create standard Fiori apps, you will be able to scale a great UX across your organization. Also, you now understand how SAP Fiori elements ensure design consistency and compliance with the latest design guidelines while reducing the amount of frontend code needed to build SAP Fiori apps.  

SAP Fiori elements provide designs for UI patterns and predefined templates for commonly used application patterns. When creating apps, you, as an application developer, can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations requiring no JavaScript UI coding for any SAP system.