Throughout our blog series on the SAP Fiori development portal, we’ve explored how SAP Fiori elements leverages metadata and annotations to build enterprise-grade UIs following the Global UX design principles. But what happens when you need to adjust UI behavior in ways that aren’t expressed through annotations? That’s what we call configuration – and the Fiori Tools are the best place for it. But we’re excited to introduce a new feature in the SAP Fiori development portal that makes configuration discovery and experimentation easier than ever.
Understanding Fine-Tuning in SAP Fiori Elements
SAP Fiori elements applications are primarily driven by metadata and annotations – this is their superpower. Annotations define what data to display, how to structure it, and which features to enable. However, not every UI behavior can or should be controlled through annotations. Some aspects require configuration settings that fine-tune how building blocks render and behave.
Let’s take the table building block as a perfect example. When you annotate your service with UI.LineItem, SAP Fiori elements automatically selects an appropriate table type based on your entity’s capabilities and the Global UX design guidelines:
If your entity set is analytics-enabled, an Analytical Table is displayed, providing built-in aggregation and grouping capabilitiesFor standard use cases, the Responsive Table is shown by default – it’s optimized for various screen sizes and delivers the best user experience across devicesBut what if you need to display massive datasets where scrolling performance is critical? The Grid Table excels at rendering huge amounts of data efficiently
Here’s the challenge: there’s no annotation to switch between these table types. This is where fine-tuning comes into play. You configure these settings in your application’s manifest.json or directly in the building block definition when using XML views. But how do you discover what’s configurable? What are the available options? What values can you set?
Introducing the Fine-Tuning Panel in the SAP Fiori Development Portal
The SAP Fiori development portal now includes a dedicated Fine-Tuning panel that answers these questions interactively. When you open the code editor for any building block – let’s use the table as our example – you’ll notice two tabs at the top: “Code” and “Fine-Tuning.”
Fine-Tuning Panel
The Fine-Tuning panel reveals all available configuration settings for the building block, complete with:
Clear descriptions explaining what each setting controlsThe current value applied in the sampleA searchable interface to quickly find specific settingsImmediate visual feedback when you change values
Exploring Fine-Tuning: A Table Story
Let’s walk through a practical scenario. Navigate to the Table Building Block in the SAP Fiori development portal and click “Show Code” to open the code editor. Now switch to the “Fine-Tuning” tab.
You’ll see a comprehensive list of configuration options. Let’s say you’re working on an application that needs to display thousands of travel records, and scrolling performance is becoming an issue. You remember hearing about the Grid Table’s superior performance with large datasets, but you’re not sure how to enable it.
In the Fine-Tuning panel, use the search box and type “type.” The list immediately filters to show the “type” setting, which controls the table visualization. You’ll see:
A description explaining the table type settingThe current value: “ResponsiveTable” (the default)A dropdown showing all available options: ResponsiveTable, GridTable and AnalyticalTable
Searching for settings
Change the value to “GridTable” and watch the magic happen. The preview immediately updates, showing your table rendered as a Grid Table.
Changing the table type
You can see the visual differences
the denser layoutthe different scrolling behaviorthe optimized rendering for large datasets
But here’s where it gets even better. Switch back to the “Code” tab, and you’ll notice the code has been automatically updated:
<core:FragmentDefinition
xmlns:core=”sap.ui.core”
xmlns=”sap.m”
xmlns:macros=”sap.fe.macros”>
<macros:Table metaPath=”/Travel/@com.sap.vocabularies.UI.v1.LineItem” type=”GridTable”/>
</core:FragmentDefinition>
The `type=”GridTable”` attribute has been added automatically. If you’re using building blocks directly in your XML views, you can simply copy this code into your application. Perfect for custom page development!
From Exploration to Implementation
The Fine-Tuning panel serves as your bridge from exploration to implementation. You can experiment with different settings, understand their effects, and see the exact code needed – all in one interactive environment.
However, it’s important to understand where these settings belong in your application architecture:
For Building Blocks in XML Views (like in custom pages): Apply the settings directly as attributes on the building block, just as shown in the code editor. The portal gives you the exact syntax you need.For Standard Floorplans (List Report, Object Page, etc.): The table building blocks are already integrated into the page structure. To fine-tune them, you add configuration settings to your application’s manifest.json file. The SAP Fiori tools Page Map provides a user-friendly interface for configuring these settings without manually editing JSON.
This two-path approach ensures you can fine-tune your application whether you’re building custom pages with building blocks or extending standard floorplans.
The Fiori Development Portal as Your Fine-Tuning Laboratory
Think of the SAP Fiori development portal’s Fine-Tuning panel as your laboratory for configuration experimentation. You can:
Discover settings you didn’t know existedUnderstand the purpose and impact of each configuration optionTest different combinations to find the optimal setup for your requirementsLearn the exact syntax needed for implementationMake informed decisions backed by visual evidence
This interactive approach transforms configuration from a trial-and-error process into a guided, informed decision-making experience.
But keep in mind: SAP Fiori elements applies Global UX design principles automatically. Only fine-tune when you have specific requirements that justify deviating from the defaults.
What’s Next
The Fine-Tuning panel represents another step in our commitment to making SAP Fiori elements development more accessible, efficient, and collaborative. But we’re not stopping here. We have exciting enhancements planned that will further improve your development experience with the SAP Fiori development portal.
Stay tuned for upcoming blog posts where we’ll introduce additional features that continue to bridge the gap between exploration and implementation, making your journey from concept to production even smoother.
To get the full overview of 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)
Throughout our blog series on the SAP Fiori development portal, we’ve explored how SAP Fiori elements leverages metadata and annotations to build enterprise-grade UIs following the Global UX design principles. But what happens when you need to adjust UI behavior in ways that aren’t expressed through annotations? That’s what we call configuration – and the Fiori Tools are the best place for it. But we’re excited to introduce a new feature in the SAP Fiori development portal that makes configuration discovery and experimentation easier than ever.Understanding Fine-Tuning in SAP Fiori ElementsSAP Fiori elements applications are primarily driven by metadata and annotations – this is their superpower. Annotations define what data to display, how to structure it, and which features to enable. However, not every UI behavior can or should be controlled through annotations. Some aspects require configuration settings that fine-tune how building blocks render and behave.Let’s take the table building block as a perfect example. When you annotate your service with UI.LineItem, SAP Fiori elements automatically selects an appropriate table type based on your entity’s capabilities and the Global UX design guidelines:If your entity set is analytics-enabled, an Analytical Table is displayed, providing built-in aggregation and grouping capabilitiesFor standard use cases, the Responsive Table is shown by default – it’s optimized for various screen sizes and delivers the best user experience across devicesBut what if you need to display massive datasets where scrolling performance is critical? The Grid Table excels at rendering huge amounts of data efficientlyHere’s the challenge: there’s no annotation to switch between these table types. This is where fine-tuning comes into play. You configure these settings in your application’s manifest.json or directly in the building block definition when using XML views. But how do you discover what’s configurable? What are the available options? What values can you set?Introducing the Fine-Tuning Panel in the SAP Fiori Development PortalThe SAP Fiori development portal now includes a dedicated Fine-Tuning panel that answers these questions interactively. When you open the code editor for any building block – let’s use the table as our example – you’ll notice two tabs at the top: “Code” and “Fine-Tuning.”Fine-Tuning PanelThe Fine-Tuning panel reveals all available configuration settings for the building block, complete with:Clear descriptions explaining what each setting controlsThe current value applied in the sampleA searchable interface to quickly find specific settingsImmediate visual feedback when you change valuesExploring Fine-Tuning: A Table StoryLet’s walk through a practical scenario. Navigate to the Table Building Block in the SAP Fiori development portal and click “Show Code” to open the code editor. Now switch to the “Fine-Tuning” tab.You’ll see a comprehensive list of configuration options. Let’s say you’re working on an application that needs to display thousands of travel records, and scrolling performance is becoming an issue. You remember hearing about the Grid Table’s superior performance with large datasets, but you’re not sure how to enable it.In the Fine-Tuning panel, use the search box and type “type.” The list immediately filters to show the “type” setting, which controls the table visualization. You’ll see:A description explaining the table type settingThe current value: “ResponsiveTable” (the default)A dropdown showing all available options: ResponsiveTable, GridTable and AnalyticalTableSearching for settingsChange the value to “GridTable” and watch the magic happen. The preview immediately updates, showing your table rendered as a Grid Table.Changing the table typeYou can see the visual differencesthe denser layoutthe different scrolling behaviorthe optimized rendering for large datasetsBut here’s where it gets even better. Switch back to the “Code” tab, and you’ll notice the code has been automatically updated:<core:FragmentDefinition
xmlns:core=”sap.ui.core”
xmlns=”sap.m”
xmlns:macros=”sap.fe.macros”>
<macros:Table metaPath=”/Travel/@com.sap.vocabularies.UI.v1.LineItem” type=”GridTable”/>
</core:FragmentDefinition>The `type=”GridTable”` attribute has been added automatically. If you’re using building blocks directly in your XML views, you can simply copy this code into your application. Perfect for custom page development!From Exploration to ImplementationThe Fine-Tuning panel serves as your bridge from exploration to implementation. You can experiment with different settings, understand their effects, and see the exact code needed – all in one interactive environment.However, it’s important to understand where these settings belong in your application architecture:For Building Blocks in XML Views (like in custom pages): Apply the settings directly as attributes on the building block, just as shown in the code editor. The portal gives you the exact syntax you need.For Standard Floorplans (List Report, Object Page, etc.): The table building blocks are already integrated into the page structure. To fine-tune them, you add configuration settings to your application’s manifest.json file. The SAP Fiori tools Page Map provides a user-friendly interface for configuring these settings without manually editing JSON.This two-path approach ensures you can fine-tune your application whether you’re building custom pages with building blocks or extending standard floorplans.The Fiori Development Portal as Your Fine-Tuning LaboratoryThink of the SAP Fiori development portal’s Fine-Tuning panel as your laboratory for configuration experimentation. You can:Discover settings you didn’t know existedUnderstand the purpose and impact of each configuration optionTest different combinations to find the optimal setup for your requirementsLearn the exact syntax needed for implementationMake informed decisions backed by visual evidenceThis interactive approach transforms configuration from a trial-and-error process into a guided, informed decision-making experience.But keep in mind: SAP Fiori elements applies Global UX design principles automatically. Only fine-tune when you have specific requirements that justify deviating from the defaults.What’s NextThe Fine-Tuning panel represents another step in our commitment to making SAP Fiori elements development more accessible, efficient, and collaborative. But we’re not stopping here. We have exciting enhancements planned that will further improve your development experience with the SAP Fiori development portal.Stay tuned for upcoming blog posts where we’ll introduce additional features that continue to bridge the gap between exploration and implementation, making your journey from concept to production even smoother.To get the full overview of 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
