In our previous posts, we explored individual building blocks and their sophisticated capabilities. Now it’s time to see how these building blocks come together in predefined layouts called standard floorplans delivered by SAP Fiori elements for OData V4. The SAP Fiori development portal not only showcases these proven layouts but also reveals the rich set of extension options available to customize them for your specific business needs. Let’s explore how you can leverage standard floorplans while maintaining the flexibility to extend when necessary.
Understanding Standard Floorplans
Standard floorplans are predefined layouts of building blocks provided to enable efficient SAP Fiori elements application development. These floorplans inherit all the qualities of their building blocks while adding optimizations for component interaction at the floorplan level. Think of them as proven blueprints that combine the building blocks we explored in previous posts into coherent, user-friendly experiences.
In the portal’s section for Standard Floorplans we demonstrate why this is the most efficient approach for building your SAP Fiori elements application. These layouts represent years of UX research, customer feedback, and real-world usage patterns. When your requirements align closely with a standard floorplan, you get enterprise ready functionality with minimal development effort.
The list report – object page layouts are the most common floorplans in SAP Fiori elements
Exploring Floorplans in the Portal
The portal showcases different types of standard floorplans, each optimized for specific use cases:
List Report Page – The classic combination of filter bar and table for comprehensive data exploration and managementWorklist – A streamlined version focusing purely on the table when filtering isn’t the primary concernAnalytical List Page – An enhanced version with visual filters and charts for data analysis and insightsOverview Page – Visual card-based interface for quick access to vital business information and immediate actionObject Page – Comprehensive detail views with headers, forms, tables, charts, and draft-enabled editing capabilities for seamless document management
What’s important to understand is that all these floorplans make use of the same building blocks we explored in our previous posts – like the table, chart, field, and filter bar components. The difference lies in how these building blocks are orchestrated and optimized to work together at the page level.
Extensions: When Standard Isn’t Enough
Every standard floorplan provides extension points, and the portal’s Extensions chapter is where you discover how to customize these proven layouts for your unique requirements. Let’s look at a practical example that demonstrates both the power and philosophy of the extensibility that SAP Fiori elements for OData V4 offers.
In the Custom Section example, you’ll see how to add a custom FlightMap section to an Object Page. This FlightMap control from SAPUI5 isn’t natively supported by SAP Fiori elements, yet it integrates seamlessly into the standard floorplan structure.
Custom Section in Object Page
This example beautifully illustrates a key principle: your SAP Fiori elements application is never locked in. When you need functionality that goes beyond standard building blocks, you can extend the framework while retaining all the enterprise-grade features of the underlying floorplan.
However – and this is crucial – whenever functionality can be implemented using native SAP Fiori elements support (like adding a table or chart through annotations), it should be implemented that way. The closer your application stays to standard SAP Fiori elements patterns, the better your UI consistency, and the less development and maintenance effort you’ll require over time.
Global Patterns: The Invisible Foundation
Don’t overlook the Global Patterns chapter in the portal. These non-visual building blocks provide the enterprise-grade foundation that makes SAP Fiori applications truly business-ready, like:
Draft Handling – Seamless save and restore functionalityRouting and Navigation – Consistent navigation patterns across your applicationSide Effects – Automatic field updates triggered by user interactions, maintaining data consistency across the UI
These global patterns are automatically used by standard floorplans, providing the robust foundation that users expect from SAP applications. Like their visual counterparts, they support extensions when your business logic requires custom behavior.
TypeScript Support: Modern Development Made Easy
The portal provides the code examples in TypeScript, reflecting the modern development practices we recommend for SAP Fiori elements applications. Take the Draft Handling page as an example. When you click “Show Code” next to “Implementing a Hook,” you’ll see TypeScript implementations that leverage our new BaseControllerExtension types.
Type Script Example in Fiori Development Portal
These new types make it significantly easier to implement hooks in TypeScript, providing better IntelliSense, type safety, and development experience. The portal even includes live transpiling in the browser, so you can see the immediate effects of your code changes. Try this yourself by changing the line:
return this.openDialog(“Do you want to edit this travel request?”, true);
to:
return this.openDialog(“Do you really want to edit this travel request?”, true);
Click the Edit button in the sample preview, and you’ll see your modified dialog text appear immediately.
Updated Sample
This interactive learning approach helps you understand not just what’s possible, but how your changes affect the user experience in real-time.
Conclusion
The SAP Fiori development portal proves to be an invaluable resource for exploring standard floorplans and understanding their extension capabilities. Whether you’re building a straightforward List Report or a complex Object Page with custom sections, the portal guides you through the possibilities while helping you make informed decisions about when to use standard functionality versus custom extensions. The beauty of SAP Fiori elements lies in this balance: start with proven, enterprise-ready standard floorplans, then extend precisely where your business requirements demand it. The portal ensures you understand both the power of the standards and the flexibility of the extensions, enabling you to build applications that are both efficient to develop and maintain.
What’s Next
In our next post, “Prepare building custom pages by using SAP Fiori development portal (5 of 6),” we’ll explore how to move beyond standard floorplans entirely. We’ll show you how the portal guides you through creating completely custom page layouts using the same building blocks, giving you maximum creative freedom while retaining all the enterprise-grade features that make SAP Fiori elements applications so powerful.
To get the full overview about the SAP Fiori development portal, check out the following blog posts of the mini-series:
Introducing the SAP Fiori Development Portal: Your Gateway to Rapid SAP Fiori App Creation (1 of 6)Get familiar with SAP Fiori development portal and the power of the building blocks (2 of 6)Explore the potential of SAP Fiori development portal using complex building blocks (3 of 6)Use SAP Fiori development portal to understand extension options for standard floorplans (4 of 6)Prepare building custom pages by using SAP Fiori development portal (5 of 6)Bringing the SAP Fiori development portal and its use to the next level (6 of 6)
In our previous posts, we explored individual building blocks and their sophisticated capabilities. Now it’s time to see how these building blocks come together in predefined layouts called standard floorplans delivered by SAP Fiori elements for OData V4. The SAP Fiori development portal not only showcases these proven layouts but also reveals the rich set of extension options available to customize them for your specific business needs. Let’s explore how you can leverage standard floorplans while maintaining the flexibility to extend when necessary.Understanding Standard FloorplansStandard floorplans are predefined layouts of building blocks provided to enable efficient SAP Fiori elements application development. These floorplans inherit all the qualities of their building blocks while adding optimizations for component interaction at the floorplan level. Think of them as proven blueprints that combine the building blocks we explored in previous posts into coherent, user-friendly experiences.In the portal’s section for Standard Floorplans we demonstrate why this is the most efficient approach for building your SAP Fiori elements application. These layouts represent years of UX research, customer feedback, and real-world usage patterns. When your requirements align closely with a standard floorplan, you get enterprise ready functionality with minimal development effort.The list report – object page layouts are the most common floorplans in SAP Fiori elementsExploring Floorplans in the PortalThe portal showcases different types of standard floorplans, each optimized for specific use cases:List Report Page – The classic combination of filter bar and table for comprehensive data exploration and managementWorklist – A streamlined version focusing purely on the table when filtering isn’t the primary concernAnalytical List Page – An enhanced version with visual filters and charts for data analysis and insightsOverview Page – Visual card-based interface for quick access to vital business information and immediate actionObject Page – Comprehensive detail views with headers, forms, tables, charts, and draft-enabled editing capabilities for seamless document managementWhat’s important to understand is that all these floorplans make use of the same building blocks we explored in our previous posts – like the table, chart, field, and filter bar components. The difference lies in how these building blocks are orchestrated and optimized to work together at the page level.Extensions: When Standard Isn’t EnoughEvery standard floorplan provides extension points, and the portal’s Extensions chapter is where you discover how to customize these proven layouts for your unique requirements. Let’s look at a practical example that demonstrates both the power and philosophy of the extensibility that SAP Fiori elements for OData V4 offers.In the Custom Section example, you’ll see how to add a custom FlightMap section to an Object Page. This FlightMap control from SAPUI5 isn’t natively supported by SAP Fiori elements, yet it integrates seamlessly into the standard floorplan structure.Custom Section in Object PageThis example beautifully illustrates a key principle: your SAP Fiori elements application is never locked in. When you need functionality that goes beyond standard building blocks, you can extend the framework while retaining all the enterprise-grade features of the underlying floorplan.However – and this is crucial – whenever functionality can be implemented using native SAP Fiori elements support (like adding a table or chart through annotations), it should be implemented that way. The closer your application stays to standard SAP Fiori elements patterns, the better your UI consistency, and the less development and maintenance effort you’ll require over time.Global Patterns: The Invisible FoundationDon’t overlook the Global Patterns chapter in the portal. These non-visual building blocks provide the enterprise-grade foundation that makes SAP Fiori applications truly business-ready, like:Draft Handling – Seamless save and restore functionalityRouting and Navigation – Consistent navigation patterns across your applicationSide Effects – Automatic field updates triggered by user interactions, maintaining data consistency across the UIThese global patterns are automatically used by standard floorplans, providing the robust foundation that users expect from SAP applications. Like their visual counterparts, they support extensions when your business logic requires custom behavior.TypeScript Support: Modern Development Made EasyThe portal provides the code examples in TypeScript, reflecting the modern development practices we recommend for SAP Fiori elements applications. Take the Draft Handling page as an example. When you click “Show Code” next to “Implementing a Hook,” you’ll see TypeScript implementations that leverage our new BaseControllerExtension types.Type Script Example in Fiori Development PortalThese new types make it significantly easier to implement hooks in TypeScript, providing better IntelliSense, type safety, and development experience. The portal even includes live transpiling in the browser, so you can see the immediate effects of your code changes. Try this yourself by changing the line:return this.openDialog(“Do you want to edit this travel request?”, true);to:return this.openDialog(“Do you really want to edit this travel request?”, true);Click the Edit button in the sample preview, and you’ll see your modified dialog text appear immediately.Updated SampleThis interactive learning approach helps you understand not just what’s possible, but how your changes affect the user experience in real-time.ConclusionThe SAP Fiori development portal proves to be an invaluable resource for exploring standard floorplans and understanding their extension capabilities. Whether you’re building a straightforward List Report or a complex Object Page with custom sections, the portal guides you through the possibilities while helping you make informed decisions about when to use standard functionality versus custom extensions. The beauty of SAP Fiori elements lies in this balance: start with proven, enterprise-ready standard floorplans, then extend precisely where your business requirements demand it. The portal ensures you understand both the power of the standards and the flexibility of the extensions, enabling you to build applications that are both efficient to develop and maintain.What’s NextIn our next post, “Prepare building custom pages by using SAP Fiori development portal (5 of 6),” we’ll explore how to move beyond standard floorplans entirely. We’ll show you how the portal guides you through creating completely custom page layouts using the same building blocks, giving you maximum creative freedom while retaining all the enterprise-grade features that make SAP Fiori elements applications so powerful.To get the full overview about the SAP Fiori development portal, check out the following blog posts of the mini-series:Introducing the SAP Fiori Development Portal: Your Gateway to Rapid SAP Fiori App Creation (1 of 6)Get familiar with SAP Fiori development portal and the power of the building blocks (2 of 6)Explore the potential of SAP Fiori development portal using complex building blocks (3 of 6)Use SAP Fiori development portal to understand extension options for standard floorplans (4 of 6)Prepare building custom pages by using SAP Fiori development portal (5 of 6)Bringing the SAP Fiori development portal and its use to the next level (6 of 6) Read More Technology Blog Posts by SAP articles
#SAP
#SAPTechnologyblog
