✒️La guía y las herramientas de diseño de SAP Fiori

SAP Fiori Design Guidelines and Tools

SAP Fiori Design Guidelines

SAP Fiori design guidelines serve as the design language for SAP Fiori, guiding developers on how to create SAP Fiori applications while adhering to design principles.

The design guidelines for creating a web application in SAP Fiori can be accessed via this link:

SAP Fiori Design Guidelines - https://experience.sap.com/fiori-design-web/

SAPUI5 and UI Controls

SAPUI5 provides over 100 UI controls and layouts to build SAP Fiori applications that follow these design guidelines. Pre-designed libraries enable developers to create consistent applications that behave similarly, providing a good user experience.

Types of Messages in SAP Fiori

Messages in SAP Fiori applications can be categorized as:

• Error
• Warning
• Information
• Success
• Confirmation

These messages can be displayed using various controls from the sap.m library in SAPUI5 applications, such as:

• Message Popover: Uses the sap.m.MessagePopover control, ideal for validating form inputs by showing messages from the server side.
• Message Box: Uses the sap.m.MessageBox control for generic or technical errors not related to specific form fields, and for confirmation messages.
• Message Toast: Uses the sap.m.MessageToast control for brief success messages that disappear automatically.
• Message Page: Uses the sap.m.MessagePage control to provide feedback when an application or list is empty or when an error occurs.

SAP Fiori Elements Framework

SAP Fiori Elements provide a framework for creating user interfaces without writing extensive UI code. These templates reduce front-end development costs by automatically generating the UI based on OData services and metadata.

SAP Fiori Elements adhere to common SAP Fiori design patterns and aim to accelerate UI coding while ensuring design consistency.

Benefits of SAP Fiori

SAP Fiori Elements, introduced in 2015, significantly speed up development, ensure scalable and centralized application maintenance, and guarantee UX and design consistency. They automatically adapt their behavior based on UI annotations provided.

Prerequisites for Using SAP Fiori Elements

Before using SAP Fiori Elements, ensure the following:

• Backend data must be provided by an OData service.
• Applications must be browser-based (not for iOS or Android).
• UI behavior and logic must be compatible with SAP Fiori design principles.
• Applications should be online.

SAP Fiori Floorplans

Five main types of floorplans cover 80% of common SAP application scenarios:

• List Report: Allows users to view and work with large sets of items, providing search, filter, sort, and group functionalities.
• Overview Page: Provides all the information a user needs on a single page, organized into cards.
• Worklist: Shows a collection of items a user needs to process, with simple and tabbed variants.
• Analytical List Page: Offers a unique way to analyze data step-by-step and act on transactional content.
• Object Page: Displays and categorizes all relevant information about an object, allowing quick access to content and switching between view and edit modes.
• Wizard Page: This type of page can be used to create and edit business objects. Wizards guide users through a complex data entry process, focusing on one step at a time. Users can only move to the next step after completing the current one. A wizard can have a minimum of three steps and a maximum of eight steps.
• Worklist Page: As the name suggests, this layout allows users to view a list of items awaiting action. The focus in this design is on processing the items in the list. In a worklist report layout, the emphasis is on filtering and listing items. This layout usually utilizes a full-screen design. If the list is very simple, a split-screen layout can also be used. A dynamic page layout can be used if variant settings are needed, which can be accommodated in the header section.

Layouts in SAP Fiori

SAP Fiori applications consist of pages, each utilizing a SAPUI5 layout control:

• Dynamic Page Layout: Introduced in SAPUI5 version 1.42, this layout contains a collapsible header, a content area, and an optional footer toolbar.
• Flexible Column Layout: An evolution of the split-screen layout, it provides a responsive design suitable for both desktop and mobile devices, supporting up to three columns.
• Split-Screen Layout: A master-detail layout with two columns—master list and detail area—each with separate headers and footers.

The full-screen and split-screen layouts were deprecated in SAPUI5 version 1.48, replaced by the dynamic and flexible column layouts.