In our previous posts, we introduced the SAP Fiori development portal and explored its structure. Now it’s time to see the real power in action. Complex building blocks like the table don’t just display data – they bring intelligent behavior, enterprise-grade features, and multiple visualization options that adapt to your business needs. Let’s dive into how the portal helps you explore and understand these sophisticated capabilities.
Beyond Visual Display: Intelligent Behavior
The table building block exemplifies how SAP Fiori elements transforms simple annotations into comprehensive business functionality. When you annotate your UI.LineItems, you’re not just defining columns – you’re enabling a complete data management experience.
The table automatically adapts its behavior based on your entity’s capabilities which are defined in the service metadata and annotations, for example:
Insertable entities enable users to create new records directly in the tableDeletable entities provide deletion capabilities with proper confirmation dialogsUpdatable entities allow inline editing, with optional mass edit features for bulk changesAnnotated actions become available as table actions, properly integrated with selection states
Built-in Delete Feature
This intelligence means your users get the functionality they need without additional development effort on your part.
Multiple Visualizations at Your Fingertips
The portal showcases how a single building block can transform into different visualizations based on your requirements:
Responsive Table – Optimized for mobile and varying screen sizesGrid Table – High-performance display for large datasetsAnalytical Table – Built-in aggregation and grouping capabilitiesTree Table – Hierarchical data representation
But the capabilities don’t stop there. The table building block comes packed with enterprise-grade features that users expect from modern business applications:
File Operations – Upload and download functionality for seamless document managementData Export – Export to Excel and PDF for offline analysisClipboard Integration – Copy and paste operations for efficient data entryPersonalization – Column reordering, resizing, and hiding based on user preferencesVariant Management – Save and share different table configurations across usersFiltering & Sorting – Built-in capabilities for data exploration and organizationMass Operations – Bulk actions and mass editing for productivity
And this is just the beginning – the portal showcases dozens of additional features that activate automatically based on your metadata annotations, entity capabilities and configuration. Each feature is documented with examples showing exactly how to enable it in your application.
Extensibility When Standard Features Aren’t Enough
The portal demonstrates how building blocks balance out-of-the-box functionality with extensibility. When standard features don’t meet your specific needs for, you can:
Add custom controls to display calculated or derived dataIntegrate custom actions for business-specific operationsUse the building block API in your controller code for advanced scenarios
Custom Column in Table
This extensibility ensures you’re never locked into standard behavior while still benefiting from enterprise-grade foundation features.
Multi-Format Code Examples: A New Level of Support
One of the portal’s newest and most valuable features is showing the same annotations in multiple formats. When you explore a building block like the table, you’ll see the implementation in:
CAP CDS – For SAP Cloud Application Programming Model developmentRAP CDS – For ABAP RESTful Application Programming (since 1.142)XML annotations – For local annotations when service changes aren’t possible
Line Item Implementation
The portal’s multi-format code examples ensure every developer can find the implementation pattern that fits their development context. CAP CDS examples offer full interactivity – modify annotations and see immediate results in the preview. RAP CDS examples provide static but comprehensive guidance for ABAP developers working in modern SAP environments, showing exactly how to implement the same functionality using ABAP RESTful Application Programming patterns. It also helps you find a running sample in the RAP Feature Showcase. XML annotations serve as your fallback option when service-level changes aren’t feasible. This comprehensive approach means whether you’re building with CAP, RAP, or working with existing services, you have the code examples you need to implement any building block feature.
See It in Action: Table Building Block Example
Let’s explore the table’s responsive behavior. When you open the Table Overview on a desktop, you’ll see columns for ID, begin date, end date, agency, and status. But here’s where the intelligence kicks in:
Click “Show Code” next to the UI.LineItems annotation.The code editor opens, the preview adjusts to a smaller viewport, and you’ll notice fewer columns are displayed.
Note that the status column remains visible even though it’s the 5th column in the annotation. This happens because of its @ui.Importance: #High setting.Now try changing @ui.Importance from #High to #Low and watch the status column disappear from the table in real-time.
Changing UI.Importance
This demonstrates how building blocks intelligently prioritize content based on your annotations and available screen space.
Interactive Learning Through Live Code
The portal’s live code editing capability transforms learning from passive reading to active experimentation. You can:
Modify annotations and see immediate visual resultsTest different configuration combinationsUnderstand the relationship between metadata and UI behaviorExperiment safely without affecting your actual development environment
This hands-on approach helps you understand not just what’s possible, but how different annotation patterns affect the user experience and can serve as input for your app development.
What’s Next
In our next post, “Use SAP Fiori development portal to understand extension options for standard floorplans (4 of 6),” we’ll shift focus from individual building blocks to complete pages. We’ll explore how the portal guides you through extending standard floorplans like List Report and Object Page, showing you exactly where and how to add custom functionality while maintaining the enterprise-grade foundation these pages provide.
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 introduced the SAP Fiori development portal and explored its structure. Now it’s time to see the real power in action. Complex building blocks like the table don’t just display data – they bring intelligent behavior, enterprise-grade features, and multiple visualization options that adapt to your business needs. Let’s dive into how the portal helps you explore and understand these sophisticated capabilities.Beyond Visual Display: Intelligent BehaviorThe table building block exemplifies how SAP Fiori elements transforms simple annotations into comprehensive business functionality. When you annotate your UI.LineItems, you’re not just defining columns – you’re enabling a complete data management experience.The table automatically adapts its behavior based on your entity’s capabilities which are defined in the service metadata and annotations, for example:Insertable entities enable users to create new records directly in the tableDeletable entities provide deletion capabilities with proper confirmation dialogsUpdatable entities allow inline editing, with optional mass edit features for bulk changesAnnotated actions become available as table actions, properly integrated with selection statesBuilt-in Delete FeatureThis intelligence means your users get the functionality they need without additional development effort on your part.Multiple Visualizations at Your FingertipsThe portal showcases how a single building block can transform into different visualizations based on your requirements:Responsive Table – Optimized for mobile and varying screen sizesGrid Table – High-performance display for large datasetsAnalytical Table – Built-in aggregation and grouping capabilitiesTree Table – Hierarchical data representationBut the capabilities don’t stop there. The table building block comes packed with enterprise-grade features that users expect from modern business applications:File Operations – Upload and download functionality for seamless document managementData Export – Export to Excel and PDF for offline analysisClipboard Integration – Copy and paste operations for efficient data entryPersonalization – Column reordering, resizing, and hiding based on user preferencesVariant Management – Save and share different table configurations across usersFiltering & Sorting – Built-in capabilities for data exploration and organizationMass Operations – Bulk actions and mass editing for productivityAnd this is just the beginning – the portal showcases dozens of additional features that activate automatically based on your metadata annotations, entity capabilities and configuration. Each feature is documented with examples showing exactly how to enable it in your application.Extensibility When Standard Features Aren’t EnoughThe portal demonstrates how building blocks balance out-of-the-box functionality with extensibility. When standard features don’t meet your specific needs for, you can:Add custom controls to display calculated or derived dataIntegrate custom actions for business-specific operationsUse the building block API in your controller code for advanced scenariosCustom Column in TableThis extensibility ensures you’re never locked into standard behavior while still benefiting from enterprise-grade foundation features.Multi-Format Code Examples: A New Level of SupportOne of the portal’s newest and most valuable features is showing the same annotations in multiple formats. When you explore a building block like the table, you’ll see the implementation in:CAP CDS – For SAP Cloud Application Programming Model developmentRAP CDS – For ABAP RESTful Application Programming (since 1.142)XML annotations – For local annotations when service changes aren’t possibleLine Item ImplementationThe portal’s multi-format code examples ensure every developer can find the implementation pattern that fits their development context. CAP CDS examples offer full interactivity – modify annotations and see immediate results in the preview. RAP CDS examples provide static but comprehensive guidance for ABAP developers working in modern SAP environments, showing exactly how to implement the same functionality using ABAP RESTful Application Programming patterns. It also helps you find a running sample in the RAP Feature Showcase. XML annotations serve as your fallback option when service-level changes aren’t feasible. This comprehensive approach means whether you’re building with CAP, RAP, or working with existing services, you have the code examples you need to implement any building block feature.See It in Action: Table Building Block ExampleLet’s explore the table’s responsive behavior. When you open the Table Overview on a desktop, you’ll see columns for ID, begin date, end date, agency, and status. But here’s where the intelligence kicks in:Click “Show Code” next to the UI.LineItems annotation.The code editor opens, the preview adjusts to a smaller viewport, and you’ll notice fewer columns are displayed.Note that the status column remains visible even though it’s the 5th column in the annotation. This happens because of its @ui.Importance: #High setting.Now try changing @ui.Importance from #High to #Low and watch the status column disappear from the table in real-time.Changing UI.ImportanceThis demonstrates how building blocks intelligently prioritize content based on your annotations and available screen space.Interactive Learning Through Live CodeThe portal’s live code editing capability transforms learning from passive reading to active experimentation. You can:Modify annotations and see immediate visual resultsTest different configuration combinationsUnderstand the relationship between metadata and UI behaviorExperiment safely without affecting your actual development environmentThis hands-on approach helps you understand not just what’s possible, but how different annotation patterns affect the user experience and can serve as input for your app development.What’s NextIn our next post, “Use SAP Fiori development portal to understand extension options for standard floorplans (4 of 6),” we’ll shift focus from individual building blocks to complete pages. We’ll explore how the portal guides you through extending standard floorplans like List Report and Object Page, showing you exactly where and how to add custom functionality while maintaining the enterprise-grade foundation these pages provide.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
