Introduction to SAP Fiori Elements and its key features

SAP Fiori Elements is a technique of creating SAP Fiori apps without writing frontend-code to generate the UI. SAP Fiori Elements is based on framework provided by SAP that generates consistent UI based on the SAP Fiori design guidelines. The framework comprises of most commonly used floorplan templates. The templates are made of predefined views and controllers and are available centrally. Fiori Elements fall under low-code development where the UI is generated at runtime from metadata.

It is right to say that SAP Fiori Elements is a UI development library based on SAPUI5. But this technique is specially suited to ABAP developers who does not have knowledge of web development. Unlike SAPUI5 freestyle development, knowledge of XML or JavaScript is not required when developing app using SAP Fiori Elements approach.

Here is a more detailed look at what SAP Fiori Elements entails:

Key Features of SAP Fiori Elements

  1. Generated enterprise grade apps using predefined Fiori Elements templates:
    • SAP Fiori Elements provides several predefined page types (templates), for example List Reports, Object Pages, Analytical List Pages, and Work Lists to speed up Fiori apps development and eliminates front-end code needed to build apps.
    • As Fiori Elements apps are based on templates provided by SAP, any change done by SAP in their SAP Fiori design will remain compatible with Fiori Elements apps. This makes the app future design ready and redesign of the apps will not be required. The Fiori Elements apps will always comply to the latest SAP Fiori design standards.
  2. Model-Driven Development:
    • The framework is based on metadata-driven development. This means that the UI is generated based on the metadata annotations in the OData service, which describe the data model and how the data should be presented.
  3. Consistency and Compliance:
    • Using Fiori Elements ensures that the applications comply with the SAP Fiori design guidelines, and hence developers churn out uniform and consistent looking Fiori apps. This ensures consistency in look and feel of Fiori apps throughout the organization.
  4. Reduced Development Effort for Accelerated development
    • By leveraging predefined templates and annotations, the amount of front-end code based on XML or JavaScript is reduced, giving room for developers to focus more on the business logic. Fiori elements speeds up the app development process.
  5. Extensibility:
    • Despite being template-based, Fiori Elements provides ways to extend and customize the UI to meet specific requirements. This can be done using custom sections, actions, and adding UI controls.

Types of Fiori Elements Applications

  1. List Report:
    • Used for displaying large sets of items with powerful filtering and sorting capabilities.
    • It includes features like smart filters, dynamic columns, and navigation to details.
  2. Object Page:
    • Used for displaying details of a single item.
    • It provides a rich set of UI elements for displaying and editing data.
  3. Overview Page
    • Utilizes cards to display various types of content and is generally used to display various information in a compact fashion.
    • Apart from displaying large amount information in various cards, the cards can display KPIs, links to navigate to end-users to drill down further for the required information.
  4. Analytical List Page:
    • It is a list page enriched with analytical capabilities with the ability to act on the data.
    • It includes charts, tables, and smart filters to help users analyze data from different perspectives and even drill-down on data.
  5. Work List:
    • Designed for applications that need to display a list of tasks or items that users need to process. Users review the list to complete the work item and can even delegate the item to others.

How Fiori Elements Works

  1. Annotations:
    • UI Annotations in the OData service define how the data should be presented in the UI. These include annotations for fields, labels, UI controls, and more.
  2. OData Services:
    • Fiori Elements applications are based on OData services that provide the data and metadata used to generate the UI.
  3. SAP Business Application Studio:
    • Development of Fiori Elements applications is typically done using cloud based IDE, SAP Business Application Studio, which provide tools for generating and managing annotations.

Benefits of Using SAP Fiori Elements

  • Speed and Efficiency: Reduces development time by using standardized templates.
  • Consistency: Ensures a uniform user experience across all applications.
  • Maintainability: Easier to maintain and update due to the model-driven approach.
  • Best Practices: Enforces best practices in UI design and development.

Conclusion

SAP Fiori Elements is a powerful framework that helps streamline the development of SAP Fiori applications by providing reusable templates and components. It leverages metadata-driven development to ensure consistency, compliance with design guidelines, and efficiency in creating intuitive and effective user interfaces.