In our first post, we introduced the SAP Fiori development portal and explored the concept of building blocks. Now it’s time to dive deeper and see how this portal unlocks the full potential of these enterprise-ready components. Whether you’re a developer, designer, or business analyst, the portal provides an intuitive way to explore, understand, and leverage the comprehensive capabilities that SAP Fiori elements building blocks offer.
Exploring the Portal’s Structure
The SAP Fiori development portal organizes everything you need into four main sections, each designed to guide you through different aspects of SAP Fiori app development
Building Blocks – This is where the magic begins. Here you’ll find all available building blocks, from the fundamental field component that forms the foundation of nearly every application, to sophisticated components like tables and charts. Each building block comes packed with enterprise-grade features that would take months to develop from scratch.
Global Patterns – Don’t overlook this section! These non-visual building blocks are what make your applications truly enterprise-ready. Features like draft handling, internal and external navigation, and error handling ensure your apps meet the high standards users expect from SAP applications.
Standard Floorplans – When you need proven layouts fast, this section provides predefined combinations of building blocks optimized for common use cases like List Report and Object Page. These floorplans represent years of UX research and customer feedback, delivering consistency and developer productivity. The section also helps you explore the extension points provided by SAP Fiori elements to extend the standard floorplans. If your targeted SAP Fiori app is close to a standard floorplan, extending it using the extension points provided by SAP Fiori elements gets you to the result easily and quickly.
Custom Pages – For unique requirements, this section shows you how to combine both visual and non-visual building blocks to create custom layouts while retaining all the enterprise features and annotation-driven benefits.
Structured Feature List
Â
The Power Behind Every Building Block
What makes these building blocks truly powerful isn’t just their visual appeal – it’s the comprehensive feature set that comes built-in. Take the table building block, for example. Out of the box, you get:
Personalization capabilities that let users customize their viewVariant management for saving and sharing different table configurationsExport and import functionality for seamless data exchangeMultiple visualization options to present data in the most effective wayExtension points that allow developers to add custom functionality without breaking the core featuresResponsive behavior that adapts to different screen sizes and devicesAccessibility compliance ensuring your apps work for all users
This enterprise-grade functionality would typically require significant development effort, but with SAP Fiori elements building blocks, it’s available immediately through simple annotations.
Hands-On Exploration Made Easy
Every page in the portal follows a consistent structure designed for learning and experimentation:
Focused introduction – Each feature gets a clear, concise explanationLive samples – See the building block in action with real data in both display and edit modesImplementation guidance – Clear instructions showing the annotations, manifest settings, or code neededMultiple annotation formats – Examples in CAP CDS, RAP CDS, and XML annotations for maximum compatibilityLive code editing – The integrated code editor lets you experiment and see changes instantlyFurther reading – Use the link to the specific product documentation to understand further details
Page Overview
Â
What’s Next
In our next post, we’ll explore how complex building blocks can be combined to create sophisticated user interfaces that handle the most demanding business scenarios. We’ll show you how the portal helps you understand the relationships between different building blocks and guides you in creating cohesive, powerful applications.
Development (1/6)Â Introducing the SAP Fiori Development Portal: Your… – SAP CommunityGet 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 first post, we introduced the SAP Fiori development portal and explored the concept of building blocks. Now it’s time to dive deeper and see how this portal unlocks the full potential of these enterprise-ready components. Whether you’re a developer, designer, or business analyst, the portal provides an intuitive way to explore, understand, and leverage the comprehensive capabilities that SAP Fiori elements building blocks offer.Exploring the Portal’s StructureThe SAP Fiori development portal organizes everything you need into four main sections, each designed to guide you through different aspects of SAP Fiori app developmentBuilding Blocks – This is where the magic begins. Here you’ll find all available building blocks, from the fundamental field component that forms the foundation of nearly every application, to sophisticated components like tables and charts. Each building block comes packed with enterprise-grade features that would take months to develop from scratch.Global Patterns – Don’t overlook this section! These non-visual building blocks are what make your applications truly enterprise-ready. Features like draft handling, internal and external navigation, and error handling ensure your apps meet the high standards users expect from SAP applications.Standard Floorplans – When you need proven layouts fast, this section provides predefined combinations of building blocks optimized for common use cases like List Report and Object Page. These floorplans represent years of UX research and customer feedback, delivering consistency and developer productivity. The section also helps you explore the extension points provided by SAP Fiori elements to extend the standard floorplans. If your targeted SAP Fiori app is close to a standard floorplan, extending it using the extension points provided by SAP Fiori elements gets you to the result easily and quickly.Custom Pages – For unique requirements, this section shows you how to combine both visual and non-visual building blocks to create custom layouts while retaining all the enterprise features and annotation-driven benefits.Structured Feature List The Power Behind Every Building BlockWhat makes these building blocks truly powerful isn’t just their visual appeal – it’s the comprehensive feature set that comes built-in. Take the table building block, for example. Out of the box, you get:Personalization capabilities that let users customize their viewVariant management for saving and sharing different table configurationsExport and import functionality for seamless data exchangeMultiple visualization options to present data in the most effective wayExtension points that allow developers to add custom functionality without breaking the core featuresResponsive behavior that adapts to different screen sizes and devicesAccessibility compliance ensuring your apps work for all usersThis enterprise-grade functionality would typically require significant development effort, but with SAP Fiori elements building blocks, it’s available immediately through simple annotations.Hands-On Exploration Made EasyEvery page in the portal follows a consistent structure designed for learning and experimentation:Focused introduction – Each feature gets a clear, concise explanationLive samples – See the building block in action with real data in both display and edit modesImplementation guidance – Clear instructions showing the annotations, manifest settings, or code neededMultiple annotation formats – Examples in CAP CDS, RAP CDS, and XML annotations for maximum compatibilityLive code editing – The integrated code editor lets you experiment and see changes instantlyFurther reading – Use the link to the specific product documentation to understand further detailsPage Overview What’s NextIn our next post, we’ll explore how complex building blocks can be combined to create sophisticated user interfaces that handle the most demanding business scenarios. We’ll show you how the portal helps you understand the relationships between different building blocks and guides you in creating cohesive, powerful applications.To get the full overview about the SAP Fiori development portal, check out the following blog posts of the mini-series:Development (1/6) Introducing the SAP Fiori Development Portal: Your… – SAP CommunityGet 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
