What is SAP Fiori Elements?

SAP Fiori elements is a UI development framework that allows developers to create applications for the SAP Fiori platform. It utilizes predefined page layouts, called floorplans, and metadata annotations for application development. This approach streamlines the development process by reducing the need for custom front-end coding efforts and automatically generating UI components based on underlying service metadata. Developers define the structure, behavior, and semantics of the application, rather than writing boilerplate UI code for every screen.

Purpose of SAP Fiori Elements

The primary purpose of Fiori elements in SAP is to enhance the creation time of enterprise applications by reducing front-end coding efforts, such as writing less UI code or UI implementation, and focusing more on business process logic, data service, or model annotations, which saves them a significant amount of time.

Fiori elements ensures consistency and adherence to the latest SAP Fiori UX design principles by providing predefined floorplans, which eliminate the need for manual design adherence checks. Adherence to automated UI generation and best practices enables quicker prototyping, development, and deployment cycles for Fiori apps.

Fiori Elements as Part of SAPUI5 Framework

Fiori elements is not a separate product. It is delivered as part of the SAPUI5 framework in the form of a specialized library, which provides UI rendering and lifecycle management features.

Fiori elements integrates seamlessly with both OData V2 and V4 services, enabling it to retrieve and store data from SAP back-end systems, such as SAP ECC and S/4HANA, providing connections and flexibility to existing data sources. OData V4 is recommended for new projects, offering more features, better performance, and a vast annotation vocabulary.

Read More

What is SAP ECC (ERP Central Component)? 

What are Types of Floor Plans in SAP Fiori Elements?

SAP Fiori elements provides a predefined set of floorplan templates and layout options to create an SAP application structure and display data effectively, adhering to the standards of SAP Fiori UX. Each floorplan is suitable for different business use cases, optimized for performance and responsiveness.

Floorplans are the primary building blocks for Fiori elements applications designed for specific use cases and user interactions. Selecting a suitable floorplan is the most crucial decision for Fiori elements-based applications. Below is a list of Floorplans templaes supported in SAP Fiori elements.

• List Report
• Object Page
• Worklist
• Overview Page
• Analytical List Page

List Report

The List Report template is ideal for displaying a large set of items, enabling users to perform actions and locate data using filtering, searching, and sorting options. It provides a filter bar for searching and filtering, as well as a table to display the list of items and charts. Possible scenarios include a list of sales orders, master data entries (such as customers or products), or purchase requisitions.

Object Page

The Object Page template is used to display a detailed 360-degree view of a single business object, allowing users to view, edit, and interact with related data. It provides a header with key actions and information, featuring multiple sections that consist of collapsible groups or tabs. It presents data such as general information, attachments, addresses, or line items. Possible use cases include viewing the details of a sales order, a customer, a product, or an employee’s information.

Worklist

The Worklist template offers a more straightforward approach to managing tasks, allowing users to focus on multiple items with less emphasis on extensive filtering, as seen in the List Report. Use cases are managing open tasks, reviewing items on hold, or approving leave requests.

Overview Page

The Overview Page template offers a centralized, dashboard-style view of key information, presented in the form of a series of cards. Each card displays specific data, such as links, charts, or lists, providing a quick overview of different areas and applications related to detailed information. Use cases include a sales-related dashboard that displays key performance indicators or an executive summary of the company’s finances.

Analytical List Page

The Analytical List Page combines analytical insights and transactional data into a standard view, enabling users to extract information from the data using charts and lists, and then drill down into detailed records. It provides a visual filter based on chart dimensions, chart visualization, and tables for line items. Possible scenarios could include analyzing HR data by department, examining sales trends by category, or tracking procurement expenditures by supplier.

How to Create Fiori Apps with SAP Fiori Elements?

Having familiarized ourselves with the latest SAPUI5 floorplans, we’ll now move towards practical, step-by-step implementation of SAP Fiori elements. This implementation involves constructing a fundamental SAP Fiori overview page application, leveraging SAP Web IDE for development and deploying it to your SAP Fiori launchpad environment. This end-to-end exercise will demonstrate how to consume a standard OData service to populate the overview page with dynamic data. Let’s initiate the development process; the following sequence outlines the necessary steps

Develop an Overview Page with SAP Fiori Elements

The below step-by-step guide provides the steps to create a simple Overview Page using the SAP Fiori elements framework. The Overview Page offers a comprehensive dashboard that displays data in multiple card types from various sources.

Use SAP Web IDE or Business Application Studio

• Log in to SAP Web IDE or Business Application Studio, Select File ->New – >New Project from Template.

Choose the “Overview Page Application” template

1. A new project wizard will open. From the category dropdown -> Select SAP Fiori elements.
2. Select “Overview Page Application” -> Click Next.

3. On the next screen, provide Project Name, Namespace, Title, and Description, and click Next.

Connect to the OData service

1. On the next screen of “Data Connection” -> Click on Service Catalog -> Select a server or system from the drop-down.
2. The services section will load all your OData services -> Select the desired one -> Click Next.

Define annotation files

1. On the next screen, “Annotation Selection” -> Select the default annotation file and any other file associated with your OData source -> Click Next.
2. You can also add your annotation files if you have.

3. On the next “Template Customization” screen, you can change technical details if you want. Click Next and then click Finish.

How to Configure Cards (List, Table, Link List, Stack, Analytic)

You have successfully created an SAP Fiori Overview Page from a template.

1.Right click on the project -> Select -> New Card.

2.The New Card Wizard will open. On the “Select a Card” page, select the desired card type, such as List, Link List, Table, Stack, or Analytical Card, and then click Next.

3. Verify the existing data source or select a new one on the “Configure Datasource” page, then click Next.

4. On the “Template Customization” page, select the Entity Set, provide Title, Subtitle, and Authorization details.

5. Scroll down to see the “Annotations” and “Card Properties” sections, select the desired ones, and then click Next, click Finish.

Run and Test the Fiori App

• The most straightforward way to run the project is to click on the play button in the toolbar.
• This will open the project in another tab, and you will see the card in your OVP that you have just created.

What is Impact of OData Protocol Versions on SAP Fiori Elements?

Fiori elements design options and features depend on the version choice of the back-end data service and the Open Data protocols being used, such as OData V2 and OData V4.

OData version 2

OData version 2 is the older version, but it is still widely used. Fiori elements for V2 covers many standard scenarios, but it relies on the older concepts, such as “SmartFilterBar” or specific extension point patterns. Global draft handling requires back-end implementation and specific annotations on top of OData standards.

OData version 4

OData version 4 is the latest and is recommended for new developments, particularly for SAP S/4HANA and ABAP RESTful Application Programming Model, also known as RAP. It offers flexibility and a more modular approach for extensions, along with building blocks for custom development, which is not available in OData V2. Draft handling is integrated deeply into OData V4 and RAP. It supports advanced features such as data aggregation, binding, and actions directly via OData, offering improved performance.

Recommendations

It is recommended to first involve your back-end development team and decide on the target OData version before making any front-end design or architecture decisions, as the selected OData version will determine specific Fiori elements features. When OData V4 is available, developing a V2 application can result in rework or missing advanced features.

OData Version Usage Decision Flow

When you decide whether to use Fiori elements and with which OData version approach, use the following logical flow.

Do the floorplans support the required functionality?

First, do a thorough assessment of your business requirements. Does the core functionality of displaying lists, task lists, managing object details, dashboards, or analytics align directly with any of the Fiori elements floorplans, such as List Report, Overview Page, Analytical List Page, Object Page, or Worklist? Consider the standard features, such as filtering, search, sorting, editing, and navigation, which cover most of the requirements.

Can gaps be filled via extensions?

Check if there are minor UI and functional gaps left that can be addressed using Fiori elements extension points, such as adding custom buttons, specific sections, or custom logic using controller extensions or V4 building blocks.

Is a freestyle approach more suitable?

Suppose you find “no” as an answer to the first two questions. In that case, it means that standard floorplans are not suitable for your requirements, then go for the freestyle SAPUI5 application approach which will be a high manual development effort, you may need to build standard features like navigation, message management or draft handling from scratch, but it offers maximum flexibility for highly custom applications.

Architecture of Fiori Elements

When developing enterprise-level applications, it is essential to understand the key concepts and architecture of Fiori elements, including their definition and functionality.

Metadata-Driven Design

Fiori elements architecture is metadata-driven. It separates UI logic from business logic, and its design ensures that development is faster, more agile, and reusable.

Metadata annotations are declarative instructions embedded within the OData service definition, such as in ABAP Core Data Services (CDS) views, which instruct Fiori elements on how to interact with and display data in the UI.

Some of the example annotations are as follows:

• UI.LineItem: Define columns and fields for a table.
• UI.SelectionFields: Enables the specification of which fields should be used for filtering data.
• UI.HeaderInfo: Define the object header.
• UI.Facets: Organizes fields into sections or tabs on a page.
• Common.ValueList: Define value help for input fields.

SAP Fiori elements automatically generates UI components, such as forms, charts, and tables, based on metadata annotations and selected floorplans, e.g., object page or list report. It dynamically renders the user interface at runtime, ensuring that the UI adheres to Fiori design principles and best practices.

Features of SAP Fiori Elements

SAP Fiori elements not only provides UI generation capabilities but also offers a rich set of enterprise-grade features and functional capabilities for both developers and end users.

Edit Flows

Fiori elements supports two models for creating and editing data with different techniques.

Global Edit Flow with Draft Handling (V2 & V4)

Global Edit Flow is a modern and recommended approach that handles drafts, providing a safety net for the end user and preventing data loss. When a user edits an object, the system creates a separate version of the draft on the back-end server. All changes are saved automatically, regardless of whether the user presses the save button, leaving the original data intact. This approach is supported in both OData V2 and V4.

Local Edit Flow without Draft Handling (V2 only)

Local Edit Flow is a more straightforward classic editing approach where changes are tracked on the client-side without draft handling. When a user edits a page, the application enters local edit mode, changes are stored in the browser’s memory, and are not sent to the backend server until the user saves them. This approach is only supported by OData V2.

Navigation and State Handling

Fiori elements applications preserve users’ navigation and application state, providing a smooth user experience, and users’ current state of navigation, such as scroll position, table sorting, or grouping. Filter selections or expanded sections are preserved. If the user navigates away and returns to the application, they are returned to the exact state of navigation they left when they pressed the browser’s back button. It supports the SAP-keep-alive mode and keeps the application’s navigation state in memory, but expands the approach to different applications, such as user leaving the application, using another one, and then returning to the same application and finds their entire navigation state restored automatically, reducing the frustration of re-applying all the settings again.

User Personalization

Fiori elements offers user personalization, enabling users to customize their application views and settings without requiring IT support. They can resize or reorder table columns as per their preferred width, filter values, column visibility, sorting, and grouping. The Fiori elements framework automatically saves these preferences in browser storage. It restores them when the user accesses the application on the same device, thereby increasing productivity and usability the next time.

Shortcut Support

Fiori elements offers support for keyboard shortcuts by providing default standard shortcuts, such as those for finding, saving, opening help, or navigating within the application, e.g., Ctrl+F for finding or Ctrl+S for saving. It also allows developers to configure application-defined shortcuts for unique business processes, excluding inline actions on table rows.

Message Handling and UI Behavior Aligned with Floorplan Guidelines

SAP Fiori elements provides centralized message handling and UI behavior strictly aligned with floorplan principles and guidelines. It offers standardized message display, e.g., error, warning, information, or success actions, appearing as a message strip at the top or bottom of the page or an inline message next to the field generating them. The framework ensures that UI elements, such as button placement, navigation patterns, or form field appearances, are strictly based on floorplan standards and guidelines, which reduces the need for manual design reviews.

Support for Responsive Application Design

SAP Fiori elements offers a responsive design for applications, adapting to various device types and screen sizes, and also provides fine-tuning and further customization of the developed UI.

Fiori elements application’s responsive behavior is primarily determined by the underlying components, the floorplan, and the SAPUI5 controls they use, which are built with responsiveness, automatically adjusting the layout, spacing, visibility of columns, and size of elements based on the screen size, such as phone, tablet, or desktop. Developers can customize table columns using priority annotations, such as high, medium, or low, which helps determine which columns to hide or keep visible when the screen size is reduced, ensuring critical information remains visible.

Support for Adjustability Techniques

Fiori elements focuses primarily on minimal coding but also offers adjustability techniques to developers to extend the generated UI to accommodate specific layout requirements and change the rendering requirements, using the following methods.

Breakouts

Within Fiori elements, Breakouts or extension points are predefined areas where developers can inject custom UI5 fragments, controller extensions, or views. These allow them to add custom fields, buttons, logic, or sections while still adhering to the Fiori elements framework.

manifest.json configuration

manifest.json is a descriptor file, the central location for Fiori elements application configurations, which includes defining the OData service, specifying the selected floorplan, enabling or disabling draft handling or smart variants, routing and navigation configurations, and setting up extensibility points.

UI annotations

As previously discussed, UI annotations are the primary means for defining a UI. Developers can add or modify annotations in the OData service, such as CDS views, directly shaping the appearance, layout, fields, tables, forms, behavior, and other UI elements.

UI adaptation via guided tools

SAP Fiori offers UI adaptation features via guided tools directly at runtime in test or development systems, enabling business experts or key users to make simple UI adjustments, such as reordering columns, hiding fields, or renaming labels, directly in browsers without requiring developer assistance. These changes are saved as a flexibility layer, applied on top of standard applications, enabling users to customize applications according to their specific needs.

Do Fiori Elements deviate from SAP Fiori design guidelines?

Fiori elements adheres to Fiori guidelines; however, there may be rare instances of slight deviations from the published guidelines for design. These deviations may occur due to technical limitations, which are usually temporary and documented, and are addressed in future releases or patches by SAP, keeping developers aware of them.

Support for Layouts in SAP Fiori Elements

Layout options are containers that help determine how different floorplans will be displayed on screen, such as navigation between applications.

Dynamic Page Layout

Dynamic Page Layout is a standard control in SAPUI5 and is supported by all floorplans, providing flexibility and responsiveness for page structure, including a header, content area, and footer.

Flexible Column Layout

This layout is suitable for multi-screen scenarios, allowing users to view content in multiple columns side by side without losing context from the previous screen. It offers highly efficient navigation for larger screens.

Flexible column layout is supported by all floorplans except the Overview page, which is designed as a standalone dashboard and requires at least two sources for data pulling. It works as a list report displayed in the first column. When a user clicks on an item, it opens in the second column, such as an object page. Then, if the user clicks on a line item on the object page, the details open in the third column, keeping the user on the same page with different screens without losing context.

How to Make Fiori Elements User Friendly?

To make Fiori elements applications user-friendly and tailored to the specific business context, one crucial step is to replace the generic placeholder text provided by the SAP Fiori elements framework with meaningful labels.

Issue

Fiori elements applications display generic text by default for common UI elements such as buttons or tiles, or actions such as “Create Object” or “New Object,” or generic error messages like “Could not perform action,” etc. Although these are somewhat relevant, they do not accurately represent the specific business context and should be replaced with real-world scenarios.

Examples of Replacements

Below are some examples of replacement text for standard functions that need to be replaced to improve user experience, clarity, and business terminology.

• Text like “Create Object” should be replaced with more meaningful text, “Create Sales Order” or “Create Purchase Requisition,” etc.
• Text like “New Object” with “New Sales Order” or “New Product”, etc.
• A generic error message such as “Could not perform action” with “Unable to approve the request” or, to be precise, with “Purchase order failed due to missing required fields,” etc.

Reference

Some standard methods for replacing placeholder text include using the i18n files for internationalization, configurations in the “manifest.json” file, or with OData Annotations. It is recommended that developers consult the official SAP Fiori elements documentation or the SAP Help Portal for a complete and up-to-date list of all placeholder text, following best practices to create user-friendly, business-relevant applications.

Visit Reference Page 1

Visit Reference Page 2

How do Extensions Fill Custom Development Gaps in SAP Fiori Elements?

Even though SAP Fiori elements provides components to build standard UIs, there are still real-world business requirements that need further customizations or features that Fiori elements does not cover.

Purpose of Extensions

The primary purpose of extensions is to fill the functional gaps in standard Fiori elements, allowing developers to create new UI elements and functionalities specific to their business processes or end users’ needs, without leaving the Fiori elements.

Types of Extensions

Fiori elements provide powerful extension points and methods for customizing UI requirements. Extending the existing floorplans is the standard type, which allows developers to add custom fields, tabs, or sections to an Object page, or add custom buttons to toolbars, etc. Developers can also integrate complex UI5 components at specific extension points, such as those designed for charts or custom data entry fields. Or embedding entire freestyle SAPUI5 views or fragments directly into the Fiori elements application using the OData V4 service.

Tools and Techniques

Standard SAPUI5 development practices and Fiori elements patterns are required to implement extensions. Developers can write extensions using the manifest.json file, SAPUI5 JavaScript, CSS, and XML to create custom views, controllers, or fragments. Developers can extend Fiori elements controllers by adding custom logic, such as custom buttons, data manipulation, and custom validations. Fiori elements offers predefined, reusable building blocks, including those for tables and forms. Developers can use these building blocks in their custom sections, simplifying the creation of extension points.

Benefits of Extensions

Combining custom code with existing Fiori elements framework components, rather than creating a completely freestyle application, provides the best of both worlds, including automated navigation, draft handling, message management, and user personalization.

Using Fiori elements building blocks provides low maintenance overhead, especially with OData 4. The overhead extensions will be significantly reduced, as SAP actively maintains these building blocks. This means that extensions will automatically receive updates, bug fixes, and performance improvements.

Conclusion

SAP Fiori elements represents a significant shift in enterprise application development, transitioning from line-by-line, extensive UI coding to a metadata-driven, declarative, and minimal UI coding approach. This method utilizes additional property annotations and predefined templates, offering powerful solutions for implementing standard business processes. It addresses key measures of success, such as consistency, scalability, and maintainability in SAP business application development.

Fiori elements is not just a UI template generator. It is a framework that offers predefined floorplans for application design, accelerating the development cycle for implementing enterprise solutions. These floorplans are best suited for standard business applications that can benefit from predefined UI patterns.

Suppose your business needs are closely aligned with the floorplans, such as List Report, Worklist, Analytical List Page, Object Page, or Overview Page – ideal for apps that can benefit from a single page layout or stacked navigation. In that case, Fiori elements should be your preferred choice.

Whether you are configuring a new Fiori launchpad tile or navigating the launchpad’s header area, Fiori elements simplifies the process. It allows developers to define key app title elements and qualifier settings through annotations. With TRUE extensibility, it empowers developers to tailor UI behavior and appearance while maintaining compliance with SAP’s standards.

Fiori elements integrates seamlessly with the SAP Cloud environment, supporting both OData V2 and V4, as well as the RESTful Application Programming Interface (RAP) model. This makes it suitable for cloud-native development and enhances access to distributed resources via a central repository. The language of development is simplified, fostering an efficient journey from concept to deployment.

While this guide provides an overview, exploring the variety of use cases described in the official SAPUI5 documentation is recommended for additional information. You can read about topics like annotation usage, courses for beginners, and advanced extensibility techniques. This start will help you understand how utilizing standard terms and patterns can reduce development time and improve app consistency.

Your SAP learning path consists of firsthand practice, reading documentation, and exploring sample projects. Begin your journey at the root of application design by embracing metadata-driven concepts. This repository of knowledge, once fully understood, will lead to leading development outcomes and successful implementations.