Overview

Intro

SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:

• Speed up development by reducing the amount of frontend code needed to build?SAP Fiori apps.
• Drive UX consistency and compliance with the latest SAP Fiori design guidelines.

Versions

Ask your engineering colleagues what SAP Fiori elements version they will use to develop your app because there are differences in the design options that each version supports. .

Each version of SAP Fiori elements supports a different version of OData (Open Data Protocol), as their names indicate:

• SAP Fiori elements for OData version 2 (V2)
• SAP Fiori elements for OData version 4 (V4)

Usage

Your ultimate decision about whether or not to use SAP Fiori elements should be based on two factors:

• Is the floorplan you want to use supported by SAP Fiori elements?
• Does the SAP Fiori elements floorplan deliver all the features you need to provide to your user? If not, consider building a freestyle application instead.

Please note that the analytical list page and the overview page are only available as SAP Fiori elements.

SAP Fiori Elements Templates (or Floorplans)

SAP Fiori elements provides templates for common business use cases. Most business scenarios include providing an overview of business data, listing business objects, and managing or processing these business objects.

You can use these templates for your SAPUI5 applications without having to write a line of code. SAP Fiori elements apps are based on app metadata, OData annotations, and settings in the manifest.json file. The application determines what data is displayed on the UI, but it is the templates that determines how the data is displayed on the UI.

You can easily create apps using the SAP Fiori elements templates. Let's take a look at the templates available in SAP Fiori elements.

Overview Pages

The overview page template provides a data overview for a certain business area or role. Information is visualized in card format. The user can view, filter, and act on data efficiently. There are different types of cards to represent different types of content. A card serves as a typical entry point for a business process.

List Report Page

The list report page is the most commonly used template. It creates an SAP Fiori elements application containing a list report and an object page.

The list report allows the user to filter and sort a large set of items in a list format. It combines powerful functions for filtering large lists with different ways of displaying the resulting list of items. It is often an entry point for navigating to the item details. The item details are shown on the object page. The list report is usually used in conjunction with an object page.

There are other variations of the list report: the worklist page and the analytical list page. You can either create a worklist page or an analytical list page from a template, or you can modify the list report accordingly.

The analytical list page adds analytical capabilities like charts and visual filters to your apps. They help you to visualize and analyze your data from different perspectives, drill down into the data, and act on transactional content.

The worklist page allows you to process a list of tasks. You can work through a list of items, review the details, and take necessary actions. The filter bar is hidden as there is no need for sophisticated filtering.

Object Page

The object page is used to display and categorize the relevant information about a business object. This information can consist of text, charts, graphs, images, or any other form of data. The categorized content can be accessed quickly using anchor navigation or tab navigation, and users can switch from display to edit mode to change the content. The object page comes with a flexible, responsive layout, and a dynamic page header that can adapt to displaying simple and complex business objects.

SAP Fiori Elements Boosts Your Productivity

SAP Fiori elements provides enterprise-ready app templates. SAP Fiori elements ensures that the apps created using the templates comply with the latest SAP Fiori design guidelines and includes uniform layout, navigation, search, and filtering. Thus, you achieve UX consistency in your apps when using SAP Fiori elements.

By using the templates, SAP Fiori elements lets developers focus on the business logic and back-end services without having to worry about writing UI code. Thus, the development and maintenance effort can be reduced.

Each floorplan can be placed inside the flexible column layout, except the?overview page. The overview page must always be implemented as a standalone application that pulls in data from a minimum of two other applications.

Supported Features

Both SAP Fiori elements for OData V2 and for OData V4 offer:

• Message handling
• The global edit flow, which includes?draft handling
• Keyboard shortcuts for basic operations
• Custom shortcuts for application-defined actions. Note that custom shortcuts for inline actions on table rows are not supported.
• Seamless navigation across applications with the: Inner app state that stores the state of the current page when the user leaves it, including such details as filter values, table and chart personalization, and the selected tab or section. The app state restores these details when the user returns. Support of the SAP Fiori Launchpad feature called sap-keep-alive mode. With sap-keep-alive mode, the app page is restored to the same state it was in when the user left it, including scroll position and table selection. It also improves the performance of the page reload after back navigation. However, ensuring the page reflects changes that the user made in an external application before returning to it requires explicit configuration by the application developers.

For FIORI application development,you use BAS(SAP Business Application Studio).

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.