SAP Fiori Elements simplifies the development of SAP Fiori applications by providing predefined, metadata-driven floorplans such as List Report, Object Page, Analytical List Page, and Overview Page. These standard floorplans accelerate development and ensure consistency in UX. However, business scenarios sometimes require custom floorplans to deliver unique layouts or functionality beyond standard templates. This article explores how to create custom floorplans in SAP Fiori Elements and extend app capabilities while retaining the benefits of the framework.
Floorplans define the overall page structure, layout, and navigation patterns of an application. SAP Fiori Elements offers a set of standardized floorplans designed to address common business needs with minimal coding by leveraging annotations and templates.
Common floorplans include:
- List Report: Displays lists of business objects with filtering and navigation.
- Object Page: Displays details for a single business object.
- Analytical List Page: Combines analytical charts and list data.
- Overview Page: Provides a dashboard-like view with multiple cards.
While these cover many scenarios, some applications require tailor-made UI layouts — leading to the need for custom floorplans.
Reasons to create custom floorplans include:
- Unique UI/UX requirements that standard templates cannot fulfill.
- Complex business workflows requiring custom navigation or interaction.
- Integration of third-party UI components not available in standard floorplans.
- Branding or visual identity needs beyond SAP Fiori standard styling.
The simplest way to achieve customization is by extending standard floorplans:
- Use UI Adaptation Tools to adjust layouts or add new UI elements.
- Implement Extension Points in XML views or controllers to inject custom UI or logic.
- Customize manifest settings for additional routing or new pages.
This approach maintains standard behaviors and reduces maintenance efforts.
For scenarios demanding full control, you can build a custom floorplan leveraging SAP Fiori Elements principles:
- Create a Custom Template Component: Develop a new SAPUI5 component representing the custom floorplan.
- Use Metadata-Driven Concepts: Continue using OData annotations where possible for data binding and behavior.
- Define Custom Routing and Navigation: Manage app navigation with UI5 routing in
manifest.json.
- Implement Custom Layouts: Use flexible UI5 controls (e.g.,
sap.m.Page, sap.ui.layout.Grid) to design the page structure.
- Integrate with Fiori Launchpad: Ensure your custom app can be launched and navigated from the Fiori Launchpad.
Combine standard floorplans with custom views or fragments where unique UI elements are needed, embedding them into the existing Fiori Elements structure.
- Plan Your UI and Navigation Requirements: Understand the workflow and data interactions.
- Design the UI Layout: Sketch wireframes and decide on controls and navigation.
- Develop the Custom SAPUI5 Component: Build reusable UI components following SAPUI5 standards.
- Connect to Backend via OData: Use annotations to bind data models and enable CRUD operations.
- Configure Manifest and Routing: Define routes, targets, and component usage.
- Implement Business Logic: Add frontend logic and backend enhancements as needed.
- Test and Optimize: Ensure responsiveness, accessibility, and performance.
¶ Benefits and Challenges
- Complete flexibility in UI/UX design.
- Ability to meet complex and unique business requirements.
- Leverage SAP Fiori Elements capabilities like annotation-driven data binding.
- Increased development and maintenance effort.
- Potential loss of automatic updates and improvements from SAP standard floorplans.
- Need for deeper SAPUI5 and Fiori expertise.
Creating custom floorplans in SAP Fiori Elements empowers organizations to deliver tailored, high-impact user experiences that standard templates cannot provide. While extending standard floorplans should be the first consideration for efficiency, building fully custom floorplans is a viable strategy for unique scenarios. Combining SAP Fiori Elements’ metadata-driven approach with flexible UI5 development ensures both innovation and consistency.