Dear SAP Community,
When it comes to the design of web-based user interfaces, SAP truly has a rich history. A great example is the EPM Purchase Order Demo (FPM/WDA application S_EPM_FPM_PO) (see Figure 1):
Figure 1: Application S_EPM_FPM_PO – Design evolution over the years
Design themes such as Tradeshow, Corbusier, Belize, or Quartz are well known to many developers. But the journey doesn’t end there — it continues toward new Horizons and compliance with the WCAG 2.2 Accessibility Standard.
In the latest releases, several new features have been added to the Floorplan Manager (FPM) / Web Dynpro ABAP framework, driven by customer feedback, SAP design standards, and general product evolution. With the ABAP Platform 2025 and SAP S/4HANA 2025 (on-premise, private cloud, and public cloud editions), we are delivering several enhancements that can be activated easily — either automatically through delivery or manually with minimal configuration or coding effort.
Page Header UIBBs & Object Page Mode
In one of my previous blogs on S/4HANA 2023, 👉 Team FPM: How to Render an FPM Overview Page to Look Like a SAP Fiori Object Page, I introduced the Object Page Mode for the Overview Page (OVP) floorplan.
This mode allows you to render an FPM Overview Page application like a Fiori Object Page. Combined with a Page Header UIBB, you get a dynamic object header that automatically expands and collapses while scrolling. You can also pin the header to keep it fixed. You can easily try this out in the Search Page of the EPM Purchase Order Demo (see Figure 2).
Figure 2: S_EPM_FPM_PO with Page Header and Pin
The new List-Item Navigation lets users navigate to a Purchase Order’s detail page in a Fiori-compliant way. On the detail page, the Object Page Mode provides faster and more precise scrolling to specific screen areas (sections or UIBBs) using the Anchor Bar or Navigation Bar (see Figure 4).
Figure 3: Purchase Order Detail Page with Anchor Bar
Configuration
Object Page Mode is activated in the General Settings as a Floorplan Mode (see Figure 4).To use a dynamic object header, define a Page Header Area in the layout and add Page Header UIBBs.
Figure 4: Object Page Mode setting in FLUID for OVP Floorplan S_EPM_UX_PO_OVP
In the List or Tree UIBB, a List-Item Navigation corresponds to rendering a Link-To-Action column differently. You can achieve this by checking Render as Navigation Column in the column configuration (see Figure 5).
Figure 5: Setting “Purchase Order ID” as Navigation Column in FLUID for List UIBB EPM_PO_OVP_SEARCH_LIST_CFG
Additional Remarks
Some OVP floorplan features may behave differently in Object Page Mode. This can affect:
Header renderingUIBB Selector and Page Master splitter controlSection and UIBB stackingPersonalization and panel behavior
However, Power User Modes allow overriding some restrictions — such as enabling drag-and-drop for UIBBs, expanding and collapsing panels, or rearranging layout elements.
CSS Grid Layout & WCAG 2.2 Compliance
Another major improvement is the WCAG 2.2-compliant rendering of forms. We’ve significantly enhanced the responsiveness of the Form/Repeater UIBB (GL2) by adopting a CSS Grid Layout.
This ensures that forms remain usable and readable — even at screen widths as low as 320px (mobile phone format) — without horizontal scrolling (see Figure 6).
Figure 6: “Purchase Order Details” form in different screen sizes
In the configuration editor (FLUID), you can enable the CSS Grid layout at General Settings → Layout Design Type → Responsive (see Figure 7).
Figure 7: FLUID configuration for Form UIBB EPM_PO_OVP_HEADER_FORM_CFG
Message Toasts & Invisible Alerts
In this context, it’s worth mentioning the Message Toast and Invisible Alert features, which enhance both usability and accessibility. A Message Toast is a small, non-disruptive popup for success messages that disappears automatically after a few seconds (see Figure 8). The IF_FPM_MESSAGE_MANAGER ABAP interface now provides the REPORT_MESSAGE_TOAST method for this purpose. You can also enable a Toast Mode globally with the SET_TOAST_MODE( IV_TOAST_MODE = GC_TOAST_MODE-ENABLED ) method, ensuring that messages of severity Success (S) are displayed as toasts by default (see also SAP Help Portal).
Figure 8: “Data Saved” Toast in S_EPM_FPM_PO
An Invisible Alert, on the other hand, is used to inform screen reader users about content changes that are visible but not triggered by them — ensuring WCAG 2.2 compliance. Use the REPORT_INVISIBLE_ALERT method from the IF_FPM_MESSAGE_MANAGER interface for this purpose.
🔙FLP Back Navigation
Finally, let us introduce Back Navigation in the SAP Fiori Launchpad (FLP).
You can now configure where the FLP back button should navigate to. By default, it goes back to the previous application, but often it’s more useful to return to the previous page within the same application. For example, when navigating from a main page to an edit page, you likely want the back button to return to the main page of the same object. Further details are available in SAP Help Portal.
✅Summary
With SAP S/4HANA 2025, the Floorplan Manager for Web Dynpro ABAP continues its evolution toward:
A Fiori-consistent Object Page experienceImproved accessibility (WCAG 2.2)More responsive layoutsEnhanced user feedback mechanisms (message toasts, invisible alerts)Smarter navigation handling in the Fiori Launchpad
These innovations make it easier than ever for FPM-based applications to deliver a modern, accessible, and consistent user experience — across all S/4HANA deployment options.
Thank you for reading — and see you next time! 😊
Dear SAP Community,When it comes to the design of web-based user interfaces, SAP truly has a rich history. A great example is the EPM Purchase Order Demo (FPM/WDA application S_EPM_FPM_PO) (see Figure 1):Figure 1: Application S_EPM_FPM_PO – Design evolution over the yearsDesign themes such as Tradeshow, Corbusier, Belize, or Quartz are well known to many developers. But the journey doesn’t end there — it continues toward new Horizons and compliance with the WCAG 2.2 Accessibility Standard.In the latest releases, several new features have been added to the Floorplan Manager (FPM) / Web Dynpro ABAP framework, driven by customer feedback, SAP design standards, and general product evolution. With the ABAP Platform 2025 and SAP S/4HANA 2025 (on-premise, private cloud, and public cloud editions), we are delivering several enhancements that can be activated easily — either automatically through delivery or manually with minimal configuration or coding effort.Page Header UIBBs & Object Page ModeIn one of my previous blogs on S/4HANA 2023, 👉 Team FPM: How to Render an FPM Overview Page to Look Like a SAP Fiori Object Page, I introduced the Object Page Mode for the Overview Page (OVP) floorplan.This mode allows you to render an FPM Overview Page application like a Fiori Object Page. Combined with a Page Header UIBB, you get a dynamic object header that automatically expands and collapses while scrolling. You can also pin the header to keep it fixed. You can easily try this out in the Search Page of the EPM Purchase Order Demo (see Figure 2).Figure 2: S_EPM_FPM_PO with Page Header and PinThe new List-Item Navigation lets users navigate to a Purchase Order’s detail page in a Fiori-compliant way. On the detail page, the Object Page Mode provides faster and more precise scrolling to specific screen areas (sections or UIBBs) using the Anchor Bar or Navigation Bar (see Figure 4).Figure 3: Purchase Order Detail Page with Anchor BarConfigurationObject Page Mode is activated in the General Settings as a Floorplan Mode (see Figure 4).To use a dynamic object header, define a Page Header Area in the layout and add Page Header UIBBs.Figure 4: Object Page Mode setting in FLUID for OVP Floorplan S_EPM_UX_PO_OVPIn the List or Tree UIBB, a List-Item Navigation corresponds to rendering a Link-To-Action column differently. You can achieve this by checking Render as Navigation Column in the column configuration (see Figure 5).Figure 5: Setting “Purchase Order ID” as Navigation Column in FLUID for List UIBB EPM_PO_OVP_SEARCH_LIST_CFGAdditional RemarksSome OVP floorplan features may behave differently in Object Page Mode. This can affect:Header renderingUIBB Selector and Page Master splitter controlSection and UIBB stackingPersonalization and panel behaviorHowever, Power User Modes allow overriding some restrictions — such as enabling drag-and-drop for UIBBs, expanding and collapsing panels, or rearranging layout elements.CSS Grid Layout & WCAG 2.2 ComplianceAnother major improvement is the WCAG 2.2-compliant rendering of forms. We’ve significantly enhanced the responsiveness of the Form/Repeater UIBB (GL2) by adopting a CSS Grid Layout.This ensures that forms remain usable and readable — even at screen widths as low as 320px (mobile phone format) — without horizontal scrolling (see Figure 6). Figure 6: “Purchase Order Details” form in different screen sizesIn the configuration editor (FLUID), you can enable the CSS Grid layout at General Settings → Layout Design Type → Responsive (see Figure 7).Figure 7: FLUID configuration for Form UIBB EPM_PO_OVP_HEADER_FORM_CFGMessage Toasts & Invisible AlertsIn this context, it’s worth mentioning the Message Toast and Invisible Alert features, which enhance both usability and accessibility. A Message Toast is a small, non-disruptive popup for success messages that disappears automatically after a few seconds (see Figure 8). The IF_FPM_MESSAGE_MANAGER ABAP interface now provides the REPORT_MESSAGE_TOAST method for this purpose. You can also enable a Toast Mode globally with the SET_TOAST_MODE( IV_TOAST_MODE = GC_TOAST_MODE-ENABLED ) method, ensuring that messages of severity Success (S) are displayed as toasts by default (see also SAP Help Portal).Figure 8: “Data Saved” Toast in S_EPM_FPM_POAn Invisible Alert, on the other hand, is used to inform screen reader users about content changes that are visible but not triggered by them — ensuring WCAG 2.2 compliance. Use the REPORT_INVISIBLE_ALERT method from the IF_FPM_MESSAGE_MANAGER interface for this purpose.🔙FLP Back NavigationFinally, let us introduce Back Navigation in the SAP Fiori Launchpad (FLP).You can now configure where the FLP back button should navigate to. By default, it goes back to the previous application, but often it’s more useful to return to the previous page within the same application. For example, when navigating from a main page to an edit page, you likely want the back button to return to the main page of the same object. Further details are available in SAP Help Portal.✅SummaryWith SAP S/4HANA 2025, the Floorplan Manager for Web Dynpro ABAP continues its evolution toward:A Fiori-consistent Object Page experienceImproved accessibility (WCAG 2.2)More responsive layoutsEnhanced user feedback mechanisms (message toasts, invisible alerts)Smarter navigation handling in the Fiori LaunchpadThese innovations make it easier than ever for FPM-based applications to deliver a modern, accessible, and consistent user experience — across all S/4HANA deployment options.Thank you for reading — and see you next time! 😊 Read More Technology Blog Posts by SAP articles
#SAP
#SAPTechnologyblog