SAP Community - SAPUI5

SAPUI5 TreeTable: Expand All Children of Selected Nodes

2025-10-08T12:48:18.544000+02:00

Introduction

When working with the SAPUI5 TreeTable, one common requirement is to let users expand nodes beyond just the first level. For example, you may want to expand all children of a selected node, and continue expanding until you reach the deepest leaf level.

The standard SAPUI5 TreeTable API gives us some basic expand/collapse options like expandToLevel() or expanding only specific row index, but there’s no direct way to say:

👉🏼“Take these selected nodes and expand everything under them, no matter how many levels deep.”

That’s exactly the problem I ran into.

To solve this, I built a solution where all selected nodes are expanded recursively until their leaf nodes are visible. The logic works with JSON models (and technically also with OData if you load all hierarchy data upfront — with the usual performance caveats).

Here’s a quick demo of the feature in action 👇🏼

Recursive expansion ensures all children are opened — no matter how deep the hierarchy goes.

At first, I assumed there must be a ready-made API for this — but there isn’t. So, I decided to build a small recursive helper to achieve this behavior. In this blog, I’ll share how I extended the official TreeTable sample to add this functionality.

Why This Is Useful

TreeTables are often used for things like:

Product catalogs
Bill of Materials (BOM)
Organizational hierarchies

And in all these cases, users don’t just want to expand one level at a time — they often want to open everything under a node they’re interested in.

My Approach

The standard TreeTable APIs include:

collapseAll()
expandToLevel(level)
expand(rowIndex)

They don’t include a “recursive expand” option. So, I wrote a helper function _expandRecursive that expands a node and then walks through all of its children, expanding them one by one.

When recursively expanding multiple selected nodes, the row indices of nodes can change if we start expanding from the top, because expanding a node inserts its child rows and shifts the indices of the rows below it. To prevent this from breaking the expansion of other selected nodes, I sort the selected indices in descending order and expand from the last selected row upwards. Within each node, child nodes are then expanded recursively. The tiny async delay ensures that the TreeTable has time to fully process each expansion before moving to the next child, maintaining correct indexing and avoiding skipped nodes.

Implementation

Controller (`CatalogHierarchy.controller.js`)

Here’s the core of the solution — notice the onExpandAllLevelsForSelection method and the _expandRecursive helper:

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], (Controller) => {
    "use strict";

    return Controller.extend("openui5.treetable.recursiveexpand.controller.CatalogHierarchy", {
        onInit() {
        },

         // Collapse all nodes
		onCollapseAll: function() {
			const oTreeTable = this.byId("TreeTableBasic");
			oTreeTable.collapseAll();
		},

        // Collapse only selected nodes
		onCollapseSelection: function() {
			const oTreeTable = this.byId("TreeTableBasic");
			oTreeTable.collapse(oTreeTable.getSelectedIndices());
		},

        // Expand first-level nodes for the entire tree
		onExpandFirstLevelForAll: function() {
			const oTreeTable = this.byId("TreeTableBasic");
			oTreeTable.expandToLevel(1);
		},

        // Expand first-level nodes only for selected entries
		onExpandFirstLevelForSelection: function() {
			const oTreeTable = this.byId("TreeTableBasic");
			oTreeTable.expand(oTreeTable.getSelectedIndices());
		},

        // Expand all levels recursively for selected nodes
        onExpandAllevelsForSelection: function() {
            const oTreeTable = this.byId("TreeTableBasic");
            oTreeTable.setBusyIndicatorDelay(0).setBusy(true);

            const aSelectedIndices = oTreeTable.getSelectedIndices().sort((a, b) => b - a);
		
			// Use a chain of promises to execute the expansion sequentially
			let chain = Promise.resolve();
		
			aSelectedIndices.forEach(function (iIndex) {
				chain = chain.then(function () {
					return this._expandRecursive(oTreeTable, iIndex); // Return a promise from _expandRecursive
				}.bind(this));
			}.bind(this));
		
			chain.then(function () {
				console.log("All selected nodes and their children have been expanded.");
			}).catch(function (error) {
				console.error("Error expanding nodes:", error);
			}).finally(function () {
				oTreeTable.setBusy(false);
			});
		},
		
        /**
         * Recursive function to expand a node and all of its children.
         *  {sap.ui.table.TreeTable} oTreeTable - The TreeTable instance
         *  {int} iIndex - Index of the node to expand
         * @returns {Promise}
         */
		_expandRecursive: function (oTreeTable, iIndex) {
			oTreeTable.expand(iIndex);
		
			const oContext = oTreeTable.getContextByIndex(iIndex);
			if (!oContext) {
				return Promise.resolve();
			}
		
			const iChildCount = oTreeTable.getBinding("rows").getChildCount(oContext);
			let chain = Promise.resolve();
		
			// Process child nodes in reverse order
			for (let i = iChildCount - 1; i >= 0; i--) {
				chain = chain.then(function () {
					const iChildIndex = iIndex + 1 + i;
					return this._asyncDelay(0) // Delay using promises
						.then(() => this._expandRecursive(oTreeTable, iChildIndex));
				}.bind(this));
			}
		
			return chain; // Return the promise chain
		},
		
		/**
         * Helper function to introduce async delay
         *  {int} ms - delay in milliseconds
         * @returns {Promise}
         */
		_asyncDelay: function (ms) {
			return new Promise(function (resolve) {
				setTimeout(resolve, ms);
			});
		}
    });
});

View (CatalogHierarchy.view.xml)

<mvc:View controllerName="openui5.treetable.recursiveexpand.controller.CatalogHierarchy"
        xmlns="sap.ui.table"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:m="sap.m"
        xmlns:u="sap.ui.unified"
        xmlns:core="sap.ui.core"
        height="100%">
    <m:Page
            showHeader="false"
            enableScrolling="false">
        <m:content>
            <TreeTable
                    id="TreeTableBasic"
                    rows="{path:'/catalog/clothing', parameters: {arrayNames:['categories']}}"
                    selectionMode="MultiToggle"
                    enableSelectAll="true"
                    ariaLabelledBy="title">
                <extension>
                    <m:OverflowToolbar style="Clear">
                        <m:Title id="title" text="Clothing"/>
                        <m:ToolbarSpacer/>
                        <m:Button text="Collapse all" press="onCollapseAll"/>
                        <m:Button text="Collapse selection" press="onCollapseSelection"/>
                        <m:Button text="Expand first level for all" press="onExpandFirstLevelForAll"/>
                        <m:Button text="Expand first level for selection" press="onExpandFirstLevelForSelection"/>
                        <m:Button text="Expand all levels for selection" press="onExpandAllevelsForSelection" type="Emphasized"/>
                    </m:OverflowToolbar>
                </extension>
                <columns>
                    <Column width="13rem">
                        <m:Label text="Categories"/>
                        <template>
                            <m:Text text="{name}" wrapping="false" />
                        </template>
                    </Column>
                    <Column width="9rem">
                        <m:Label text="Price"/>
                        <template>
                            <u:Currency value="{amount}" currency="{currency}"/>
                        </template>
                    </Column>
                    <Column width="11rem">
                        <m:Label text="Size"/>
                        <template>
                            <m:Select
                                    items="{path: '/sizes', templateShareable: true}"
                                    selectedKey="{size}"
                                    visible="{= !!${size}}"
                                    forceSelection="false">
                                <core:Item key="{key}" text="{value}"/>
                            </m:Select>
                        </template>
                    </Column>
                </columns>
            </TreeTable>
        </m:content>
    </m:Page>
</mvc:View>

Things to Watch Out For

Works only if the hierarchy is fully loaded (JSON model, or preloaded OData).
Won’t work with lazy loading via navigation.
Be careful with very large datasets — expanding thousands of nodes recursively can impact performance.

Wrap Up

This helper solved a real problem for me and might help you if you’re working with hierarchical data in a TreeTable. It’s simple, effective, and can be adapted to your use case.

Feel free to fork the repo or leave feedback in the comments!

📦Source Code: GitHub Repository
🌐Live Demo: Try it out here

What's new in SAP Cloud Application Programming Model – September 2025

2025-10-14T09:43:07.148000+02:00

Dear SAP Community,

I’m happy to announce that the September release of SAP Cloud Application Programming Model (CAP) is available. It’s packed with many great new features! This blog post highlights some of the new features. It presents a range of exciting new capabilities, such as the new MCP servers or the integration with Application Frontend service. In addition, we collected some informative blog posts delving into various aspects of CAP and give you an overview on upcoming events.

Check out the details of what's new!

Enabling Agentic Development with MCP Servers

The Model Context Protocol (MCP) is an open standard that bridges the gap between large language models (LLMs) and external resources such as services, tools, data, and workflows, so models can fetch context, take actions, and deliver more accurate results. MCP is already supported by clients such as Claude, Cline, Cursor, and VS Code.

Beginning of September, SAP introduced MCP servers for CAP, SAP Fiori elements, and SAPUI5. These MCP servers are designed specifically for building enterprise-grade SAP business applications taking into account proven best practices and providing recommendations tailored to SAP Business Technology Platform.

Welcome to cap-js/mcp-server

For further information, I highly recommend you to read this blog post: SAP Build introduces new MCP Servers to enable agentic development for Enterprise Applications.

Easily Integrate with Application Frontend Service

The Application Frontend service is a SaaS application on SAP Business Technology Platform (BTP), which serves as a single entry point for hosting, serving and operating frontend applications. It is part of SAP Build, SAP’s unified solution for application development and process automation. By consolidating all aspects of UI application management under one managed service, Application Frontend service simplifies the development experience and enhances custom application operations. For an introduction to Application Frontend service, please read this blog post.

With our latest CAP release it is now possible to easily integrate the Application Frontend service. All you have to do is use the command cds add app-frontend. This adds all the needed configuration to your project providing you access to Application Frontend’s cool features. No additional work for you to do!

Please note: The support for this service is currently limited to single-tenant applications.

Integration with SAP Integration Suite, Advanced Event Mesh now Generally Available

SAP Integration Suite, advanced event mesh enables real-time, asynchronous communication. It works across hybrid, multi-cloud, and edge environments. The advanced event mesh integrates SAP and non-SAP systems into your event-driven architecture and allows you to form meshes of event brokers. You can publish and subscribe to business events from all kinds of SAP and non-SAP event sources. As a result, event-driven architecture and advanced event mesh keep systems and users up to date when critical changes occur. Advanced event mesh allows to manage, monitor, and visualize decentralized event streaming across your landscape.

In May, we released the beta version of our integration with advanced event mesh. After a successful test and evaluation phase, we are now happy to tell you that both open-source plugins (for Node.js and for Java) are now generally available (GA). The GA release comes with a notable addition: the support for cross-subaccount broker validation, allowing you to share advanced event mesh instances between multiple subaccounts.

Additional details can be found here.

Translated Error Messages in CAP Node.js

For a better user experience, error messages that appear on the UI should be translated into the same language as the rest of their application. Therefore, CAP Node.js delivers translations for annotation-based input validations out of the box in all CAP-supported languages. For a list of the messages that are currently translated, see the documentation.

Screenshot: Translation of error codes to German language

To learn more about error handling in Node.js, please read the following section in the documentation. For additional information about internationalization in Node.js, check out this section.

For those of you, who use CAP Java: translated error messages are also supported there. Please look at the documentation, to gain further insights.

Further Readings & Events

Avoiding Data Loss When Loading Initial Data with CSV Files in CAP

Using CSV files to load initial data or sample data is convenient but you must be careful when deploying data to SAP S/4HANA Cloud as you might risk losing data. In his blog post Avoiding Data Loss When Loading Initial Data with CSV Files in CAP, SAP Champion Mio Yasutake explains alternative approaches how to avoid data loss.

Providing Feedback on CAP Documentation

Your feedback is crucial for us to improve. Thus, we would like to ask you to share your feedback on our CAP documentation. There are many ways to provide us your feedback. In his blog post Multiple Ways to Give Feedback on CAP Documentation, my colleague Rene guides you through the different options.

SAP Cloud Application Programming Model Customer Roundtable

The next CAP Customer Roundtable is just around the corner. If you are interested in an overview of the recent features, demos, presentations and questions raised by the CAP community, mark your calendar for October 15th, 2025, 11 AM EST | 5 PM CE(S)T. Find further details (including the agenda and dial in data) in this blog post.

Devtoberfest 2025

Devtoberfest 2025 already started. In 2025, the event is taking place from September 29th until October 24th. But you can still consume the content. Devtoberfest is a virtual event giving SAP developers a great opportunity to get ready for SAP TechEd. It is packed with enablement sessions around topics in the area of CAP, ABAP, Tooling and Frontend, Integration, Data and AI, combined with a lot of fun. For further information, read the Devtoberfest 2025 Welcome! blog post and join the Devtoberfest group in SAP Community to take part in this great event!

SAP TechEd 2025

From November 4–6, 2025 SAP TechEd takes place providing you the opportunity to learn about the latest innovations and advancements in SAP technologies and to connect with the community. In 2025, SAP TechEd will be a hybrid event combining the best of both worlds: the in-person event in Berlin and the virtual event. Both events are taking place in parallel. Make sure to save the date and register now for Berlin or virtual!

The session catalogs for the in-person and the virtual event are now live, featuring a wide range of topics across various tracks, where you'll find many sessions on the SAP Cloud Application Programming Model.

For further information on new features, please have a look at the SAP Cloud Application Programming Model Release Notes. If you want to stay up-to-date with news, learning resources, and product and strategy updates for CAP: follow our tag in the SAP Community.

We look forward to seeing how you use these new capabilities to create innovative solutions and drive your projects forward. Stay tuned for more updates and happy coding! 😊

How to speed up UI development process using UI5 web components

2025-10-14T10:44:12.002000+02:00

In the past few weeks I was asked to build a React application to be deployed on BTP. The application needs to be integrated with authentication and destinations to connect to a backend OData API.

I started with the templates available in Build Code to create an application skeleton with these capabilities, and it worked fine. The app communicated via a destination to an OData service deployed in my BTP subaccount; it required authentication. So, at first glance, my job was done.

Then I decided to change the app layout and began modifying the generated components. At that point I realized testing the changes was not straightforward. Running the app locally was possible, but to get the latest changes I had to rebuild the app completely, and that procedure takes time (almost 1 minute).

I wanted a leaner workflow to make changes and test them locally without a full rebuild every time.

Since I’m not an expert in React development, I asked a colleague, @rpagni, for help. He has solid experience with the framework and said, “I’ve faced this problem before — let me show you how I solved it.” His idea was great: use a modern React build tool for faster builds and use the app router to handle both dev and prod versions. That way the app router can easily integrate authentication and backend communication via destinations.

Looking for examples I found this tutorial: https://developers.sap.com/mission.react-spa.html. It uses React and Vite, but unfortunately it doesn’t connect to a backend service and isn’t integrated with a multitarget application (MTA).

So, together with @rpagni we decided to document the solution step by step to share our experience. We described every aspect of what we did and explained the choices we made.

Steps to create a React application deployable in BTP and using UAA and Destination services

Create Basic Multitarget Application

Open the template wizard and start creating a Multitarget Application project. Assing to the project your preferred name.

Create an Approuter module

In the MTA project create an app router module. To do that:

right click on the mta.yaml file and select Create MTA module from Template.
select Approuter Configuration module
configure the following screen with these values:
- Application Runtime: Standalone Approuter
- Add Authentication: Yes
- Plan to add UI: Yes
if you want to change the app router module name, change the name to the created folder and change, in the mta.yaml file, any reference to the previous folder name with the new name assigned

Change xs-security.json to allow the local app-router to manage authentication

When you run the application, either in dev mode or in production mode, it could happen to get the error:

OpenID provider cannot process the request because the redirect_uri does not match the configuration. Please contact your system administrator.

This is an error related to the authentication process. The app router redirects the user session to the authetication service and this raises an error. The reason is about the fact that the expected redirect URI, provided as parameter to the authentication service, it is not part of the allowed redirect URIs. To solve this issue, add to the xs-security.json the following allowed URIs patterns. Add the following object property to the configuration (adapt the patterns to your specific subaccount URLs):

,
  "oauth2-configuration": {
      "redirect-uris": [
          "https://*.cfapps.eu10-004.hana.ondemand.com/login/callback",
          "https://*.cfapps.eu10.hana.ondemand.com/login/callback",
          "https://*.applicationstudio.cloud.sap/login/callback"
      ]
  }

Crate a React Vite project

Create a React project with your preferred build tool, in this case we use Vite template see an example here. This template will create a React project using the SAPUI5 web components

Open terminal, navigate to the project root folder and run the commands (events-app is the folder name):

npx degit UI5/webcomponents-react/templates/vite-ts#main events-app
cd events-app
npm i

Properly setup Vite project

In the Vite project perform these activities:

change the vite.config.ts with this content:

import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path";
export default defineConfig({ 
  plugins: [react()], 
  server: { 
    hmr: { port: 5174, }, 
  }, 
  build: { 
    outDir: "../test-react-approuter/dist", 
    emptyOutDir: true, 
  }, 
  resolve: { 
    alias: { 
     "@": path.resolve(__dirname, "./src"), 
    }, 
  }, 
});

purpose of this code is:

setup a fixed port (5174) for the preview service
define the build directory: once the project is built, this is the place where to store the built files. This config defines to store the /dist folder within the app router folder, this is needed later on when the routes are defined in the xs-app.json
set an alias on the subfolders contained within the react project source folder
import the path library typing the command
npm i path -s
in the tsconfig.json add, in the compilerOptions ojects, the 2 properties
```
 "baseUrl": ".",
 "paths": {
     "@/*": ["./src/*"]
 }
```

Edit mta.yaml file

The purpose of this edting is to add a resource declaration to define a destination service instance, once the mta will be deployed and add a reference to this service to the app router module. The need of this setting is to allow the app router to access the destination service and connect, via a destination reported withint the xs-app.json, to the backend service needed to consume the corresponding APIs (in my case the APIs managing events data). For doing that proceed as defined here:

in the resources section (end of the file) add a resource defining a destination service instance. For example:

 - name: dest_events-react-app
 type: org.cloudfoundry.managed-service
 parameters:
     service: destination
     service-name: dest_events-react-app
     service-plan: lite

in the app router module definition, add a reference to such a resource in the requires section:

 requires:
   - name: events-react-app_html_repo_runtime 
   - name: uaa_events-react-app 
   - name: dest_events-react-app

remove the deployer module: having selected the standalone app router as application runtime, the wizard creates.

Build and deploy the project

With this activity the aim is to deploy the mtar file corresponding to this project. The goal is not to have a productive version of the app, but simply to let the deployment process to istantiate the declared xsuaa and destination services. Later you will download the corresponding env data realted to them.

right click on the mta.yaml file and select the build command
once the build is finished, find the generated mtar file, right click on it and select to deploy (be sure to be authenticated to any valid BTP subaccount and space with some available runtime resources assigned).

Once deployed, check in the space applications to find an app named as the app router module.

Setup the app router module to manage both the productive and the development app execution

The goal of this step is to properly structure the app router module in order to let the user both test locally the application without any need of code rebuild and having the application working productively, as well.

Create a dev folder in the module

The purpose of this folder is to define a developer configuration for the app router. The content of this folder is used to serve the application during the development phase and not require any application build process.

create a folder called (for example) dev in the app-approuter folder
open the package.json and change the script start-local with this command:
node node_modules/@sap/approuter/approuter.js --workingDir dev
this commanda runs the app router with the configuration defined in the next steps in folder dev
move to folder dev and copy and paste the xs-app.json file, available in the app-approuter folder
create a default-env.json file in the dev folder. This file will be used by the @sap/approuter library to connect to the xsuaa and destination services available in BTP. In this way, during the development phase, the developer can test the authetication/authorization (for example checking whether the assigned scopes are working properly) and the destination connectivity as per the productive version of the app. To create the file:
1. open BTP cockpit and navigate to the space applications page. Here identify the deployed app router application and click on it
2. in the menu on the left side click on the item Environment Variables
3. copy the whole content in the area called System Provided
4. paste the content into the file default-env.json then perform these actions:
  - delete the whole json object containing the property VCAP_APPLICATION, just keep the one containing the VCAP_SERVICES property
  - in the object VCAP_SERVICES delete the following properties: destination and html5-apps-repo
  - add a property named destinations at the same level of the property VCAP_SERVICES. Its value must be:
```
  "destinations":[
      {
          "name":"EventsBooking-app-srv2",
          "url":"https://EventsBooking-app-srv2.dest",
          "proxyHost":"http://127.0.0.1",
          "proxyPort":"8887"
      },{
          "name": "vite-dev-server",
          "url": "http://localhost:5174"
      }
  ]
```
    In this section you have to add all the destionations the react app will use to get data out of external APIs. In the example above there are declared 2 destinations:
    - EventsBooking-app-srv2: it is the BTP destination targeting the Events Management APIs, will be used by the app to get/store events data. Pay attention to the url parameter, it declares to use the URL defined at BTP destination level, so you don't need to hard code it. Leave the proxy parameters as in the example. These provide to BAS the way to communicate with BTP
    - vite-dev-server: it is the destination targeting the URL of the local running react app. The port reported in the URL is the one defined in the file vite.config.ts. This destination let the local app router to forward the local react app calls to the running vite preview execution
Adjust the xs-app.json file in the dev folder: this activity has the aim to define all the local app router configurations, like for example the welcome page, the routes etc. In this case the configuration is as follow:
```
 {
     "welcomeFile": "index.html",
     "authenticationMethod": "route",
     "routes": [
         {
             "authenticationType": "xsuaa",
             "csrfProtection": false,
             "source": "^/EventsBooking-app-srv2/(.*)$",
             "destination": "EventsBooking-app-srv2",
             "target": "$1"
         },
         {
             "source": "^/user-api(.*)",
             "target": "$1",
             "service": "sap-approuter-userapi"
         },
         {
             "source": "^(.*)$",
             "target": "/$1",
             "destination": "vite-dev-server",
             "authenticationType": "none"
         }
     ],
     "compression": {
         "enabled": false
     }
 }
```
the most important part is the routes array. In this array you have to define all the routes the local app router must use. Rember that the routes are processed from the top (array element 0) to the bottom (array element N). The first that matches is the one executed. In this case the meaning of the routes are:
1. forward to the destinantion EventsBooking-app-srv2 all the app calls to URL path starting with the prefix /EventsBooking-app-srv2. All these calls are defined in the app as the once to interact with the events managment OData service
2. forward all the calls with URL path starting with /user-api to the standard sap-approuter-userapi user api service. This service provides data about current logged in user, like user name and authorization scopes assigned see here for more info
3. this route forwards all the local api calls to the vite preview service running. Each and every time the react app needs to donwload an asset, a css, js, etc files these requests are routed to the preview service. this is the route that makes the magic happens, that allows the developer to test the changes without fully rebuilding the application.

Adjust the xs-app.json for the productive usage

In the previous paragraph you setup the environment for the development phase, but once the app will be built and deployed this doesn't served the productive code. For this reason it is needed to setup the xs-app.json in the app router folder module.

open the xs-app.json file contained in the root folder of the app router module.

setup its content as expected for the prodcutive usage. In this example its content is:

{
 "authenticationMethod": "route",
 "welcomeFile": "index.html",
 "routes": [
     {
         "authenticationType": "xsuaa",
         "csrfProtection": false,
         "source": "^/EventsBooking-app-srv2/(.*)$",
         "destination": "EventsBooking-app-srv2",
         "target": "$1"
     },
     {
         "source": "^/user-api(.*)",
         "target": "$1",
         "service": "sap-approuter-userapi"
     },
     {
         "source": "^(.*)$",
         "target": "$1",
         "localDir": "dist",
         "cacheControl": "no-cache, no-store, must-revalidate"
     }
 ],
 "compression": {
     "enabled": false
 }
}

the difference with the dev version of the same file is in the third route. This route says to the app router to route all the react app calls, which not have the prefixes defined by the first two ones, to the local folder called dist. This is the folder, set in the vite.config.ts, where the full build process will store the output of the build procedure. In other words, it is the folder containing the productive version of the react app code.

Once the app will be deployed and running, every local app call for downloading assets, files (like css, js, etc) will be forwarded to the content of that folder.

Optimize the mta building procedure

To optimize the mta building procedure proceed as described below:

create a script in the package.json contained in the app router folder with this name and command:
"build": "cd ../events-app && npm run build"
this command allows to trigger che building of the react app as soon as the app router module build is triggered (see next paragraphs). The script move the context to the react app folder and run the build script contained there
change the mta.yaml file as following:

in the app router module append the following configuration:

 build-parameters:
     ignore:
     - node_modules
     builder: custom
     commands:
     - npm run build

this configuration avoid to include, in the final mtar file, any node_modules folder and, before build the module, runs the script build created beforehand to trigger the vite build command for the react app

Test the app in dev mode

To test the app in dev mode proceed as following:

open a terminal window
move to the react app folder
run the command
npm run dev
this command starts the application in dev mode on port 5174, as per app configuration. No need to rebuild the app the see the changes
open a new terminal window and move in the approuter folder
run the script start-local, this run the app router using the config stored in the dev folder.
run a preview of the app on the port 5000
make any change in the code, refresh the app preview and check whether the change is replicated properly

Test the app in productive mode

To test the app in productive mode, simply bluid the mta.yaml file and deploy the generated mtar.

ATTENTION: if you deploy on the same space where you perfomed the first deployment, you need to get again the environment variables of the app, copy just the property xsuaa and used it to replace the same property in the defaul-env.json file. Remind to stop and restart the local running app router to make the change available

If you don't want to overwrite the value of the property xsuaa, deploy the app in a different space of a different account.

New tutorial for UI5 Middleware FE Mockserver

2025-10-14T13:48:45.302000+02:00

A new hands-on tutorial is now available to accompany the Devtoberfest session UI5 Middleware FE Mockserver in Practice — Setup, Use Cases, Live Coding. It’s a guided, step-by-step journey showing how to use @sap-ux/ui5-middleware-fe-mockserver productively with Fiori Elements and beyond covering setup, data strategies, actions, multi-service scenarios, tenant isolation, offline E2E testing with wdi5, and recording real backend traffic for offline replay.

Why this tutorial matters

The mockserver lets you develop and test Fiori apps locally and offline with metadata-accurate data, predictable scenarios, and action implementations without waiting on backend availability. The tutorial distills best practices into small exercises you can run immediately.

What you’ll learn (exercise overview)

Exercise	Focus	Key Takeaways
1. Basic Setup – Generated Data	Zero-config mock data from metadata	Start fast; remove backend proxy for true offline; draft simulation
2. Custom JSON Data	Predictable datasets	Stable testing scenarios; relationships; consistent IDs and referential keys
3. JavaScript Logic	Dynamic data + actions	Implement getInitialDataSet and executeAction; validations; latency simulation
4. Multiple Services	Bookshop + Reviews	Microservices-style config with distinct metadata and datasets
5. Cross-Service Communication	Service-to-service flows	Trigger operations across services (e.g., promotion creates review)
6. Context-Based Isolation	Tenant-specific data	Use ?sap-client= to switch tenants; optional tenant-aware logic
7. Error Handling	Business and system errors	Return 400/404/422/500/501 with helpful messages for UI testing
8. Offline E2E Testing	wdi5 + mockserver	Reliable CI-ready tests without backend dependency
9. Record Live OData	ui5-middleware-odata-recorder	Capture real backend traffic → generate mock datasets for offline replay

How to get started

The tutorial is available in the README and is designed to run locally in small, focused apps per exercise. You’ll find commands, file locations, and ready-to-run configurations.

Tutorial (GitHub README): ui5-fe-mockserver-tutorial
Open UX OData repository: github.com/SAP/open-ux-odata | Docs: API & guides
Mockserver API references: getInitialDataSet | base API
OData traffic recorder: ui5-middleware-odata-recorder | documentation
Generate a Fiori Elements app (optional): Create App with Fiori Tools | EasyUI5 Generator

Session context

This tutorial was introduced in the Devtoberfest session UI5 Middleware FE Mockserver in Practice — Setup, Use Cases, Live Coding, featuring live coding around configuration, data providers, offline mode, tenant-specific datasets with fallbacks, cross-service scenarios, and wdi5 integration for robust E2E tests. You can rewatch the session now.

SAP BTP Developer's Guide: Extending Fiori Elements with the Flexible Programming Model

2025-10-15T10:31:07.489000+02:00

Are you leveraging the full potential of SAP Fiori Elements' Flexible Programming Model in your enterprise applications? While this powerful capability has been available for sometime now, many developers are still discovering how to effectively implement its extension points, building blocks, and controller extensions to solve real-world business requirements.

If you've been curious about extending your Fiori elements applications beyond standard floorplans but weren't sure where to start, the SAP BTP Developer's Guide offers a comprehensive learning path that covers this and much more.

What is the Flexible Programming Model ?

The Flexible Programming Model offers an extensive toolkit for extending Fiori elements applications beyond standard floorplans. It provides multiple ways to customize and enhance your applications while maintaining enterprise standards and framework compliance.

The Flexible Programming Model encompasses four main areas:

Extension Points: including custom sections, actions, columns, header facets, dialogs, form elements, filters, pages, views, and KPI tags.
Building Blocks: reusable fields such as forms, tables, charts, filter bars, and specialized controls that maintain framework compliance. These are consistently orchestrated by the framework, ensuring you automatically benefit from SAP Fiori compliance and standard application behavior like draft handling and side effects.
Controller Extensions: for customizing edit flows, state handling, routing, navigation, and message handling - allowing you to override specific methods to enable more flexibility while preserving framework functionality.
SAP Fiori Elements Advanced Features: including sophisticated capabilities like Side Effects for dynamic UI behavior, UI.Hidden annotations for conditional visibility, UI.PartOfPreview annotations for optimized data loading, and enhanced Value Help configurations for improved user experience.

When using the Flexible Programming Model to extend your Fiori elements applications, you automatically preserve all the enterprise-ready features that SAP Fiori Elements provides out of the box:

Accessibility
Internationalization
Mobile Compatibility
Performance Optimizations
Integration
Security
Lifecycle Stability
Test Automation Support
UX Consistency
and much more ...

The key advantage is that the Flexible Programming Model allows you to add custom functionality while maintaining all these enterprise features that would otherwise require significant manual implementation and ongoing maintenance in freestyle development.

Complementary Development Approaches

The SAP BTP Developer's Guide provides clear recommendations for building Fiori applications that balance rapid development with flexibility needs. Rather than viewing these as competing alternatives, the guide positions them as complementary approaches that work together to deliver consistent, enterprise-grade solutions.

Use SAP Fiori elements for OData V4 to benefit from a presentation of a common UI and UX. This approach provides the foundation for rapid development while ensuring consistency across your application portfolio. Personalization and theming are automatically supported, giving users the flexibility they need without additional development effort.

For more flexibility, use SAP Fiori element's Flexible Programming Model with or without SAPUI5 Freestyle. This approach allows you to extend beyond standard capabilities while maintaining the benefits of the Fiori elements framework. The Flexible Programming Model serves as the bridge between standard floorplans and complete customization.

SAP Fiori elements and SAPUI5 help you present one consistent solution experience to your customers, and you benefit from the upcoming designs and UX improvements automatically. This means your applications evolve with the platform without requiring manual updates to maintain modern standards.

Important consideration: Remember that even the simplest UI components or more complex ones like geographic maps have compliance requirements like accessibility and theming. When extending beyond standard Fiori elements capabilities, these requirements must be carefully maintained to ensure enterprise-grade applications.

Enterprise-Grade Development on SAP BTP

The SAP BTP Developer's Guide serves as the comprehensive starting point for developing business applications on SAP Business Technology Platform. It provides essential recommendations and best practices that help developers navigate the complexities of enterprise application development.

Within this guide, the mission Develop an Enterprise-Grade CAP Application Following the SAP BTP Developer's Guide offers hands-on experience with critical enterprise development topics, including Change Tracking, Audit Logging, Attachments, Freestyle SAPUI5, Flexible Programming model and more.

While the mission covers multiple enterprise development aspects, the Flexible Programming Model section provides particularly valuable insights for developers looking to extend Fiori elements applications.

The learning scenarios are built around the Incident Management application, a practical business application where organizations can maintain and track incidents on behalf of their customers. This application already features a complete UI based on the SAP Fiori elements List Report Page floorplan, providing the perfect foundation to demonstrate how the Flexible Programming Model can enhance existing standard implementations.

The mission showcases several key extension capabilities that go beyond standard Fiori elements floorplans:

Extension Points: Custom Column

Learn to extend the Incidents table in the List Report Page with a custom column. This custom column demonstrates the integration of the MicroProcessFlow control, allowing processors to track incident progress directly within the table view.

Extension Points: Custom Header Facet

Discover how to enhance the header section in the Object Page by adding a custom header facet. This implementation showcases the MicroProcessFlow control in the header area, providing processors with immediate visibility into incident progress.

Extension Points: Custom Action

Implement a custom Location action in the Object Page that demonstrates practical integration of the GeoMap control. This custom action opens a dialog displaying customer locations, showing how to integrate specialized controls for business-specific functionality.

Extension Points: Custom Section

Add a comprehensive Process Flow custom section to the Object Page. This section demonstrates the implementation of the ProcessFlow control, providing detailed visualization of incident workflows and status transitions.

Controller Extension

Learn to extend the Fiori Elements Object Page controller to customize standard behaviors. This section demonstrates how to override the edit flow while maintaining framework compliance and enterprise standards.

Conclusion

The mission Develop an Enterprise-Grade CAP Application Following the SAP BTP Developer's Guide provides a comprehensive learning experience that goes beyond traditional tutorials. By combining Flexible Programming Model techniques with other essential enterprise development skills, you'll be equipped to build applications that meet real-world business requirements while maintaining the highest standards of enterprise software development.

Whether you're looking to extend existing Fiori elements applications or planning new enterprise solutions, this mission offers the practical, hands-on experience you need to master the art of enterprise application development on SAP BTP.

Happy Learning !

Get familiar with SAP Fiori development portal and the power of the building blocks (2 of 6)

2025-10-17T11:26:13.713000+02:00

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 view
Variant management for saving and sharing different table configurations
Export and import functionality for seamless data exchange
Multiple visualization options to present data in the most effective way
Extension points that allow developers to add custom functionality without breaking the core features
Responsive behavior that adapts to different screen sizes and devices
Accessibility 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 explanation
Live samples - See the building block in action with real data in both display and edit modes
Implementation guidance - Clear instructions showing the annotations, manifest settings, or code needed
Multiple annotation formats - Examples in CAP CDS, RAP CDS, and XML annotations for maximum compatibility
Live code editing - The integrated code editor lets you experiment and see changes instantly
Further 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.

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)

SAP TechEd Berlin 2025: Analyze and optimize front-end application performance

2025-10-17T17:26:12.174000+02:00

A couple of words about me:

My name is Joaquin Recio Huertas and I’m a Front-End Performance Expert at SAP in Germany. I have been at SAP for the past 18 years, working on several topics and positions like consultant, developer and architect but always with a strong technology focus. And this year I would be at TechEd in Berlin .

Join My Session!

CA262 | Analyze and optimize front-end application performance

🗓 Wednesday, Nov 5 ⏲ 3:30 PM - 5:30 PM CET

What you will learn about:

You will learn how to apply your optimization skills toward application performance. Also you will learn how to analyze for performance bottlenecks in the front-end of your application and how to identify performance problems. Find out what tools and best practices can help improve your applications based on SAPUI5 or the SAP Fiori design system.

Co-speakers (optional):

Simon Stemmle - Senior Developer, Performance & Scalability, SAP SE

Heiko Lenk - Product Manager for SAP Business Suite, Customer & User Experience, SAP SE

Sebastian Steinhauer - VP UX Foundation, SAP Labs, LLC. (Palo Alto)

Other related sessions I recommend:

CA260 | Learn how to build your own app and use it in SAP Mobile Start

Hands-on Workshop

🗓 Tuesday, Nov 4 ⏲ 12:30 PM - 2:30 PM CET

CA263 | Flexibility at scale with freestyle SAPUI5 and SAP Fiori elements

Hands-on Workshop

🗓 Wednesday, Nov 5 ⏲ 1:00 PM - 3:00 PM CET

AD260 | UI extensibility on top of cloud and ABAP: What's in it for you

Hands-on Workshop

🗓 Tuesday, Nov 4 ⏲ 10:00 AM - 12:00 PM CET

AD106 | The art and science of SAPUI5 in SAP Build

Deep Dive

🗓Wednesday, Nov 5 ⏲ 10:15 AM - 11:00 AM CET

AD166 | Taking UI to the next level: Develop SAPUI5 with SAP Build

Hands-on Workshop

🗓Thursday, Nov 6 ⏲ 9:00 AM - 11:00 AM CET

Related community topic pages:

SAPUI5

Looking forward to seeing you:

Don't miss the chance to get learn about front-end performance and how to optimize your application to the limit! Register now and be part of this interactive workshop.

Now let’s hear from you:

What would you like to learn about Front-End Performance?
What is the maximum number of sequential requests? Why?
Do you know how to use UI5 Build and how to tweak the parameters to get the optimal result?

Feel free to answer these questions by adding a comment in the comments section. Looking forward to hearing from you!

Local annotations example for SAPUI5 smart control

2025-10-21T05:14:03.293000+02:00

Hi All,

while developing the custom free-style UI5 app with OData v2, I’m using SAP smart controls to save some development time, and I have some examples to share.

PresentationVariant Annotation

Defines the visualizations and sort order for the UI presentation.
Visualizations are defined using UI.LineItem annotation.
Sort order is based on the given field property in descending order.
Note: under my experience, if you use ResponsiveTable type, then the sorter can not be applied by annotation.

<Annotations Target="your_srv.entity_type">
  <Annotation Term="com.sap.vocabularies.UI.v1.PresentationVariant">
    <Record>
      <PropertyValue Property="Visualizations">
        <Collection>
          <AnnotationPath>@UI.LineItem</AnnotationPath>
        </Collection>
      </PropertyValue>
      <PropertyValue Property="SortOrder">
        <Collection>
          <Record Type="Common.SortOrderType">
            <PropertyValue Property="Property" PropertyPath="field1" />
            <PropertyValue Property="Descending" Bool="true"/>
          </Record>
        </Collection>
        <Collection>
          <Record Type="Common.SortOrderType">
            <PropertyValue Property="Property" PropertyPath="field2" />
            <PropertyValue Property="Descending" Bool="true"/>
          </Record>
        </Collection>
      </PropertyValue>
    </Record>
  </Annotation>
</Annotations>

FilterRestrictions Annotation:

Specifies the filter restrictions for the entity type.
Requires filters to be applied and lists properties with filter expression restrictions.
In this example, both field1 and field2 are set as mandatory filters, and only a single value is allowed.

<Annotations Target="your_srv.your_srv_Entities/EntitySet">
  <Annotation Term="Org.OData.Capabilities.V1.FilterRestrictions">
    <Record Type="Capabilities.FilterRestrictionsType">
      <PropertyValue Property="RequiresFilter" Bool="true"/>
      <PropertyValue Property="RequiredProperties">
        <Collection>
          <PropertyPath>field1</PropertyPath>
          <PropertyPath>field2</PropertyPath>
        </Collection>
      </PropertyValue>
      <PropertyValue Property="FilterExpressionRestrictions">
        <Collection>
          <Record Type="Capabilities.FilterExpressionRestrictionType">
            <PropertyValue Property="Property" PropertyPath="field1"/>
            <PropertyValue Property="AllowedExpressions" String="SingleValue"/>
          </Record>
          <Record Type="Capabilities.FilterExpressionRestrictionType">
            <PropertyValue Property="Property" PropertyPath="field2"/>
            <PropertyValue Property="AllowedExpressions" String="SingleValue"/>
          </Record>
        </Collection>
      </PropertyValue>
    </Record>
  </Annotation>
</Annotations>

RequiresFilter to set mandatory

Single Value only in value help

Common.FieldControl:

Hides certain fields or properties based on field control type.
Used to hide fields like field1.

<Annotations Target="your_srv.EntityType/field1">
  <Annotation Term="com.sap.vocabularies.Common.v1.FieldControl" EnumMember="com.sap.vocabularies.Common.v1.FieldControlType/Hidden"/>
</Annotations>

You can also use this annotation to field binded Value List.

Common.Text and UI.TextArrangement Annotations:

Specifies the text arrangement.
Defines whether text should be displayed first, last, or only.
Example see below value list annotation.

<Annotations Target="your_srv.EntityType/field1">
  <Annotation Term="Common.Text" Path="field1_name">
    <Annotation Term="UI.TextArrangement" EnumMember="UI.TextArrangementType/TextFirst"/></Annotation>
  <Annotation Term="Common.ValueList">
    <Record>
      <PropertyValue Property="Label" String="{i18n&gt;Field1}"/>
      <PropertyValue Property="CollectionPath" String="ZEXAMPLE_VH"/>
      <PropertyValue Bool="true" Property="SearchSupported"/>
      <PropertyValue Property="Parameters">
        <Collection>
          <Record Type="Common.ValueListParameterOut">
            <PropertyValue Property="LocalDataProperty" PropertyPath="field1"/>
            <PropertyValue Property="ValueListProperty" String="ValueList_field1"/>
          </Record>
          <Record Type="Common.ValueListParameterDisplayOnly">
            <PropertyValue Property="ValueListProperty" String="ValueList_field1_name" />
          </Record>
        </Collection>
      </PropertyValue>
    </Record>
  </Annotation>
</Annotations>

UI.HiddenFilter Annotation:

Hides certain filters in the mentioned entity in Target attribute.
this can be implemented in both your data entity (hide in smartFilters) or value help entity(hide in value help dialog).

<Annotations Target="your_srv.EntityType/field1">
  <Annotation Term="UI.HiddenFilter" Bool="true"/>
</Annotations>

You can also find some local annotation examples in this blog by Chandra: https://community.sap.com/t5/technology-blog-posts-by-members/some-of-ui-annotations-local-annotations-for-lrop-fiori-application/ba-p/13526816

I hope my examples are clear and can save some of your development time.

Thanks,

Daniel

SAP UI5 application to Export Data to spreadsheet from SAP UI5 tree table (sap.ui.table.TreeTable)

2025-10-23T06:28:28.730000+02:00

Introduction :
In this article, we are going to understand how to implement export functionality the sap.ui.table.TreeTable table data to the excel(Spreadsheet) using sap.ui.export.Spreadsheet library. In this application, we are going to create an SAP UI5 free style application which has sample JSON data that has employees and their family details for the expense share percentage of the medical insurance (taken as an example) and that has been binded to the UI table and a toggle button has been added to trigger the export or downloading the excel data.

Procedure:
This is step by step guide to create a fiori application with SAP UI5 UI table and Export Button
Step 1: Create a Fiori Project

To begin, create a new SAP Fiori project using the Fiori Generator Freestyle - Basic template. This will serve as the foundation for our application.

Application Folder Structure:

Step 2 : Create a Dynamic Page , add UI Table Details and Add the sample JSON Data in controller

In TreeTableView.view.xml, Add this code and add the Sample JSON data model object in the onInit() in TreeTableView.Controller.js .

TreeTableView.view.xml

<mvc:View
    controllerName="com.example.treeexporttoexcel.controller.TreeTableView"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:table="sap.ui.table"
>
    <Page
        id="page"
        title="{i18n>title}"
    >
        <content>
            <table:TreeTable
                id="employeeTreeTable"
                selectionMode="None"
                enableColumnReordering="false"
                rows="{ 
       path : '/Employees',
       parameters :{
       arrayNames:['Employees','FamilyMembers']
       }
        }"
            >
               <table:extension>
                 <OverflowToolbar>
                        <Title text="{i18n>title}" />
                        <ToolbarSpacer />
                        <ToggleButton id="export_btn" text="{i18n>export_btn}" icon="sap-icon://excel-attachment" press="onExcelExport"/>
                    </OverflowToolbar>
               </table:extension>     
                <table:columns>
                    <table:Column>
                        <table:label>
                            <Text text="{i18n>employeeID}" />
                        </table:label>
                        <table:template>
                            <Text text="{EmployeeID}" />
                        </table:template>
                    </table:Column>
                    <table:Column>
                        <table:label>
                            <Text text="{i18n>employeeName}" />
                        </table:label>
                        <table:template>
                            <Text text="{EmployeeName}" />
                        </table:template>
                    </table:Column>
                    <table:Column>
                        <table:label>
                            <Text text="{i18n>designation}" />
                        </table:label>
                        <table:template>
                            <Text text="{Designation} " />
                        </table:template>
                    </table:Column>
                    <table:Column>
                        <table:label>
                            <Text text="{i18n>familyMemberName}" />
                        </table:label>
                        <table:template>
                            <Text text="{MemberName}" />
                        </table:template>
                    </table:Column>
                    <table:Column>
                        <table:label>
                            <Text text="{i18n>relation}" />
                        </table:label>
                        <table:template>
                            <Text text="{Relationship}" />
                        </table:template>
                    </table:Column>
                    <table:Column>
                        <table:label>
                            <Text text="{i18n>age}" />
                        </table:label>
                        <table:template>
                            <Text text="{Age}" />
                        </table:template>
                    </table:Column>
                    <table:Column>
                        <table:label>
                            <Text text="{i18n>expense}" />
                        </table:label>
                        <table:template>
                            <Text text="{ExpenseShare}" />
                        </table:template>
                    </table:Column>
                </table:columns>
            </table:TreeTable>
        </content>
    </Page>
</mvc:View>

TreeTable.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast",
    "sap/ui/export/Spreadsheet"
], (Controller, JSONModel, MessageToast, Spreadsheet) => {
    "use strict";

    return Controller.extend("com.example.treeexporttoexcel.controller.TreeTableView", {
        onInit() {
            var oView = this.getOwnerComponent();
            var oDataModel = new JSONModel();
            var aData = {
                "Employees": [
                    {
                        "EmployeeID": "E001",
                        "EmployeeName": "Ramesh",
                        "Designation": "Manager",
                        "FamilyMembers": [
                            {
                                "MemberName": "Anitha",
                                "Age": 35,
                                "Relationship": "Wife",
                                "ExpenseShare": 40
                            },
                            {
                                "MemberName": "Rohith",
                                "Age": 10,
                                "Relationship": "Son",
                                "ExpenseShare": 20
                            },
                            {
                                "MemberName": "Ramanaiah",
                                "Age": 65,
                                "Relationship": "Father",
                                "ExpenseShare": 20
                            },
                            {
                                "MemberName": "Kamala",
                                "Age": 60,
                                "Relationship": "Mother",
                                "ExpenseShare": 20
                            }
                        ]
                    },
                    {
                        "EmployeeID": "E002",
                        "EmployeeName": "Sumana",
                        "Designation": "Developer",
                        "FamilyMembers": [
                            {
                                "MemberName": "Bhargav",
                                "Age": 35,
                                "Relationship": "Husband",
                                "ExpenseShare": 20
                            },
                            {
                                "MemberName": "Prasanna",
                                "Age": 9,
                                "Relationship": "Daughter",
                                "ExpenseShare": 20
                            },
                            {
                                "MemberName": "Ananda",
                                "Age": 58,
                                "Relationship": "Father",
                                "ExpenseShare": 40
                            },
                            {
                                "MemberName": "Srinidhi",
                                "Age": 55,
                                "Relationship": "Mother",
                                "ExpenseShare": 20
                            }
                        ]
                    },
                    {
                        "EmployeeID": "E003",
                        "EmployeeName": "Manish",
                        "Designation": "Auditor",
                        "FamilyMembers": [
                            {
                                "MemberName": "Bhumesh",
                                "Age": 58,
                                "Relationship": "Father",
                                "ExpenseShare": 60
                            },
                            {
                                "MemberName": "Rajeswari",
                                "Age": 50,
                                "Relationship": "Mother",
                                "ExpenseShare": 40
                            }
                        ]
                    }

                ]
            }

            oDataModel.setData(aData);
            oView.setModel(oDataModel);
        },
}); 
});

Step 3 : Implement the press event trigger of the Export To excel Button
Add this logic in controller.js . "sap/ui/export/Spreadsheet" is the library should be used for excel export.
_convertTreeForExport() is a recursive function to fetch the child records converts to flat structure and pushes to the export data where this export data is passed to the settings of the excel sheet data.
TableView.controller.js

 onExcelExport() {
            var oBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
            var oTable = this.byId("employeeTreeTable");
            var oBinding = oTable.getBinding("rows");
            var aData = oBinding.getModel().getProperty("/Employees");
            var aExportData = this._convertTreeForExport(aData);
            var aCols = [
                {
                    label : oBundle.getText("employeeID"),
                    property :"EmployeeID"
                },
                {
                     label : oBundle.getText("employeeName"),
                    property :"EmployeeName"

                },
                {
                      label : oBundle.getText("designation"),
                    property :"Designation"
                },
                {
                       label :oBundle.getText("familyMemberName"),
                    property :"MemberName"

                },
                {

                       label : oBundle.getText("relation"),
                    property :"Relationship"
                },
                  {

                       label : oBundle.getText("age"),
                    property :"Age"
                }, {

                       label :  oBundle.getText("expense"),
                    property :"ExpenseShare"
                }
            ]
            var oSettings = {
                workbook: {
                    columns: aCols,
                    context: {
                        sheetName: oBundle.getText("sheetName")
                    }
                },
                dataSource: aExportData,
                fileName: oBundle.getText("fileName"),
                worker: false
            };
            var oSpreadsheet = new Spreadsheet(oSettings);
            oSpreadsheet.build().then(function () {
                MessageToast.show(oBundle.getText("successMessage"));
            }).finally(function () {
                oSpreadsheet.destroy();
            })
        },
          
        _convertTreeForExport(aNodes, iLevel =0, aResult =[]){
// aNodes will have the tree table  data 
// iLevel -> current hierarchy depth initializes with 0
// aResult -> collector array of the flattened data 
            aNodes.forEach(oNode => {
                // taking shallow copy of each node to perform manipulations on the copy node without  // disturbing the actual data node
                   var oCopy = { ...oNode };
// deleting FamilyMembers nested structure to avoid recursion loops if not deleted it will throw  // the maximum call stack exceeded error
                delete oCopy.FamilyMembers;
                oCopy.level = iLevel + 1;
// creates a new field for visualize indentation  parent, child, grandchild etc., 
                oCopy.IndentedName = `${"".repeat(iLevel*4)}${oNode.name}`
                aResult.push(oCopy);
                if(oNode.FamilyMembers && oNode.FamilyMembers.length > 0){
                    this._convertTreeForExport(oNode.FamilyMembers, iLevel + 1, aResult);
                }
            });
               return aResult
        }

Application Screen:

ExportData.xlsx

Git Link for reference
https://github.com/RangarajasreeSV/tree-table-export-to-excel-ui5

Conclusion:
By following these steps, We can achieve the export functionality of the The SAP UI tree table data to the Excel spreadsheet.

Thanks and Regards,
Sree Vedavyasa Rangarajasree

Exciting UX talks at TechEd – Virtual, or meet us in Berlin and On The Road (USA, India, Australia)

2025-10-23T20:25:57.813000+02:00

For TechEd 2025 we have an exciting agenda lined up for all of you interested in SAP user experience. We not only have many interesting talks and hands-on sessions for creators (designer and developers) but also some talks showing our strategy and latest innovations for end users – which hopefully will inspire you when creating your own applications!

With TechEd Virtual, you can watch some of these talks from wherever you are around the world. Here’s an overview of the talks which are primarily relevant for user experience, starting with TechEd Virtual, and then moving on to the individual locations.

For TechEd Virtual, Berlin and Bangalore: the main sub-tracks to look out for are:

Product and User Experience,
in the Cloud Application (CA) track.

AI-driven user experiences with SAP Build,
in the Application Development and Automation (AD) track.

TechEd Virtual

ST112v | AI and the future of product and user experience on the web and mobile (Strategy Talk – 25 Min.)
CA201v | Creating AI-enhanced UX for your own applications with SAP Design System (Deep Dive – 45 Min.)
ST116v | SAP Build for all: A shift toward AI-assisted developer-centric tools (Strategy Talk – 25 Min.)
AD106v | The art and science of SAPUI5 in SAP Build (Deep Dive – 45 Min.)
AD820v | Future of app dev in SAP Build: Simplifying clean core and LoB extensions (Road Map – 25 Min.)

TechEd Berlin (and Bangalore)

All the sessions below are taking place in TechEd Berlin, and also TechEd On Tour Bangalore except the strategy sessions (which is available on-demand via TechEd Virtual), and the demo stations, since Bangalore has a different approach to providing demos.

Cloud Applications - Product and User Experience

ST112 | AI and the future of product and user experience on the web and mobile - Strategy Talk
CA811 | User and product experience innovations by SAP—on the web and mobile - Road Map
CA201 | Creating AI-enhanced UX for your own applications with SAP Design System - Deep Dive
CA261 | Create great UX with AI, SAP Design System, SAP Fiori elements, and SAPUI5 – Hands-On
CA105 | Intelligent app development at scale with AI and SAP Fiori elements – Deep Dive
CA262 | Analyze and optimize front-end application performance – Hands-on
CA200 | An overview of our AI-enhanced mobile products across SAP Business Suite - Deep Dive
AD170 | Build scalable enterprise mobile solutions with SAP Build - Hands-on

In addition to the above talks, you can come and visit us at our demo station:

CA914 | AI-based user and product experience innovations on the web and mobile – Demo station

Application Development and Automation

ST117 | SAP’s user experience strategy with SAP Build – Strategy
ST116 | SAP Build for all: A shift toward AI-assisted developer-centric tools – Strategy
AD818 | Explore the road map for user experience with SAP Build – Road Map
AD820 | Future of app dev in SAP Build: Simplifying clean core and LoB extensions
AD106 | The art and science of SAPUI5 in SAP Build – Deep Dive
AD166 | Taking UI to the next level: Develop SAPUI5 with SAP Build – Hands-on
AD200 | Unlocking the full potential of business users with SAP Build – Deep Dive
AD165 | Build it yourself: Your modern digital workplace – Hands-on
AD100 | SAP Joule for developers: How AI can boost your development in SAP Build – Deep Dive
AD160 | Get hands-on with Joule: Boost your SAP Build development with AI – Hands-on
AD201 | Explore ABAP Cloud in SAP Build: What's in it for ABAP developers – Deep Dive
AD163 | Fusion development with ABAP Cloud in SAP Build – Hands-on
AD203 | Fact-checking UI extensibility on cloud and ABAP: What's in it for you – Deep Dive
AD260 | UI extensibility on top of cloud and ABAP: What's in it for you – Hands-on

The corresponding demo station is:

AD901 | SAP Build: AI agents, automations, and digital workspaces – Demo station

For a comprensive overview of sessions relevant for SAPUI5 developers, including the abstracts, look at:

Join SAPUI5 Sessions at SAP TechEd 2025

Similarly, for an overview of all the sessions of interest for mobile development, including abstracts, see:

SAP TechEd 2025 - Go Mobile!!!

Joule and Agentic AI is of course also relevant for creating a great user experience, here are some recommended deep dives:

AI100 | Build custom AI solutions with the generative AI hub
AI103 | Integrating Joule with other tools such as WalkMe and Microsoft 365 Copilot
AI105 | Building custom AI agents and skills with Joule Studio

Usability Testing sessions on-site in Berlin

You can sign up to test one of these interesting topics in Berlin:

Exploring Joule and voice – understanding mobile AI in your daily work
Redesigning the dashboard building experience with SAP Analytics Cloud
Building AI agents with Joule Studio in SAP Build
Vibe coding with SAP Build
Accelerate your cloud implementation: Business configuration templates in SAP Central Business Configuration
Supercharge your SAP Fiori elements app development with SAP Fiori tools and AI

Find out more and register for testing!

TechEd On Tour USA

ASUG Tech Connect November 4 – 6 in Louisville, Kentucky has a number of interesting talks and hands-on sessions for you. These are my selection of sessions related to SAP Fiori:

Creating Better User Experiences with AI-Powered SAP Fiori Apps
Using Generative AI to Accelerate SAP Fiori App Development
Extensibility with ABAP Cloud and AI in SAP Cloud ERP
Explore ABAP Cloud in SAP Build: What's in it For ABAP Developers
Customer Show and Tell: From CDS View to Fiori Launchpad: Full-Stack Development with Eclipse ADT with Naturipe

Here are my selected Hands-on Lab sessions:

Get Started with ABAP Cloud for Classic ABAP Developers
Hands-on Lab: Explore Joule for Developers, ABAP AI Capabilities
Hands-on Lab: Build On-Stack Extensions with ABAP Cloud in SAP Cloud ERP

This blog post by Peter Spielvogel, who is a speaker there, gives an overview including abstracts:

UX and application development with AI at ASUG Tech Connect 2025 a companion event to SAP TechEd.

TechEd On Tour Australia

Mastering SAP, Sydney November 12 – 14 in Sydney has these UX talks for you, each 45 minutes. The first one is unique to Sydney, by Jocelyn Dart, the other four are the same as in Berlin and Bangalore:

AD300 | SAP User Experience is the foundation for AI and Clean Core
AD301 | AI for App Development at Scale with SAP Design System & SAP Fiori Elements
AD302 | AI-Assisted User Experience Innovations in SAP Cloud ERP
AD106 | The art and science of SAPUI5 in SAP Build
AD200 | Unlocking the Full Potential of Business Users with SAP Build

These AI-related talks also sound relevant for UX:

AD202 | Agent building 101: All that you can do with Joule Studio
DT105 | SAP Business AI in SAP Cloud ERP

I myself will be in Berlin and Bangalore, giving the strategy talk, the road map talk and a deep-dive talk about creating apps with the SAP Design System (ST112, CA811 and CA201 respectively).

Looking forward to meeting you!

Usage of standard Workflow Steps reuse library in your custom free-styled Fiori apps

2025-10-24T09:03:47.100000+02:00

Hi All,

During the development of a custom free-styled UI5 app, I received a request to integrate the workflow steps component from a standard app into the custom app.

The Component is used in different standard SAP apps, and it normally looks like this:

In the standard SAP Fiori apps, this component can show different workflow steps of a particular document, and if you press one line item, it will navigate to an object page where it shows a bit more details of this step.

The requirement I received is to show the component in my custom app's object page. Only columns Type, Name, Status, and Recipients in the list should be visible, and the line item navigation should be removed.

Here is what I achieved in my app:

View

Add below ComponentContainer into the correct page section.

<uxap:ObjectPageSection title="{i18n>prApprovalDetails}" titleUppercase="false">
  <uxap:subSections>
    <uxap:ObjectPageSubSection id="workflowPRSection" title="{i18n>prApprovalDetails}">
      <core:ComponentContainer id="workflowPRComponentContainer" propagateModel="true" height="100%"/>
    </uxap:ObjectPageSubSection>
  </uxap:subSections>
</uxap:ObjectPageSection>

Controller

Function to create approval details component, using re-use library stworkflowinstance.

This whole createComponent part was found in one of the standard Fiori app, which consumed the workflow steps library, and I edited it by the request I received to make it work.

_loadPoConWfContainer: function (workflowInstanceId, scenarioID, ID, parentControlId) {
  let _parentControl = this.byId(parentControlId);
  _parentControl.setBusy(true);
  let sWorkflowInstanceId = workflowInstanceId;
  let sScenarioID = scenarioID;
  if (!this.oPoWfComponent) {
    var _control = this.byId(ID);
    let oPoWfComponent = sap.ui
    .getCore()
    .createComponent({
      name: "sap.io.bpm.sworkfloweditor.lib.reuse.stworkflowinstance",
      async: true,
      title: "{{workflowComponentTitle}}",
      settings: {
        objectIdentifier: sWorkflowInstanceId,
        scenarioId: sScenarioID,
        objectContext: "empty string",
      },
    })
    .then(
      function (successValue) {
        let oWorkflowComponent = successValue;
        oWorkflowComponent.setScenarioId(scenarioID);
        oWorkflowComponent.setObjectIdentifier(sWorkflowInstanceId);
        oWorkflowComponent.setIsDraft(false);
        oWorkflowComponent.initWorkflow().then(
          function () {
            _control.setComponent(oWorkflowComponent);
            _parentControl.setBusy(false);
          }
        );
        this.oWorkflowComponent = oWorkflowComponent;
        try {
          var embeddedComponent = this.oWorkflowComponent.getRootControl().getContent()[0].getContent()[1];
          embeddedComponent.attachComponentCreated(function (oEvent) {
            var steps = oEvent.getParameter("component").getRootControl().getContent()[0].getItems();
            for (var i = 0; i < steps.length; i++) {
              steps[i].setType("Inactive");
            }
            let columns = oEvent.getParameter("component").getRootControl().getContent()[0].getColumns();
            columns.forEach((column) => {
              if (column.sId.indexOf("columnProcessors") > -1) {
                column.mBindingInfos = {};
              }
            });
            for (var j = 0; j < columns.length; j++) {
              if (
                columns[j].sId.indexOf("columnDeadline") > -1 ||
                columns[j].sId.indexOf("columnProcessors") > -1 ||
                columns[j].sId.indexOf("columnFirstProperty") > -1
              ) {
                columns[j].setVisible(false);
              }
            }
          });
        } catch (e) {
          _parentControl.setBusy(false);
        }
      }.bind(this)
    );
  }
},

You can find the parameters used in the function:

workflowInstanceId: Workflow instance ID , which is the document number like PO or PR number
scenarioID: Workflow scenario ID
ID: ComponentContainer ID
parentControlId: ObjectPageSection ID

After the embeddedComponent created, I try to fetch the workflow step list to hide columns and set the line item as inactive to avoid the line item navigation.

By the above code, you can implement the Workflow Steps component in your custom free-styled Fiori app.

Thanks,

Daniel

Explore the potential of SAP Fiori development portal using complex building blocks (3 of 6)

2025-10-31T07:43:01.269000+01:00

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 table
Deletable entities provide deletion capabilities with proper confirmation dialogs
Updatable entities allow inline editing, with optional mass edit features for bulk changes
Annotated 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 sizes
Grid Table - High-performance display for large datasets
Analytical Table - Built-in aggregation and grouping capabilities
Tree 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 management
Data Export - Export to Excel and PDF for offline analysis
Clipboard Integration - Copy and paste operations for efficient data entry
Personalization - Column reordering, resizing, and hiding based on user preferences
Variant Management - Save and share different table configurations across users
Filtering & Sorting - Built-in capabilities for data exploration and organization
Mass 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 data
Integrate custom actions for business-specific operations
Use 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 development
RAP 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 results
Test different configuration combinations
Understand the relationship between metadata and UI behavior
Experiment 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)

SAP User Experience Update: What’s New for SAP S/4HANA 2025 (Private Cloud and On-Premise)

2025-10-31T13:35:46.042000+01:00

SAP S/4HANA 2025 comes with a whole host of user experience innovations and improvements. Web access via My Home and the SAP Fiori launchpad has many useful improvements, as does SAP Mobile Start for mobile access. Joule gives conversational access to Private Cloud Edition using natural language, now also with analytical insights. There are additional collaboration capabilities, and many improvements in details: some towards providing a more consistent and integrated SAP Business Suite, some simply making a user’s life easier. Finally, design and UI technology is also advancing, with powerful AI support for developers now available.

This post covers:

UX Updates for Consistent and Integrated Business Suite
Web access: My Home and SAP Fiori launchpad
Mobile access: SAP Mobile Start
Joule
Situation Handling news
AI-Assisted capabilities: outlook
New collaboration capabilities
UX improvements in details
UI adaptation improvements for key users
Design and Technology news

If you want to get an impression of how good SAP S/4HANA Cloud Private Edition, looks across all the main product areas, have a look at the online Product Tour.

Since this post covers what’s new, building on the previous 2023 release, you might want to have a look at the UX innovations which came with the Feature Pack Stacks 00, 01 and 02 of the 2023 release:

For a full overview of what’s new since the FPS00 shipment of the 2023 release, have a look at the documentation (note that it includes features from the above 2023 FPS01 and FPS02 blog posts, as well as this one):

What’s New for SAP Fiori launchpad for SAP S/4HANA and SAP S/4HANA Cloud Private Edition.

UX Updates for Consistent and Integrated Business Suite

We aim to provide a consistent and integrated experience for all users of the SAP Business Suite, which means providing an entry point for users to access all the various SAP products within the suite, and ensuring that the user experience across these products is consistent, making it easy for users to use applications from different products.

Entry Points

Figure 1 shows our approach for providing a web and a native mobile entry point to the products of the suite, such as SAP S/4HANA Cloud. I’d like to highlight that Joule can also be seen as an entry point to access the entire suite, since our goal is to provide Joule wherever you are, be it in our web applications or native mobile apps. Using Joule, our goal is to allow users to query and perform actions on all the products and applications which they are authorized to use, simply using natural language. As you’ll see below, we are making good progress towards this goal.

Figure 1: Entry points providing an integrated workplace for accessing the SAP Business Suite. Alt Text: Image showing Joule on the left, “available web and mobile”, and on the right a diagram with boxes indicating that SAP Mobile Start, SAP Start, and SAP Build Work Zone provide central access to SAP, with three boxes below for SAP S/4HANA Cloud, SAP SuccessFactors and Other SAP Products.

Web Central Access

I have covered recent UX innovations in our web central entry points, such as SAP Start and SAP Build Work Zone, and central services such as SAP Task Center, in my recent cloud UX blog posts. Since these capabilities also apply to SAP S/4HANA Cloud Private Edition as well as SAP S/4HANA (except for SAP Start), I will not repeat them here, but rather refer you to them:

What we will look at in this post in detail are UX innovations for local access from web or mobile, via My Home and the SAP Fiori launchpad, and via SAP Mobile Start. Each has a dedicated section further below.

Design Updates for Suite Consistency

To achieve consistency across the suite, we have made design improvements which are relevant for a consistent user experience across the entire SAP Business Suite, and which are now available with SAP S/4HANA Cloud Private Edition 2025 and SAP S/4HANA 2025. As I mentioned in my April blog post Upcoming Design Updates for the SAP Business Suite (SAP Fiori for Web), consistency of the user experience across the various applications used by a user is an important part of overall usability, helping users to feel confident and at ease when using a suite of products – no unexpected surprises.

In this section, we’ll look at four design updates provided by the SAP Fiori launchpad, as well as examples of the new design for illustrations:

Navigation menu: Side navigation
Updated shell bar
Updated user menu
Updated notifications
New illustrations design

Navigation Menu: Side Navigation

Many SAP products already offer a navigation menu on the left of the screen, a pattern already familiar to many people. Hence, we have decided to apply that approach to navigation across the SAP Business Suite in upcoming releases.

In SAP S/4HANA Cloud Private Edition and SAP S/4HANA, the side navigation is displayed as an overlay, as you can see in Figure 2. It gives you direct access to your favorite apps, either directly or via the folders you have created. It also gives you direct access to your Spaces and Pages. The previously available menu to access all your spaces and pages along with personalization options is available via the entry “All Spaces” at the bottom of the menu.

A big benefit of this new navigation menu is that you can now access your favorite apps directly from any application. Previously, you would have to return to My Home and then click on your favorite app, now you can access it directly from the menu, as shown in Figure 2.

Figure 2: The new navigation menu, opened up from the new shell bar, showing direct access to Favourite Apps, My Spaces and All Spaces. Alt Text: an image showing a list of sales orders and on the left a pop-over with a navigation menu with the sections already mentioned. Below the “Favourite App” eight apps are listed as well as two folders for favorite apps, plus the folder “Insights” for the insight tiles.

New Shell Bar – need to switch it on!

The new shell bar design for the SAP Business Suite is available for SAP S/4HANA Cloud Public Edition. The immediately visible difference is that now the product name is displayed to the right of the SAP Logo, in this case “S/4HANA Cloud” as you can see at the top of Figure 2. The logo and the name are all contained within a clickable area, which brings the user to the start page (e.g. My Home).

The new shell bar enables the next two design updates to the user menu and to notifications.

By default, after upgrading, the old shell bar will be shown, with the new navigation menu. We advise that you check any test automation and RPA (Robotic Process Automation) you may have before switching on the new shell bar, since you may need to make some adjustments – in particular if you log off at the end of a test.

You can switch on the new shell bar via the Activate New Features application, with the feature “/UI2/SHELL_BAR_TOGGLE”.

Updated User Menu

The new user menu design shown in Figure 3 provides more space for the avatar of the user, and provides more space between items for easier selection. The settings are always at the top as the first entry, and the “Sign Out” option is separated from the actual navigation options in the list, to make it easier to find.

Figure 3: Updated design of user menu and notifications. Alt Text: On the left an image of the previous user menu and the updated user menu. On the right an image of the updated notifications list, showing four notifications in the group “Last Month”, each with a title, two lines of description and a line with the data and a “more” link.

Updated Notifications Design

The new simplified design of notifications shown on the right in Figure 3 fits better with the overall design of SAP S/4HANA Cloud Private Edition and SAP S/4HANA, and provides simpler interactions. By default notifications are sorted by date, with grouping by “Today”, “Yesterday”, “Last Week”, “Last Month”. Users can also choose to sort by importance.

New Illustrations Design

We have modernized the design of our illustrations, and also made them easier to understand. Figure 4 shows two examples – one for indicating that something went wrong (the fallen ice cream cone), one for search, with an example of where the search illustration is used when opening a list report application without any filter values defined.

Figure 4: Examples of new illustrations. Alt Text: On the left top three different size illustrations showing an ice cream cone fallen on the ground; bottom left an illustration of a globe with a magnifying glass, representing “search”. On the right an image of a list report showing the search illustration since no data has been selected.

Web Access: My Home and SAP Fiori Launchpad

The 2025 release brings a number of improvements in My Home, the start page in the SAP Fiori launchpad, as well as some improvements in the launchpad itself (beyond the design updates mentioned above) – for users as well as for administrators.

My Home

Here is an overview of the enhancements with this release:

To-Dos:
- Tasks: Enhanced workflow relevant information and in-place actions
- Situations from both standard and extended framework- are displayed
Intelligent homepage experience to boost productivity (cloud only):
- Intelligent app recommendations.
- Intelligent generation of pre-delivered cards.
Improved user experience:
- Drag & drop is now enabled in the insights section, so you can directly rearrange your tiles and cards.
- Information about deprecated apps: any such apps are marked with an “deprecated2 icon .
Manage News application.

This collection of videos shows the individual features of My Home – both new and already existing ones:

My Home - Deep Dive (video collection)

Figure 5: My Home in SAP S/4HANA Cloud Private Edition 2025 and SAP S/4HANA2025. Alt Text: A screenshot showing all the sections of My Home: To-Dos with tabs for Tasks (selected) and Situations;, a row with News on the left and Pages showing 8 pages on the right; Apps, with tabs for Favorites (selected – showing 2 folders and 7 apps), Most Used, Recently Used, Recommended; Insight Tiles, showing 8 tiles; Insights Cards, showing 4 cards, 1 with a list and 3 with charts.

To-Dos Enhancements

The To-Dos task cards now offer action buttons, for example to approve or reject items. Often, this requires some key information about the item, for example the name of the product and the value for a purchase requisition. These details are now visualized directly in the task cards, as you can see in Figure 5, making the workflow more efficient.

To-Dos now also shows custom Situations, created using the extended Situation Handling framework, in addition to the standard situations delivered by SAP.

Intelligent Homepage Experience

Another useful new feature is AI recommendations for applications: as you can see in Figure 5 in the Apps section of My Home, a new tab Recommended has been introduced which uses AI to create a list of applications which are recommended to the user to add to their Favorites.

To help users get started with My Home, we provide intelligent generation of pre-delivered cards, so that when they first log on, the Insights Cards section is not blank, but rather has a number of pre-delivered cards relevant to the user’s role.

Manage News Application

I’m glad to announce that administrators can now easily create their own news to be displayed on My Home, using the new Manage News application. Figure 6 shows the start page of the application, listing news articles.

You can specify title, subtitle and main text, a background image, the start and end dates for publishing, as well as categorizing and targeting the news for specific groups of users. Also, you can mark a news article as being “Critical”, so that it is highlighted accordingly. You can see an example in Figure 5.

Figure 6: Manage News application. Alt Text: Screenshot of the Manage News application, showing a filter bar and a list of two news articles with their title, subtitle, footer text, criticality, status “published” and publish start and end dates.

To get a better impression of how it works, watch this video:

Video: Manage News Application in My Home for SAP S/4HANA Cloud Public Edition (2:00 min.)

You can find out more about these My Home innovations here:

My Home documentation.

SAP Fiori Launchpad

The launchpad provides more than just the spaces and pages for finding and starting apps: it provides the runtime shell in which all the applications run, and hence the updates mentioned above such as the new navigation, the new shell bar and user menu. It also controls navigation between apps, as well as settings such as which theme to apply. Here are some additional improvements with the 2025 release.

Automatic high-contrast and dark-mode detection, also for custom themes

Users can define on their front-end device’s operating system whether applications should appear in a light mode or a dark mode, or a high-contrast mode. Now these settings are taken into account also for custom themes, in addition to SAP visual themes.

Technically this is done by the launchpad supporting theme sets, which is a group of themes of the same family with different flavors – such as the Horizon theme, with a light and dark version along with high contrast black and high contrast white versions. Customers can create their own theme sets using the UI theme designer. Have a look at the documentation:

Managing Your Settings (see the setting Appearance).

Hiding empty pages and spaces

The apps which a user sees on a page on the SAP Fiori launchpad, and the pages which appear in a space, depend on a user’s authorizations. This can lead to a page being defined in such a way that certain users are not authorized to use any of the apps therein; similarly, a space can end up not having any pages available to a user. Now, if this happens, any such empty pages or spaces are hidden from the user, rather than being shown empty. Find out more here:

SAP Fiori launchpad: Hiding empty spaces and pages.

Improved About Dialog for Application Information

We have simplified the about screen, organizing it into separate tabs for Application, System and Environment information, so that there is a clear separation between the different types of information – see it in action in Figure 7:

Figure 7: New About dialog. Alt Text: A short video showing the list view of the Manage Sales Orders – Version 2 app. The user opens the user settings menu in the shell header bar, selects “about”, and a popover appears with the same design as the user settings, showing three separate tabs listed vertically on the left for “Application”, “System” and “Environment”, with “Application” the default. Application shows title and ID of the app, along with framework version; System shows the product, system and tenant name; Environment shows the client device type and user agent details.

Update for Administrators of SAP Fiori Launchpad

Redesign of Apps for Managing Spaces and Pages

Up until now, the apps “Manage Launchpad Spaces” and “Manage Launchpad Pages” distinguished between entries which could be edited within a given tenant and entries which could only be used as templates when creating new spaces or pages. The editable ones were listed in the tab “Customer-Created”, the others in the tab “Predefined”.

Our customers gave us feedback that this was in fact confusing, because a page which was listed as “Customer-Created” in a non-productive tenant and which was transferred to a productive tenant became “Predefined” there, i.e. it was not listed under “Customer-Created” despite it being customer-created.

Now, the design has been changed, with two tabs for editable entities (spaces or pages) and non-editable ones. For example, in the app “Manage Launchpad Pages”, the tabs are called “Pages” and “Page Templates”, as shown in Figure 8. No matter what tenant you are in, you cannot change or edit page templates, you can only use them to create new pages. The same applies to spaces in the Manage Launchpad Spaces app.

Figure 8: The redesigned app Manage Launchpad Pages with Tabs for “Pages” and “Page Templates”. Alt Text: image shows an extract of the app showing the two tabs.

Role-dependent Launchpad Configuration Parameters

We provide administrators a new option to apply launchpad settings role-based, so that different roles can have different settings being applied. This can be helpful if a specific group of users need different settings, for example if you want to gradually introduce Spaces and Pages, you no longer have to switch it on for all users. Find out more, and further examples, in the documentation:

Setting Parameters per Profile

Mobile Access: SAP Mobile Start

The recent innovations I would like to highlight here are directly relevant for users accessing SAP S/4HANA directly:

Personalization
News – now with images and top news
Document AI
Joule for Mobile (covered in the section on Joule further below)

Personalizing SAP Mobile Start

For a good and satisfying user experience, being able to personalize the UI so that it fits with how you like to work is a key element. To this end, SAP Mobile Start has now introduced personalization of the start page, allowing you to rearrange the order of sections as well as hiding sections which you don’t need – take a look at it in Figure 9.

Figure 9: SAP Mobile Start personalization of the start screen. Alt Text: Four mobile phone images. On the left the start page, with the sections Insights and News visible. Next, an image of the edit screen, with five sections listed: Latest To-Dos, Favorites, Insights, App Suggestions (deselected), News. Next, an image of the five sections, all selected, now with Favorites first and Latest To-Dos second. On the right, the start page with the sections Favorites at the top (containing flat cards for apps), below that Latest To-Dos (containing larger cards for ToDos, one shocing a purchase requisition with Total Amount $799.99).

News with Images and Top News

News can now include images. Furthermore, we have also introduced Top News – news that is so important to users, that it is shown prominently on the Start Screen. You can see examples of top news with an image as well as regular news with images in Figure 10. For more information, check out the

SAP Mobile Start Administration Guide (documentation).

Figure 10: News with images, including Top News. Alt Text: Two mobile phone images shown, on the left the start page with Top News at the top, with an article and an image; below that sections for Favorites and Latest To-Dos. On the right a list of five news articles with text on the left and an image on the right.

Document AI Integrated into SAP Mobile Start

With the integration with SAP Document AI, users can scan or upload documents directly from SAP Mobile Start, which are then processed by the SAP Document AI service. So, if you for instance need to scan and upload a quality certificate, you can start the upload process right from SAP Mobile Start, and the SAP Document AI service takes care of all needed follow-up steps, like extracting the data and assigning it to the right business objects.

Figure 11: Screenshots of SAP Mobile Start with SAP Document AI. Alt Text: 3 mobile phone images: on the left the start screen, in the middle a screen Select Document Type, with choices Standard Delivery Note (selected) and Supplier or Procurement quality certificates, on the camera showing an document, with a Save button.

Find further information and a detailed step by step guide on how to setup SAP Document AI service within SAP Mobile Start here:

New in SAP Mobile Start V2.4: Integrate and Launch SAP Document AI on Mobile.

Further Innovations and Information on SAP Mobile Start

SAP Mobile Start has further innovations related to integrating with SAP Build Work Zone, such as supporting spaces and pages from its new site experience, supporting its declarative UI integration cards, or supporting integration with the advanced edition.

To find out more about all the recent innovations as well as what is planned in our road map, have a look at:

Joule User Experience Innovations

Joule is the AI-powered copilot for SAP’s cloud products, offering a powerful new user experience, using natural language to access them and providing a nice flow for the user wherever they are, on desktop, laptop or mobile devices.

First, we’ll have a look at the latest generic or cross-product UX innovations in the web and mobile, before I give you some pointers to the product-specific innovations as well as news about developing custom capabilities.

Cross-Product Joule UX Innovations

This section covers these user experience innovations:

Joule Analytical Pattern.
Joule supports multiple conversations.
Use Joule in 11 languages.
Joule in Microsoft 365 Copilot and Microsoft Teams
Customer specific skills and agents.

Joule Analytical Pattern

This new pattern is available in all products which give users access to our Joule copilot. This new pattern is powered by SAP Analytics Cloud, with data from models that are indexed by the Just Ask feature of SAP Analytics Cloud.

Figure 12: Example Joule Analytical Pattern. Alt Text: an animated GIF showing how a user asks Joule “Show me sales commission by agend for model bike sales”, and how Joule shows a horizontal bar chart for top 5 sales commissions per sales agent.

As you can see in figure 12, users can now access analytical insights from the product they are working in, without having to first navigate to SAP Analytics Cloud, making work more efficient and hence also more enjoyable.

The example in figure 12 is what we call a descriptive question, but Joule can respond to a wide range of queries:

Descriptive questions, such as “What is the total revenue for Q1?” or “Show me sales by region in 2025”.
Comparative analysis, such as “Compare sales between 2023 and 2024" Or How do profits in Germany compare to France?”
Time series analysis, such as “Show me sales by month” or “Show the trend of customer acquisitions over the last 6 months”.
Top / Bottom N analysis, such as “Show me top 5 sales by store” or “List the bottom 3 regions in terms of sales”.

Find out more in this blog post:

Introducing Analytical Insights in Joule: Empowering Smarter Decisions, Instantly.

With the introduction of this new pattern, Joule now supports four interaction patterns:

Informational pattern, for querying written documents, such as SAP documentation in the SAP Help Portal, or customer policies etc.
Navigational pattern, for finding and navigating to applications.
Transactional pattern, for interacting directly with business applications.
Analytical pattern, for answering analytical queries directly in Joule.

Joule Supports Multiple Conversations

When having a conversation with Joule, you can ask follow-up questions, building on the previous questions and answers in the conversation, since Joule keeps the context.

Now you can initiate up to ten conversations in parallel, with Joule keeping the context for each of the conversations, so that when you return to a previous conversation you can continue where you left off. Figure 13 shows what this looks like.

Figure 13: Joule supports multiple conversations. On the left, a conversation was started by asking “How many languages does Joule support”. On the right, you see how active and expired conversations are shown. Alt Text: On the left, Joule replies with “Joule currently supports eleven language officially” and then lists them, below the answer a link to the source document “Joule Multi Language Support” is provided. On the right, the conversation history sidebar is visible on the left, overlaying half the screen, with a button “+ New Conversation” at the top, followed by a section “Active” with two conversations and a section “Expired” with four. The bottom contains a link to “Settings” and on to “AI Notice”.

You can return to conversations within 8 hours. To start a new conversation, simply click on “New Conversation”. The old conversation will be listed in the “Active” section, as you can see in Figure 13. The title of the conversation is automatically created by Joule using AI; users can rename the titles when they return to the conversation. Joule supports a maximum of 10 active conversations.

After 8 hours, the conversation expires but is not deleted. It is kept read-only in the “Expired” section, as shown in Figure 13. Conversations are finally deleted 7 days after the creation date.

In the browser, Joule can be expanded to fill the screen, as shown in Figure 14.

Figure 14: Joule expanded to full-screen mode, showing the conversation history sidebar and the chat side by side. Alt Text: The same information is shown as on both screens of Figure 2, since the conversation history sidebar does not overlay the chat, and the chat is shown on the right with much more screen width.

Find out more in the documentation:

Using the Joule Web Client.

Use Joule in 11 Languages

Figure 14 shows that you can ask Joule which languages it supports, and it will answer with the list of 11 languages. Here they are in alphabetical order, with the variant of the language in brackets.

Chinese (Simplified)
English (US)
French (France)
German (Germany)
Greek
Japanese
Korean
Polish
Portugese (Brazil)
Spanish (Spain)
Vietnamese

Joule in Microsoft 365 Copilot and Microsoft Teams

How often have you been in a chat with a colleague and needed to find some information from an SAP system? Up until now this would involve you leaving the chat, going to a different window and navigating to the right SAP application to get what were looking for.

Now, you can chat directly with Joule in Microsoft Teams, use Joule in Microsoft Teams and Microsoft Teams Mobile as an app, and ask Joule questions directly in Microsoft 365 Copilot. To get an idea of how powerful this is, watch this video:

To get started, have a look at the documentation:

Integrating Joule with Microsoft 365 Copilot

Joule Available on Mobile

Joule is also now generally available for mobile, running natively with SAP Mobile Start. It is now also available integrated in the SAP apps SAP SuccessFactors and SAP Sales Cloud. Figure 1 shows examples of Joule running on a mobile phone.

Figure 15: Examples showing Joule integrated in SAP Mobile Start, showing from left to right: the start page, the informational pattern accessing SAP Help Portal, and the transactional pattern used to interact with SAP S/4HANA Cloud and then with SAP SuccessFactors. ALT Text: Four images are shown: the start page shows a “How can I help you” text, followed by some suggested prompts as buttons; the informational pattern shows the prompt “How can I customize a sales order”. Below that, the sixteen-line written answer is shown, followed by a “Search results” selector and three top search results. The navigational pattern shows the prompt “Show sales orders with delivery status not completed”, below that, the reply from Joule “Here’s what I’ve found” is followed by a card containing three lines and an “Open” button. A second transactional example with the prompt “Show profile of Maria Alvares”, followed by the result and a button for navigating to her profile.

On Apple devices you can now use Siri and Siri Shortcuts to seamlessly start a conversation with Joule - which even works better with Apple Intelligence. Simply say "Hey Siri, ask SAP. Show my sales orders with delivery status not completed" and Joule will provide you with the respective content within the app.

Note that as of today, not all your prompts and web apps are supported on the phone; however, we are continuously adding further Joule business skills and scenarios.

Find out more here:

Joule on Mobile & Start Screen Personalization: SAP Mobile Start V2.1 - Release Update

Product-specific capabilities

In addition to the above generic capabilities, we provide Joule skills for getting your work done more efficiently, for specific use cases. Find out more about these in the SAP Discovery Center and in the documentation:

SAP S/4HANA Cloud Private Edition, Joule (SAP Discovery Center).
Here you’ll also find links to many further resources.
Joule in SAP S/4HANA Cloud Private Edition (Documentation).

Customer-specific Joule skills and agents

You can now build your own Joule skills and beta-test agents using Joule Studio, which has now been made generally available. Read Michael Ameling’s overview blog post:

Joule Studio is generally available in SAP Build: Empower your business with intelligent automation

Joule Agents

We are bringing SAP Business AI to the next level via Joule Agents, that can autonomously plan and execute multi-step workflows.

Why do I include this in a section on user experience updates? Aren’t Joule Agents a back-end thing? Well… the reason is simple: Joule Agents significantly enhance the overall user experience, as opposed to the user interface, because the system will do a lot more for you based on your requests. This means that the overall experience you have using SAP goes up a level, since you can get a lot done much more easily than before.

Joule Agents can be triggered from Joule directly or embedded within applications.

For a general overview of Joule Agents, have a look here:

Joule Agents on sap.com.
AI Agents in Action (blog post).
Envision the Future of Generative AI with SAP's AI Agents (blog post).
How SAP’s AI Agent Architecture Enables Unprecedented Automation and Decision Augmentation (blog post by Philipp Herzig).

Intelligent Situation Handling news

Intelligent Situation Handling speeds up the resolution of critical business situations by automatically and hence proactively alerting users about urgent issues, proposing follow-up actions, letting you monitor situations, and automating the resolution by using business rules.

If you’re not familiar with Intelligent Situation Handling, I recommend that you watch the introductory video and read the “Get started” blog posts on the SAP Community topic page:

Intelligent Situation Handling topic page.

With the 2025 release, SAP provides nine new situation templates in the areas of finance, public sector, service, sourcing and procurement, and supply chain:

New use cases for Situation Handling.

For the full list of available templates provided by SAP, look here:

Use Cases for Situation Handling.

New Situation Handling Framework Capabilities

Already with the 2023 release we made it possible for partners and customers to create their own situation objects with ABAP Development Tooling (ADT) via developer extensibility. This becomes even more powerful with the 2025 release, with the extended framework supporting the collection of data context, support for custom objects in your own use cases, and support for the standard translation option. Let’s have a look at these in a bit more detail.

Data Context supported by the Extended Framework

The data context is business data from business objects involved in a situation instance that can be collected, distributed, and used for advanced analytics – for example using the Monitor Situations – Extended app. If enabled in a situation type, data context is collected when a situation instance is created, updated, or completed. For example, If you use the situation template Quantity Deficit in Supplier's Delivery to inform specific members in your purchasing organization about a deficit in the quantity of materials to be delivered by the supplier, you'll get, for example, the material, plant, or supplier as part of the data context.

With the 2025 release, every extended object-based situation template supports data context. You can activate it in the Manage Situation Types - Extended app. Doing so results in an event being triggered that includes the data context every time a situation instance is created, updated or completed. For more information, look at the documentation:

Data Context (documentation).
Data Context in the What’s New documentation.

Custom Object Types Supported

You can now use custom object types and object node types, that you have created with the ABAP development tools for Eclipse (ADT), in situation objects in the Manage Situation Objects app as well as in ADT. Until now, you could only use those delivered by SAP. Hence you have far more flexibility in supporting your own Situation Handling use cases.

Translation with Standard Function Supported

With this feature, you can use the standard function for translating texts included in situation objects, situation scenarios, and situation types. This means that you now can use the Maintain Translations app, so that all your translation work can be done in a consistent way now. Find out more in the documentation:

Translate Texts from Situation Objects, Situation Scenarios, and Situation Types.

AI-Assisted Capabilities: Outlook

We have introduced a number of AI-assisted capabilities in the SAP S/4HANA Cloud Public Edition, as presented in my blog post SAP UX Q3/2025 Update – Part 2: SAP S/4HANA Cloud Public Edition 2508 and SAP Fiori Launchpad, in particular:

AI-assisted enterprise search.
AI-assisted easy filter.
AI-assisted smart summarization.
AI-assisted financial business insights.

These are currently on our road map for delivery in Q4/2026 for SAP S/4HANA Cloud Private Edition. Please not that, as usual with such forward-looking statements, our plans are subject to change.

If you look at the above public cloud blog post, you might also notice the new Salutation Bar and the Recap feature in My Home. These are also currently on the road map for delivery in Q4/2026.

New Collaboration Capabilities

Collaborative Draft

Some selected applications support collaborative draft handling of business objects. This means that more than one user can edit a business object, such as a payment advice, at the same time, and see changes made by others before the object is finally saved.

Within the object page, the object header shows the avatars of those who are editing; you also get the avatar shown next to fields which they are editing. Also, we have extended the grid table to indicate which entries are currently in a draft state, as well as showing those currently being edited by someone else (see Figure 16); this is also available in the responsive tables.

You can invite other users to join you in working on an object, as you can also see in Figure 16.

Figure 16: Collaborative draft. On the top left you see how you can invite colleagues to edit the draft with you. The image on the right shows how you can see who else is editing the object, in this case “Payment Advice”, and which field they are currently editing. On the bottom left you can see the new indicators in grid tables. Alt Text: three screenshots are shown as described, the names of the colleagues editing are shown as pop-overs.

Collaborative draft utilizes the latest SAP Fiori elements for OData V4 technology.

To-Dos in Microsoft Teams

Important notifications should not go unnoticed, so we help to ensure that by providing an additional way for users to be notified about To-Dos from SAP S/4HANA Cloud Public Edition. Tasks and Situations which are shown on My Home can now also pushed to users via Microsoft Teams, where they show up as new activities. Figure 17 shows how tasks are integrated. As you can see, not only are users notified directly in Teams, they also get direct access to their task embedded in Teams and can take direct action, such as approve or reject a request.

Figure 17: Tasks appearing as activities in Microsoft Teams. ALT Text: The “Activity” tab in Microsoft Teams is shown , with a list showing on the left one activity “New tasks in SAP S/4HANA – There is 1 new task for you – ToDos” and on the right embedded within Teams the screen from My Inbox, showing the header data plus a list of Items and Bidders, and action buttons at the bottom for Approve, Reject, Show Log, Claim, Forward and Suspend.

See it in action here:

Video: To-Dos in Microsoft Teams (1:00 min.)

In addition to being able to process To-Dos for tasks directly in Microsoft Teams, you can also process To-Dos for Business Situations directly in Microsoft Teams.

This means that you get notified in your Teams activity feed about new Business Situations, and you can process Business Situations in place, without having to leave Teams, as you can see in Figure 18.

Figure 18: To-Dos for Business Situations are available via Activities in Microsoft Teams. Alt Text: Two screenshots are shown, the top one shows an row of Situation cards in My Home, the bottom one shows the Activity view in Teams, with the activity “Situations in SAP S/4HANA” and sub-text “There are 9 situations for you” selected on the left, and the right two thirds of the screen showing a list with the same situations as shown in My Home.

To enable this, you need to install the SAP S/4HANA for Microsoft Teams app.

For further information:

Documentation: Integrating Microsoft Teams.

Contact Cards Show Contact’s Availability Status

Since FPS02 of the 2023 release, users can initiate a chat or call with Microsoft Teams directly from a contact card. I featured this in my previous blog post, look at Figure 5 there for two examples:

SAP User Experience Q4/2024 News for SAP S/4HANA Cloud Private Edition 2023.

Now, with the 2025 release, this has been enhanced to show the availability status of the contact as provided by Teams.

Share as Card via Adaptive Card-based Loop Component

We now offer the option to enable embedding of interactive cards with information and actions from SAP S/4HANA Cloud and SAP S/4HANA directly into Microsoft Teams chats. The data and actions are only shown to users with the necessary authorizations. Technically this is done via adaptive card-based Loop component, for applications built with SAP Fiori elements. Figure 19 shows an example.

Figure 19: An example of an adaptive card embedded in a Teams chat. Alt Text: A screenshot of a chat, with a request text to Megan at the top, followed by a URL to access the app, and then a card showing a purchase contract, with the text Quantity Contract as a hyperlink, along with 9 further fields from the contract. At the bottom clickable buttons “Copy” and “Withdraw from Approval”.

Find out more, including how to set it up:

Integrating the Share: Microsoft Teams > As Card – Authentication-Enabled Option (documentation).

UX Improvements in Details

As I never tire of saying: the details matter if you want to provide a great UX! We continue to work on these details, which can often result in higher satisfaction for users. With the 2025 release, we bring you a large number of improvements, as outlined in the following subsections. Note that we have four interesting ones related to working with tables towards the end of this section.

New Options for Filtering Dates (Semantic Date Range)

We have two new features here:

We now offer the semantic date range also for selecting dates in the table settings dialog, if you want to define a specific filter on a given field in the table. (Note that the table settings dialog allows you to define filters on all the fields in the table, irrespective of which fields appear in the filter bar at the top of the screen).
I’m pleased to say that, on request of many users, we now provide the option to define filters on date fields for the “Last X days/weeks/months/… to date” as well as the “Next X days/weeks/months/… to date”, where users can specify the number “X”.

An example of how tricky such seemingly simple things can be: if, on December 11th, you choose “Last 2 months to date”, do you mean the period from November 1st to December 11th, which would be up to the current date but not a full two months, or do you mean “the last two full months”, i.e. October 1st to November 30th? Since both make sense, the selection screen gives users the option to choose, with the default being the “full month” case, described as “exclude current period”, as you can see in Figure 20.

Column Size Persisted in Flexible Column Layout

When users open up an application which uses the Flexible Column Layout, it will now remember where the user had placed the separator last time, rather than putting it in the default position. Figure 21 shows an example where at the top you see the default position, and below you see the separator moved to the right slightly, so that all the text is visible in the table on the left. Next time the app is opened, the separator will open in the same place.

Figure 21: Flexible Column Layout now remembers the previously used column width. The image at the top shows the default column width, the image below shows the last column width the user chose. Alt Text: two images of Manage Cost Centers application is shown, the upper one has the separator bar between the list on the left and the details on the right further to the left than the image on the right.

All Data Dictionary Help Texts Available to Users

This feature was requested by many customers, and I am happy to announce that it is now available: all the help texts for individual fields which are stored in the back-end data dictionary are now available to users using the built-in help, powered by SAP Companion. In other words, users of SAP Fiori apps have access to the same help texts as were shown with the classic UIs such as SAP GUI. You can see an example in Figure 22.

Figure 22: Data Dictionary help texts now available in SAP Fiori apps. Alt Text: The Manage Purchase Contracts screen is shown, with question marks next to all fields and column headers. On the right the Help Topics are listed, with the Purchase Contract Number selected. Next to the corresponding column header a popover shows the definition text.

Documentation of Keyboard Shortcuts within Applications

Power users are often quicker when only using the keyboard, rather than switching back and forth between keyboard and mouse – but only if they know all the relevant keyboard shortcuts. With the 2508 release we provide information about available keyboard shortcuts directly where you need them, in the context of the application. By selecting “Keyboard Shortcuts” in the user menu, a new window appears explaining all the available shortcuts for the application area currently in focus. If you click on a different part of the application, or navigate somewhere else, then the window showing the available shortcuts is updated immediately for the new context.

Figure 23 shows an example for Manage Journal Entries, where the focus is currently on the filter bar. Clicking on the the table results in many more shortcuts being shown, for example for the arrow keys for moving up and down etc., as shown in Figure 24.

Figure 23: In-context documentation of keyboard shortcuts, for the filter bar. Alt Text: A screenshot of the app “Manage Journal Entries” with the focus on the filter bar, with a second window on the right containing Keyboard Shortcuts in two groups, “Global Shortcuts” and “Generic Keyboard Interactions”.

Figure 24: In-context documentation of keyboard shortcuts, for the table. Alt Text: A screenshot of the app “Manage Journal Entries” with the focus on the table, with a second window on the right containing Keyboard Shortcuts in two groups, “Global Shortcuts” and “Journal Entries (43,854)”. The latter contains descriptions for shortcuts for the table, such as the arrow up, down, left, right keys, or using “Cmd + D” to delete.

Automatic Update of SAP Fiori Apps Upon Change of Data in Backend

There are quite a few cases where users would appreciate seeing absolutely up-to-date data in their application, so that the data is automatically updated if changes occur in the backend. These changes could be made by other users, or by automated background processing . An example for the latter is the Traceability Results application, which is now automatically updated if a batch run has created new traceability items.

Note that this only supported by applications built with SAP Fiori elements using OData V4.

Improved performance for scrolling in grid tables

Our engineers have done some magic so that now scrolling is very fast in grid tables, which are the table type typically used for working with large volumes of data.

Why do I call it magic? Well, modern web-based UIs have the UI layer running in the browser, managing direct user interactions, and calling services in the backend to get and update data. However, if you are working with a list of say over 100,000 items, you would have to wait quite a long time when starting the application until all items have been loaded into the browser. Hence we only load a certain number to start with, such as 100. This however means that when a user scrolls beyond the 100 which have been loaded, additional data needs to be fetched from the backend, which slows down scrolling. Now, our engineers have found a way to minimize this effect to almost zero, so that you have fast scrolling all the time – magic!

Figure 25: Performance improvement for scrolling in grid tables. Alt Text: a short video showing scrolling through a grid table.

Whenever the threshold is reached and more data needs to be loaded, there is a very short delay, with the progress indicator being shown for a few milliseconds, as you can see in Figure 25. In most cases, this is completely negligible. Nevertheless, we do also provide customers the option to change the number of entries loaded by default when the application is started. This is useful if a customer knows that, for a certain application, the number of entries will not exceed 2.000 for example. Then they can set the threshold to 2.000, which means that the application will take a little bit longer to load first time around, but then scrolling will be instantaneous for all the data. Figure 26 shows the UI for doing this, as part of UI adaptation. The “Threshold” determines the maximum number of entries loaded when the application is started, the “Scroll Threshold” determines the maximum number that are loaded during scrolling if new entries need to be fetched.

Figure 26: UI adaptation to determine the threshold determining the maximum number of entries loaded in a table when an application is started. Alt Text: A screenshot with a pop-over “Configure Table” with two new fields “Threshold”, being edited with the value 3000, and “Scroll Threshold”, containing the value 300.

Table Grouping and/or “Show more per row” State can be Shared

If a user personalizes a table by grouping entries by one of the fields, such as the date, this grouping is persisted when sharing the link with a colleague: when the colleague opens the application with the link, they see the same grouping applied.

Similarly, if “show more per row” was selected by the user before sharing the link, the recipient will also see more information per row upon opening the application via the link. This information is also stored when saving a view of a table.

Sort or Group Tables by ID or Description

SAP Fiori apps display the ID and the description in the same column within a table, which provides a better experience than having them in two separate columns.

Now, we offer users a choice when sorting or grouping the table by a column which contains both ID and description: they can choose to do this by ID or by description. As you can see in Figure 27, this selection is very intuitive. The example shows what it looks like when sorting by Company Code. At the bottom of the table you see an entry “1710 (BestRun US)”, where the Company Code (the ID) is 1710 and the Company Name (the Description) is “BestRun US”. In the popover “Sort By” section, the row of icons next to Company Code and Company Name indicate that currently no sorting is active, with the option to sort either bei Code or by Name ascending or descending.

Figure 27: Sort or group tables by ID (in this case Company Code) or by Description (Company Name) when both are displayed together in one column . Alt Text: A screenshot of part of the Manage Journal Entries app, with a list of journal entries and a pop-over “Column Settings” with two sections “Sort By” and “Group By”. The “Sort By” section has two lines, “Company Code” and “Company Name”, and offers three buttons with icons for each of these, representing “no sorting”, “ascending”, “descending”.

Hiding Description Fields in List of Fields in Table Settings

For tables as above where ID and description are displayed in one column, technically, the ID and description are stored in two different fields. Until now, when users personalize the table, both the ID and the description were listed in the list of columns, which confused some users.

Now, we have addressed this by providing the option to hide the descriptions (see Figure 28), and hence simplifying personalization. This option is on by default, i.e. the description fields are automatically hidden now.

Figure 28: Description fields can be hidden from the list of fields shown when personalizing tables. Alt Text: A screenshot with a pop-over “View Settings” containing tabs “Columns”, “Sort”, “Filter”, and a pop-over “Filters” with two options “Hide descriptions” (selected) and “Hide Unselected” (deselected) . “Columns” is selected and shows a list of columns with check marks. The third entry is “Company Code”, followed by “Created On” – i.e. the description column “Company Name” is not listed next to the “Company Code”.

These are the highlights of our changes in details. For the full list of what’s new since the FPS00 shipment of the 2023 release, have a look at the What’s New Viewer:

What’s New for SAP Fiori launchpad for SAP S/4HANA and SAP S/4HANA Cloud Private Edition.

UI adaptation improvements for key users

We have made significant enhancements to UI Adaptation for key users with the 2025 release. The “Adapt UI” option which key users see in their user menu shows you what you can change in the app, in a very intuitive way. And you can change and adapt far more than in the past. See below for some highlights.

Also good to know: the Adapt UI menu entry is also available when using a Classic app (SAP GUI for HTML) from within the SAP Fiori launchpad. It will bring up the Adapt UI app for Screen Personas F5740 Adapt UI for Classic Applications with Screen Personas, which allows key users to adapt the layout of these classic UIs.

Key Users Can Rearrange ID and Description Within a Field or Column

SAP applications come with a standard arrangement of ID and description within a field or a column, based on user research. We have found that for financial users, it is usually best to have the ID first and the description in brackets: Company Code (Company Description), for example “1710 (BestRun US)” as shown in Figure 27. For users in sales and logistics, it is usually best to have the name first and the ID in brackets: for example Customer Name (Customer ID), for example “US Specialty Cycles 5 (USCU_S05)” as shown in Figure 2.

Now, key users can use UI adaptation to rearrange the order for a given application. Doing this change applies then to all occurrences of the field in the application, i.e. the filter bar, the table or in a form on an object page.

Far More Options for Key Users to Adapt UIs

Key users can now make far more significant changes to UIs than before. For example, they can add a button to clear all filter values in the filter bar, remove buttons such as the “Export to Excel”, and much more. Figure 29 shows the options for configuring a table for example.

Figure 29: Many more options for Key Users to adapt UIs. Alt Text: UI Adaptation is shown switched on for the application Manage Bank Hierarchies, with a popover called “Configure Table” filling half the screen, and showing 12 options such as “Enable Table Export”, “Frozen Column Count” with a field for entering the number, “Sorting”, “Columns” etc.

Design and Technology News

For a comprehensive overview of the recent design and technology news, have a look at my blog posts from Q1 and Q3 2025. These are also relevant for the SAP S/4HANA Cloud Private Edition and SAP S/4HANA 2025 release, since the design and technology are already available in the cloud:

SAP User Experience Q1/2025 Update – Part 7: UI Design and Technology for Web and Mobile
SAP UX Q3/2025 Update – Part 7: UI Design and Technology for Web and Mobile
Note though that the SAP Build Extensibility Wizard presented there is currently only integrated with for SAP S/4HANA Cloud Public Edition.

We are progressing at such a pace, that I have some additional news to share with you, not covered by the above posts. In addition, I would like to explicitly mention some particular highlights here from the above posts too.

Regarding extensibility: do have a look at the new SAP Extensibility Explorer.

SAP Design System Portal and UI Kits – now with AI Components

We recently introduced the new SAP Design System portal that brings together the product design guidelines SAP Fiori for web, SAP Fiori for iOS, and SAP Fiori for Android, as well as to the new digital design system guidelines. With its enhanced usability, simplified versioning and improved performance, designers (and developers!) get a better user experience compared with the previous SAP Fiori design guidelines.

The new UI Kits available for designers in Figma make it easy for designers to design accessible UIs at enterprise scale, for web applications, mobile iOS and Android applications as well as wearables. The UI Kits provide reusable components for web and mobile, along with web floorplans, which give you what you need out-of-the-box.

We have just released SAP Web UI Kit v8.0 which includes a full set of AI components: AI Button, AI Menu Button, AI Split Menu Button, AI Prompt Input, AI Input, AI Text Area, and AI Rich Text Editor.

Figure 30: The SAP Design System portal start page (on the left), and SAP’s UI Kits for designers in Figma (on the right). Alt Text: Two screenshots. The portal page shows four main sections SAP Fiori for Web, … for Android, … for iOS, and SAP Digital Design System, each followed by links to UI elements, Figma kits, and overviews. The UI Kits show 8 cards, SAP Fiori for Android, Web, iOS, watchOS, Wear OS, Performance, Accessibility and SAP S/4HANA.

Find out more here:

New SAP Design System Portal for SAP Fiori Design Guidelines, and New UI Kits for Designers.

SAP Fiori Development Portal

I’m also happy to inform you about the new SAP Fiori development portal, introduced a few weeks ago. It is designed to help developers maximize the benefits of SAP Fiori elements for OData V4, which is more than just a UI framework: it’s a metadata-driven approach that leverages the SAP Design System as its guiding principle, incorporating the most relevant design system options for typical business tasks.

Figure 31: The SAP Fiori development portal. Alt text: A screenshot showing the Introduction page. On the left a menu has entries Using the Portal, Building Blocks, Global Patterns, Floorplans, SAP Fiori Tools. The Introduction page has a full width card “Building Blocks” at the top, with a description and tiles representing various building blocks. Below that “Choose Your Option” heading above two side-by-side cards for “Floorplans” and “Customer Layout”, each with an image and description, and a “Learn More” button.

The SAP Fiori development portal puts building blocks front and center. These building blocks - such as tables, forms, filter bars, and charts - are orchestrated by SAP Fiori elements and form the basis of every OData V4 application. They provide standardized layouts and interaction patterns, ensuring UI consistency and boosting developer productivity. The great advantage of using building blocks is that you can use them to create a customer layout and yet still benefit from the advantages of the metadata driven approach: low code, built in enterprise-grade capabilities such as multi-language support, accessibility, security and performance, and design system consistency.

Find out more in this six-part series of blog posts, here is the first one, which contains links to the others:

Introducing the SAP Fiori Development Portal: Your Gateway to Rapid SAP Fiori App Creation (1 of 6).

Using AI to Develop UIs

The above posts from Q1/2025 and Q3/2025 introduced a number of powerful ways to accelerate UI development by using AI, such as:

Creating SAP Fiori elements apps from a sketch (in the Q1 post), now integrated in SAP Build Code and Joule (Q3 post)
Joule for SAPUI5 freestyle development (Q1 post)
AI-assisted auto-fix of coding errors with UI5 linter (Q3 post)

Recently, we have gone even further and introduced MCP servers for freestyle SAPUI5 development as well as for developing with SAP Fiori elements and the associated building blocks. These open-source Model Context Protocol (MCP) servers provide AI agents with comprehensive UI5 and SAP Fiori elements knowledge, including best practices and project-aware context information, and thus provide developers with valuable support. Figure 32 shows examples.

Figure 32: Examples of the UI5 MCP Server (on the left) and the MCP Server for SAP Fiori (on the right) in action. Alt Text: both images show screenshots of a CLINE console view with a task entered as text at the top, followed by a list of steps which the system proposes to do to solve the task.

Read about these new MCP servers in these blog posts:

Accessibility taken to the next level: WCAG 2.2 support

Accessibility is key to using SAP's business solutions. Adopting the latest standards gives applications a true cutting edge, ensuring that solutions are inclusive and meet the diverse needs of users globally. When creating apps with SAP Build and SAPUI5, developers can leverage the latest Web Content Accessibility Guidelines (WCAG) 2.2.

For example, two of the key new requirements in the 2.2 version are:

The minimum target size of an interactive element now needs to be 24x24 px, so that users don’t accidentally activate a neighbouring element.
Each operation that can be performed by dragging can also be performed alternatively without dragging – so that people who cannot use a mouse to drag can still use the UI.

See more details:

SAPUI5 is Leading the Way in Accessibility with WCAG 2.2

Blue Crystal and Belize Themes No Longer Available in the Web

As announced in April (Upcoming Removal of SAP Fiori Themes Belize and Blue Crystal), the visual themes Blue Crystal and Belize have been removed from our web UI technology with the 2025 release of SAP S/4HANA Cloud Private Edition and SAP S/4HANA.

After upgrading, existing usages of Belize or Blue Crystal will be automatically redirected to the Horizon theme.

If you have created your own custom theme based on Belize or Blue Crystal using the UI theme designer, you will need to migrate this to an available theme. Our strong recommendation is to base the new version on the Horizon theme.

For more information about the web UI technologies affected, and how to migrate custom themes, have a look at this blog post:

Announcement: Removal of Belize theme of SAP Fiori.

Note that SAP GUI for Windows continues to support older themes, including Blue Crystal and Belize.

Final words

Come join us at TechEd 2025, November 4 - 6, either virtually or in Berlin, or at one of the TechEd On The Road events in Louisville (USA), Bangalore (India) and Sydney (Australia), to find out more about our latest user experience innovations. I myself will be in Berlin and Bangalore, so feel free to approach me after my talks if you have any specific questions. I’m looking forward to meeting some of you!

This blog posts gives an overview of all the UX related sessions at all four events:

Exciting UX talks at TechEd – Virtual, or meet us in Berlin and On The Road (USA, India, Australia).

Please continue using the community to share your learnings and best practices, either by posting articles yourselves or via comments on this post. You can also follow me in the community if you want to be notified about further similar updates from me.

Hybrid Server-Side Rendering for UI5: Bridging CAP and AI-Generated Views

2025-11-02T13:28:19.682000+01:00

What if your UI5 views could be generated automatically by AI and pre-rendered on the server before ever reaching the browser? This isn't science fiction, it's an experimental approach I've been developing that combines Cloud Application Programming (CAP) with UI5 server-side rendering and AI-powered view generation.

The Core Concept: Hybrid SSR for UI5

Server-side rendering in UI5 doesn't have to mean fully rendering HTML on the server. My approach takes a hybrid path: pre-populating XML views with data on the server using Handlebars templating, while still letting UI5 handle the final rendering on the client.

This creates a practical architecture that addresses two critical concerns in enterprise applications:

Enhanced Security: By populating data directly into XML views on the server, you avoid exposing raw OData services to the client. Users receive only XML files with the specific data they need, no access to full OData endpoints through browser debugging tools.
Improved Performance: Rather than making separate OData calls for each view, the application receives XML views with data already embedded, reducing round trips and potentially improving load times.

From Concept to Reality

I first introduced this concept at reCAP, where I demonstrated how to combine UI5 and CAP to implement server-side pre-rendering of UI5 artifacts. The session covered:

Pre-rendering UI5 fragments and views using CAP
How these two SAP frameworks can enhance each other's capabilities
My approach to implementation and ideas for future improvements

The goal was to show how leveraging UI5 and CAP together can elevate both frameworks to the next level.

Watch the reCAP session: Hybrid UI5 Server-Side Rendering with CAP

Taking It Further: AI-Generated Views

At Devtoberfest, I pushed this concept into really exciting territory by adding AI-powered view generation. This is where things get interesting.

How AI Changes Everything

Traditional UI5 development requires developers to manually create XML views for every entity, form, and table in their application. What if AI could do this work for you, not just as a one-time code generator, but dynamically, on every request?

Here's how it works:

AI analyzes your CAP entity definitions - It understands your data model, relationships, field types, and annotations
AI generates appropriate UI5 views - Forms for editing, tables for lists, master-detail layouts, whatever makes sense for your data
Views are pre-rendered on the server with actual data from your OData service
Instant delivery to the client - Pre-populated, ready-to-display views arrive in milliseconds

The Power of On-Demand UI Generation

This approach means your UIs are generated fresh when needed, rather than maintained as static files. Imagine:

Zero view maintenance: Change your entity model, and your UI automatically adapts
Instant prototyping: From data model to working UI in seconds
Smart adaptability: AI can generate different views based on user roles, device types, or business context
Automatic best practices: The AI understands your annotations and generates appropriate labels, help text, and validations

Watch the Devtoberfest session: Taking UI5 Server-Side Rendering to the Next Level with AI

Get Started: Available Resources

Ready to experiment with this approach? I've made everything available as open-source plugins and a demo application:

CAP Backend Plugin

ui5-cap-serverside-rendering-plugin
Enables server-side rendering capabilities in your CAP backend. Handles Handlebars templating, data population, and view serving.

UI5 Frontend Library

be.wl.serversiderendering.library
The UI5 library that enables client-side handling of server-rendered views, including custom routing and view management.

Complete Demo Application

ui5-cap-serverside-rendering-demo
A fully functional example showing how to integrate both plugins, configure routing, and implement server-side rendering in a real application.

Try It Out

This is an ongoing experiment, and I'd love to see what the community builds with these tools. Whether you're interested in the basic SSR approach or the AI integration, the plugins and demo provide everything you need to start experimenting.

Beyond UI5 Controls: Using Web Components Across Frameworks

2025-11-02T13:49:55.751000+01:00

When building UI5 applications, you need to decide: should you create a classic UI5 Control or use a UI5 Web Component? This question matters even more when your organization uses different frameworks and wants a consistent user experience everywhere.

I recently presented this topic at both UI5con and SAP Devtoberfest 2025, sharing what we learned from integrating custom web components into UI5. This work showed us how to keep a consistent look and feel across applications while going beyond the standard SAP Fiori design.

Watch the full sessions:

Devtoberfest 2025 - Beyond UI5 Controls with the Rise of Web Components - Detailed walkthrough with live demo

UI5con 2025 - Same Topic, Different Perspective - Original presentation with Q&A

Why Web Components Matter

UI5 controls have always been great for building SAP applications. They give you pre-built components with Fiori design, theming, and internationalization built in. No need to worry about CSS or making things look right.

But things are changing. Many organizations now use Angular, React, Vue, and UI5 across different teams. Web components let you build once and use everywhere. They work with any framework while keeping their style and functionality intact.

This helps organizations:

Standardize UI/UX across teams using different frameworks
Use company-specific design systems instead of only SAP Fiori
Share components between Angular, React, Vue, and UI5 apps
Save development time by reusing components

When to Use What?

Use traditional UI5 controls when:

Your app only uses UI5
You're happy with SAP Fiori design
You don't need cross-framework support

Use UI5 web components when:

You want Fiori design in non-UI5 frameworks
You need components for Angular, React, and Vue
You're building a shared component library

Use native web components when:

Your company has its own design system
You need company branding everywhere
You work with different technologies

Our Proof of Concept

We integrated Nova design system web components into a UI5 application. This meant creating proxy controls that connect UI5 to the web components, handling properties, events, and data binding.

Our demo app, a simple To-Do list, replaced standard UI5 controls with Nova web components. Everything still worked like a normal UI5 app. Check out the GitHub repository to see how it works.

What We Learned

Technical stuff:

You need proxy controls to connect UI5 with web components
Event handling sometimes needs extra code
Data binding requires attention, especially with components built differently

Deployment: Web components work fine with SAP BTP. You can keep your consistent UI while using all BTP features.

Current state: Web components work well in production, but the ecosystem is still growing. You might need extra code for some edge cases. It might be early for productive usage 😉

What's Next

Web components are changing how we think about UI development in SAP. Traditional UI5 controls are still great for many cases, but web components give you more options.

As more organizations share their component libraries on npm, we'll see better standardization and teamwork across companies. It's not about picking UI5 or something else, it's about using the right tool for each job.

Whether you're a UI5 developer, an architect planning UI strategy or a consultant helping clients, understanding web components and UI5 integration will be useful.

Resources

📺 Devtoberfest 2025 Session - Watch the full presentation with live demo
📺 UI5con 2025 Session - Original talk with Q&A
💻 Demo Application - GitHub Repository with code examples
📅 Event Page - Devtoberfest event details

SAP Fiori: Adding Field Validation Based on Other Field Values Using Controller Extensions OData V2

2025-11-03T14:13:25.458000+01:00

In many project use cases, we often encounter situations where the validity of one field depends on the value of another. For example, when a flag is updated or a key date is modified, the user must provide additional comments before saving the record.

In this blog post, I’ll walk you through how I implemented such conditional validations in a Fiori Elements Object Page using Controller Extensions.

Scenario

I had a requirement where:

If the Last Working Date (LWD) was changed, then the Additional Comments (ARD Comments) field must not be empty.
If certain flags or dropdown values were set to specific conditions (like “Y” or a specific code), corresponding comment fields were required before allowing the user to save.

Instead of modifying the generated metadata or annotations, I handled these validations using the Controller Extension’s beforeSaveExtension hook, which is triggered before the save action.

Implementation

1. Adding controller extension :- Add the controller extension file in app/webapp/ext/controller as ObjectPageExt.controller.js

2. Add the controller file in manifest.json

"sap.ui5": {
    "flexEnabled": true,
    // other fields
    "resources": {
      "css": []
    },
    "routing": {
      "config": {},
      "routes": [],
      "targets": {}
    },
    "extends": {
      "extensions": {
        "sap.ui.controllerExtensions": {
          "sap.suite.ui.generic.template.ObjectPage.view.Details": {
            "controllerName": "app.ext.controller.ObjectPageExt"
          }
        }
      }
    }
  },

3. ObjectPageExt.controller.js

sap.ui.define(["sap/ui/core/mvc/ControllerExtension", "sap/m/MessageBox"], function (ControllerExtension, MessageBox) {
    "use strict";

    return ControllerExtension.extend("offboardingdashboard.ext.controller.ObjectPageExt", {
        override: {
            beforeSaveExtension: function () {
                const oContext = this.getView().getBindingContext();
                if (!oContext) return Promise.resolve();

                const oModel = oContext.getModel();
                const sPath = oContext.getPath();
                const oNewData = oContext.getObject(); // Current draft data

                // --- Step 1: Get the original (active) entity data ---
                const oOriginalData = oModel.getOriginalProperty
                    ? oModel.getOriginalProperty(sPath)
                    : null;

                // --- Step 2: Detect change in Last Working Date ---
                let bLwdChanged = false;
                if (oOriginalData && oOriginalData.cust_lastworkingdate && oNewData.cust_lastworkingdate) {
                    const dNew = new Date(oNewData.cust_lastworkingdate);
                    const dOld = new Date(oOriginalData.cust_lastworkingdate);
                    bLwdChanged = dNew.getTime() !== dOld.getTime();
                } else if (oOriginalData && oOriginalData.cust_lastworkingdate !== oNewData.cust_lastworkingdate) {
                    bLwdChanged = true;
                }

                // --- Step 3: Apply validation rules ---
                const aMessages = [];

                if (oNewData.cust_rehire === "Y" && (!oNewData.cust_rehirecomments || oNewData.cust_rehirecomments.trim() === "")) {
                    aMessages.push("• Rehire comments are required when rehire flag is set to 'Yes'.");
                }

                if (bLwdChanged && (!oNewData.cust_ardcomments || oNewData.cust_ardcomments.trim() === "")) {
                    aMessages.push("• ARD comments are required when Last Working Date has been changed.");
                }

                // --- Step 4: Show error message and prevent save ---
                return new Promise(function (fnResolve, fnReject) {
                    if (aMessages.length > 0) {
                        const sMessage = "Please address the following issues before saving:\n\n" + aMessages.join("\n");
                        MessageBox.error(sMessage, {
                            actions: [MessageBox.Action.OK],
                            onClose: fnReject
                        });
                    } else {
                        fnResolve();
                    }
                });
            }
        }
    });
});

How It Works

The beforeSaveExtension method is triggered automatically before the Save action on the Object Page.
We first read the current draft data and the original active entity.
We compare fields like cust_lastworkingdate to detect changes.
Based on certain conditions (like flag = ‘Y’ ), we push validation messages into an array.
If there are validation errors, a MessageBox appears with all issues listed, and the save action is prevented.

UI Screenshots

When both the conditions are met :
-> last working day is changed and rehire flag is set to 'Y'

-> only last working day is changed

-> only rehire flag is set to 'Y'

Key Takeaways

Always perform value-dependent validations in the beforeSaveExtension hook for extensibility.
Use getOriginalProperty to safely compare values between draft and active entities.
Consolidate all validation messages for a better user experience rather than showing multiple alerts.

Effortless SAPUI5 Patch Management: Introducing the New SAPUI5 Runtime Repository

2025-11-06T17:45:58.182000+01:00

For years, the MIME repository has been the standard location for storing SAPUI5 runtime artifacts for SAP S/4HANA and SAP S/4HANA Cloud Private Edition. In contrast, the S/4HANA Cloud Public Edition retrieves SAPUI5 from the cloud CDN. Although the MIME repository has served its purpose, many customers working with SAPUI5, especially system operators installing new SAPUI5 patches, face common challenges. These include poor performance, numerous manual steps, issues with transports, and risk of inconsistent states.

The good news is that SAP introduces the SAPUI5 Runtime Repository with the release of SAP S/4HANA 2025. This modern replacement overcomes these challenges and prepares you for the next generation of SAPUI5. To ensure efficiency for all customers, downports to all maintained lower releases are available, except for SAP S/4HANA 1809 using SAPUI5 1.38. You can access this repository through SAP Notes containing transport-based correction instructions (TCIs).

Let's explore how this new repository significantly enhances your workflow.

Performance Where It Matters

MIME Repository: SAPUI5 patch updates can take up to 2 hours. Loading debug-sources with sap-ui-debug=true can take up to 10 minutes.
SAPUI5 Runtime Repository: Patch upgrades are approximately 20 times faster. During runtime, loading debug sources also occurs about 20 times faster. These improvements ensure smoother operations and faster response times.

From Complexity to Simplicity

MIME Repository: Handles more than 70,000 individual ABAP objects. This volume poses a risk of errors and inconsistent updates.
SAPUI5 Runtime Repository: All runtime content is bundled into just one ABAP object. This approach guarantees consistent updates and reduces operational risks.

Automation First

MIME Repository: Updates rely on custom, manual procedures, which increases the maintenance effort.
SAPUI5 Runtime Repository: Uses SAP TCI Notes and comes with an automated process specifically for SAP S/4HANA cloud operations. This makes updates easier and more reliable.

Zero Downtime Deployments

MIME Repository: No support for zero-downtime deployments. This limitation might cause interruptions during system upgrades.
SAPUI5 Runtime Repository: Fully supports online deployment with zero downtime. This feature ensures that SAPUI5 content remains continuously available, even during system upgrades.

Safe, Standardized Rollbacks

MIME Repository: Reverting patches can be error-prone, often requiring manual fixes and risking inconsistent system states.
SAPUI5 Runtime Repository: Reverting SAPUI5 patches is fully supported. Runtime content is delivered as a single ABAP object, and the update process integrates with TCIs. Rollbacks are straightforward, consistent, and safe. This approach simplifies the validation of new patches: if issues arise, you can reliably revert to the previous stable state without lengthy manual intervention or risking inconsistencies across systems.

Future-Proof

MIME Repository: Not compatible with multiple SAPUI5 versions.
SAPUI5 Runtime Repository: Supports multiple SAPUI5 versions in parallel, making it ready for the future while ensuring backward compatibility.

Here's an overview of all the improvements:

Why This Matters

The move from MIME Repository to the new SAPUI5 Runtime Repository isn’t just a technical upgrade — it’s a significant step toward:

Faster and safer patch updates.
Reduced operational effort.
Continuous availability.
Future compatibility.

If your organization uses on-premise landscapes and works with SAPUI5, it's time to embrace this change: the SAPUI5 Runtime Repository becomes automatically available with the current SAP S/4HANA 2025 release and in the latest support packages of all maintained SAP S/4HANA versions except SAP S/4HANA 1809.

Even if you do not want to upgrade to a new support package, you can still use the SAPUI5 runtime repository by installing SAP Note 3599156. If you have hesitated to install a new SAPUI5 patch, now is the time to try the new procedure and benefit from its efficacy and ease. Installing the latest SAPUI5 patches ensures your applications run efficiently today and are prepared for the future.

👉Have you performed any SAPUI5 patch upgrades recently? What has your experience been like so far? To get started, refer to SAP Note 3599156.

Let’s Talk About UI5: Your Questions Will Steer Our December UI5ers Live Session

2025-11-12T18:01:26.594000+01:00

This December, we’re flipping the script for our final UI5ers live session of the year. Instead of us presenting, we want you to set the agenda. Join us on Thursday, 4th December, at 15:15 CET, for a special “Ask Us Anything” session where Stefan Beck, Andreas Kunz, Peter Muessig, and Margot Wollny will be ready to tackle your questions on UI5’s future, architecture, and more.

This is more than just a Q&A; it’s a conversation. Your questions, your feedback, and your perspective are what help guide the evolution of UI5. We genuinely want to know what’s on your mind, what challenges you, and what you’re excited about.

Help Us Shape the Conversation

To make this session as insightful as possible, we invite you to send us your questions in advance. We’re especially looking for questions that spark discussion around broader topics. To get you thinking, here are a few examples of the kinds of questions we’d love to explore:

🗺️ The Future & Roadmap:
- “What are the long-term plans for Web Components in UI5 applications?”
- “Are there still plans for an open-source tool for theming?”

🏗️ Architecture & Design Decisions:
- “Why does the architecture of the OData V4 model differ so much from the one for the OData V2 model?”
- "Could you explain the trade-offs considered when designing the current routing system?”
👍👎Constructive Feedback (The Good and The Bad):“
- "I find the data binding syntax incredibly powerful. Are there plans to expand on this?”
- “Managing dependencies across multiple libraries can feel complex. Have you considered ways to simplify this?”

Why Send Your Questions in Advance?

While we will absolutely take questions live, submitting them beforehand helps us make the session better for everyone. It allows our team to:

Prepare thoughtful, in-depth answers instead of just off-the-cuff replies.
Spot common themes and group related questions to address a topic more comprehensively.
Bring in the right expert from the team if a question requires specific knowledge.
Prepare a quick code sample or visual aid if it helps clarify a complex concept.

Your early submissions will directly contribute to a more valuable and well-prepared discussion.

Ready to Ask? Here’s How:

To ensure our team has time to review everything, please send your questions by Monday, 1st December 2025. You have a few options:

Comments below: Simply add your question as a comment on this article
Email: If you prefer, send your question to us at openui5@sap.com

We are truly looking forward to this open dialogue and hearing directly from you. Let’s make this a fantastic final session of the year, together.

Joule in SAP Build Code can now create freestyle UI5 apps

2025-11-13T15:58:38.496000+01:00

Last year, we introduced the SAPUI5 extension for the Joule coding assistant in SAP Build Code and wrote about how to use it. Over time, it has received more features, like the AI-supported conversion of UI5 apps to TypeScript and setting up new pages and the respective navigation.

The latest improvement, available from November 2025, lets you create new freestyle UI5 apps according to your requirements. The feature is not absolutely groundbreaking, as there are other tools doing a similar job like the Easy-UI5 templates and the recently published UI5 MCP Server. But:

It brings the functionality right to the fingertips of developers using SAP Build Code—no other tools needed.
It extends the template capabilities beyond what the Easy-UI5 templates provide.
Implementing it within the Build Code Joule environment yielded interesting insights and further improvements. More on this in my other article.

The feature

Joule makes specific features available using "slash commands". The new one is /ui5-create-app. When you open the Joule panel in SAP Build Code and start typing /ui5, you might see it suggested, as well as other UI5 features. But which commands appear depends on the context. While some are only available within UI5 apps, this new feature is only available when you are not in a UI5 app. It won't be available e.g. in a workspace which has a ui5.yaml at top-level, or when you have a UI5 controller open in the code editor!

Try it in a workspace with a CAP project at root level, so you see some of its magic immediately: as soon as you finish typing the slash command or select it from the suggestion list, another suggestion list with sample prompts comes up. These are based on the actual data structures of the CAP project.

This means you can simply select the desired entity and service, then the actual full prompt will automatically be entered into the field(but of course you can also write your own prompt!). This full prompt includes even more details than the short prompt in the suggestion list did.

Note that the prompt includes a concrete list of properties and the service URL. This information has been extracted from CAP using good old deterministic code—no Large Language Model (LLM) used. In fact, this is an area where AI would likely make up ("hallucinate") property names which do not actually exist. Acquiring all this information in advance in a deterministic way not only gives you the chance to review and adjust the prompt with little effort, but also leads to a more reliable functionality overall.

The paradigm: use LLMs (Large Language Models) where they excel—processing and "understanding" language—and use deterministic code for hard facts and well-defined operations, where possible.

The AI part starts soon enough, when you submit this prompt. It proposes a specific app setup, highlighting the key choices for you to review. For example, it will suggest a sensible name (if you didn't provide one) or suggest the best location inside the project structure (which it knows from its context).

But you can do more than just review those parameters. A suggested version of the app has already been created behind the scenes, so you can scroll through the 30+ files listed in the box at the bottom and click those you want to preview. If the result already looks fine to you—perfect. Just press the "Accept Application" button and the app will be set up in your workspace.

Refining the app

But of course you are free to continue the conversation and tweak the result. The LLM in Joule will put its true strength at work, mapping its understanding of your request to what the underlying template can do. No need to type "change parameter x to value y": LLMs also understand you when you are less formal and direct. Look at the below screenshot for an example: it responds almost too compassionately to the developer who is "hesitant about new technologies" and recreates the app with changed parameters—using JavaScript instead of TypeScript. The user did not even mention the programming language specifically, but still the LLM decided that changing it would be the best way to accommodate the app code to the user's preferences.

At this stage, you can refine the setup of the initial app—within the limits imposed by the application template used behind the scenes, which only has limited degrees of freedom. We want this initial app to be robust and follow best-practice code. We also want those 30+ files to be created in one fast step. Hence the code is not written by AI, but by using predefined template files we are back in the world of traditional deterministic coding here. You have plenty of opportunity for using AI later on to extend the app from this solid starting point.

Joule is aware of its limits in this step, so it will not say "yes" to every request you throw at it. Asking for "a trillion tables" or other features beyond the template scope will be politely rejected.

Accepting the app

When the preview looks good and you have pressed the button, the job of this /ui5-create-app assistant is done. After app setup has finished (which may take a while because the dependencies need to be installed), it concludes with hints how to continue, including instructions on how to start the app in your respective workspace setup.

The created application looks roughly like this, with a table and a detail form below. Note: only OData V4 services are supported at this time.

You get this kind of UI when you specify an OData V4 service and entity. If you don't, then there is just a generic "Hello World" success page instead.

Of course this UI structure might not be exactly what is desired in the app or even requested in the prompt, but this is what the template can do. When an OData service and entity but no properties are requested, then the tool tries to detect existing properties. If this fails, the table will be empty (no columns at all)—but Joule's success message should then mention this.

After creation

As the assistant suggests, please move to the other Joule assistants /ui5 and /ui5-create-page for developing the app further. In order to create more apps, reset the conversation with the button at the top of the Joule pane.

Because /ui5-create-app knows that it cannot modify the app or re-create it, it will politely guide you to the options you have, no matter what your request is. It may even give instructions on how to achieve the given goal within a UI5 app, but it will not be able to modify the code and it will make this clear when needed.

AI Learnings

While there is not much more to say about this feature—simply try it!—there are some facts and learnings about its implementation! If you are curious, head over to the second part of this blog post: Inside Joule: Lessons from building an AI coding assistant for SAP Build.

Inside Joule: Lessons from building an AI coding assistant for SAP Build

2025-11-13T16:00:38.750000+01:00

Flashback: the feature

This is a "making of" article about the implementation of the new /ui5-create-app slash command available within Joule in SAP Build Code. In short, this new feature enables a conversation between AI assistant and application developer about a new freestyle UI5 application to build, with a full-fledged best-practice application starting point as result.

To see screenshots of this feature in action and understand it better, feel invited to read my previous blog post. If you are just here for the background and AI-related learnings—go ahead!

General considerations

With open‑ended prompting, users aren’t restricted to predefined interactions. The user could ask for anything. In contrast to traditional programming, a prompt input field can’t be handled with a sprawling web of if/else logic trying to cover all possible use-cases. Attempting this will lead to a frustrating user experience where the user often gets an "I do not understand your request".

Some developers try to mimic this traditional programming pattern when crafting prompts and contexts for LLMs, telling an LLM "if the user asks for x, then answer y". Instead, as demonstrated below, tell the LLM what it can and cannot do and give it a goal to achieve. It's "smart" enough to figure out a suitable response to whatever the user will throw at it.

A fundamental choice

Looking at this specific feature in the specific environment, the implementation options on the table were (for a variety of reasons) these two:

Either just provide a system prompt (a prompt that is added behind the scenes in addition to what the user typed) without interfering with the specific prompts and replies entered during the conversation.
Or adopt a new way of creating an "agentic" multi-step execution plan. Similar to a guided activity, this would allow phases of data collection, possibly in different steps for different data, then an app creation step and so forth.

Surely "agentic" and "well-defined steps" sound good for app creation from a template, no? In fact, the initial implementation started like this, but it was soon apparent that this would neither provide the expected flexibility nor allow for a truly intelligent app creation experience. Defining phases in which to acquire specific information and having the application code created at a specific stage in this process did not feel right. The user would still feel like clicking through a traditional template creation process, as something specific was expected from the user at every stage, instead of giving the user the freedom to tweak every aspect at every stage. The true power of AI, on the other hand, would be totally underused.

But then again... just a system prompt and that's it? No file read access to explore the environment, no dynamically updated instructions? Is this enough for an intelligent coding assistant?

Creating an "AI agent" out of nothing

Consider the now common definition of an "AI agent" which has settled over the course of this year: it's nothing more than "an LLM with tools, called in a loop to achieve a goal". The chat conversation provided by Joule can be our loop, an application template with its parameters is the tool and the goal of assisting the developer to create an app can be stated in the system prompt. Of course a real autonomous agent would require the loop to run without user interaction, but for this feature a loop involving the user is just right.

The system prompt used for this feature literally includes: "You help users create new UI5 applications by analyzing their requirements and filling the project template parameters. [...] Your goal is to gather all necessary information to create a new UI5 application. The application will be generated from a template which has only one page and a hardcoded UI, but can optionally display data from an OData V4 service. [...] You cannot create the application yourself, but the user will see a preview...". There you have it: the goal and the tool!

It then goes on with some behavioral hints and of course a detailed description of what exactly the template parameters do. Finally, it requests each reply to contain a JSON object with the best choice of template parameters according to the current understanding of the user request. The JSON object could look like this example:

{

   "appNamespace": "com.myorg.myapp",

   "basePath": "/path/to/workspace",

   "createAppDirectory": true,

   "framework": "SAPUI5",

   "frameworkVersion": "1.136.0",

   "author": "John Doe",

   "oDataV4Url": "https://services.odata.org/TripPinRESTierService/(S(s5xrj1t51r41s3ooztsynysq))/",

   "oDataEntitySet": "Airports",

   "entityProperties": ["Name", "Address"],

   "runNpmInstall": true,

   "initializeGitRepository": true,

   "typescript": true

}

This JSON object is removed from the LLM response before displaying it, then the application is generated with these parameters, so the user can accept it or request changes. In an environment where tools with a well-defined interface like MCP servers are not enabled, this JSON object as part of the conversation is how the integration with the templating tool is achieved. A note to make this very clear: this environment is not the official SAP Joule assistant running inside end-user applications, as it is now also being enabled for development by customers. Instead, it is a sort of predecessor implementation specifically available in SAP Build Code since spring 2024.

Some of these parameters in the JSON object are more important than others with regards to the user explicitly influencing them or having to accept them. Whether the app code is generated as TypeScript or JavaScript is something the user should not be surprised with after accepting the app! On the other hand, the author name, which is only written into package.json, can be reliably defaulted to the logged-in user name and also very easily changed later on if needed. Hence, the parameter descriptions explain not only what they do, but also how much the user should be bothered with them. As result, Joule usually does not even mention half of the parameters, thus keeping the conversation focused.

How to stop the agent

Regarding the state after the app was accepted, the prompt explains "AFTER the user has generated the application, you **MUST NOT** continue discussing parameters for generation, but rather [...] in particular by referring the user to the '/ui5' command for most requests or '/ui5-create-page' for adding pages to the app, because they are much better than you in developing features, as they have the capability to automatically select a suitable context of files.".

This means the transition in the overall process between refining parameters and "no more changes possible" is not a hardcoded step or denoted by changing the system prompt, but rather explained up-front. That's enough. Can you talk Joule into proposing another set of parameters after the app was accepted? Maybe. But its normal behavior is just right: it will explain that the app can not be created again without restarting the conversation. Nevertheless, there are also non-AI guardrails in place to prevent the app from being generated again, thus causing trouble.

All in all, we shape Joule’s behavior by explaining the templating tool and its limits, by stating the goal and desired behavior towards this goal, and by explaining the general flow, in particular the state after app acceptance. This is enough to guide it to a suitable reaction for whatever the user requests.

Even if the user insists like this:

Context, context, context!

To make the entire feature really user-friendly, however, it is not sufficient to write a good prompt, but the context must also provide enough information to the LLM to allow for informed decisions. Hence, information like the list of project root files and folders, whether a Git repository is present, plus CAP service/entity/property info, and more, are gathered (e.g. using the @sap-ux/project-access package). This knowledge is provided as prompt context behind the scenes or used in another way (like as content of the suggested prompts). This makes Joule aware of the environment it acts in, leading to better responses, like automatically avoiding app names that would conflict with existing folder names.

Agentic coding assistants like Cline, GitHub Copilot, Cursor etc. usually have the ability to read files and execute shell commands as needed to understand their environment. In this pure user request + LLM response environment this might have been a bit harder to build. Basically, more tools could have been defined, e.g. by describing other JSON object structures for invoking them. But control would not so easily return to the LLM until after the user has entered another prompt.

But for a narrow scenario like app creation this wasn't necessary. Collecting the most relevant information up front not only provides sufficient context, but also improves performance and reliability by avoiding repeated tool calls and unpredictable LLM loops.

In-response prompting

The real-world context, however, changes over time. Specifically, once the app is created and accepted, there are new additional files present.

When developing the UI5 MCP server, we observed that the agentic AI tool (e.g. Cline) using the MCP server often decided to inspect the new app directory tree after creation, causing several LLM roundtrips which cost time and tokens. Or it would run "npm install" again, even though it had already been executed. Or it would make specific coding errors very often in subsequent modifications.

To avoid this, we extended the response of the MCP server after creating the app. Normally, it contains just the success message. But now it includes a full list of generated files, it states that "npm install" was already executed and it instructs how to prevent those coding errors. Basically, the MCP server response added further updated instructions to the conversation context.

Exactly the same principle was applied in this new Joule feature. While there is no autonomous agent loop in this case which would inspect the new files, the knowledge which files were created can be valuable for the conversation with the user. And while the/ui5-create-app command doesn't modify any code after app creation (thus avoiding the coding issues), facts like whether "npm install" was already executed, or whether the created UI5 Table in the MainView is lacking any columns, are useful for giving the user hints how to continue. Therefore, the context is extended by adding a hidden message to the conversation history.

Traditional coding has its place(s)

In addition to the process of context collection, deterministic coding is also used after the app has been accepted by the user for making the app consumption as smooth as possible. When inside a CAP project, it for example ensures that the cds-plugin-ui5 is added as dependency. This allows the UI5 tooling, including TypeScript transpilation of the UI5 app when needed, to run as part of the "cds watch" or "npm start" script of the CAP project itself.

Also, this dependency and all the UI5 app dependencies need to be installed. Unfortunately, there is a wide range of options and specific setups which might be used for dependency management in the already existing app. Probably npm? With or without workspaces? yarn? pnpm? Others? The code detects what is used and tries to cover the 95% case. The initial setup might not be complete in every scenario, but for most users it will “just work,” providing a good developer experience.

AI is fine and all, but sometimes one has to go the extra mile and do some coding.

Key takeaways

Use deterministic code where reasonable (because the space of possibilities is bounded and a deterministic and quick result is beneficial) .
Use LLMs for language understanding or dealing with an unpredictable range of possible requests.
Don't try to "program" the LLM with an if/else prompt, but treat it like an intelligent human: state the goal, options and boundaries—and let it decide on its own.
Provide solid pre-collected context so the LLM can make good decisions reliably.

P.S.:

For those who prefer graphics over text to gain an understanding of something, here is a depiction of the overall information flow inside this feature.

SAP Community - SAPUI5

SAPUI5 TreeTable: Expand All Children of Selected Nodes

Introduction

Why This Is Useful

My Approach

Implementation

Controller (CatalogHierarchy.controller.js)

Things to Watch Out For

Wrap Up

What's new in SAP Cloud Application Programming Model – September 2025

How to speed up UI development process using UI5 web components

Steps to create a React application deployable in BTP and using UAA and Destination services

Create Basic Multitarget Application

Create an Approuter module

Change xs-security.json to allow the local app-router to manage authentication

Crate a React Vite project

Properly setup Vite project

Edit mta.yaml file

Build and deploy the project

Setup the app router module to manage both the productive and the development app execution

Create a dev folder in the module

Adjust the xs-app.json for the productive usage

Optimize the mta building procedure

Test the app in dev mode

Test the app in productive mode

New tutorial for UI5 Middleware FE Mockserver

Why this tutorial matters

What you’ll learn (exercise overview)

How to get started

Session context

Links

SAP BTP Developer's Guide: Extending Fiori Elements with the Flexible Programming Model

What is the Flexible Programming Model ?

Complementary Development Approaches

Enterprise-Grade Development on SAP BTP

Conclusion

Get familiar with SAP Fiori development portal and the power of the building blocks (2 of 6)

Exploring the Portal's Structure

The Power Behind Every Building Block

Hands-On Exploration Made Easy

What's Next

SAP TechEd Berlin 2025: Analyze and optimize front-end application performance

Local annotations example for SAPUI5 smart control

PresentationVariant Annotation

FilterRestrictions Annotation:

Common.FieldControl:

Common.Text and UI.TextArrangement Annotations:

UI.HiddenFilter Annotation:

SAP UI5 application to Export Data to spreadsheet from SAP UI5 tree table (sap.ui.table.TreeTable)

Exciting UX talks at TechEd – Virtual, or meet us in Berlin and On The Road (USA, India, Australia)

TechEd Virtual

TechEd Berlin (and Bangalore)

Cloud Applications - Product and User Experience

Application Development and Automation

Usability Testing sessions on-site in Berlin

TechEd On Tour USA

TechEd On Tour Australia

Usage of standard Workflow Steps reuse library in your custom free-styled Fiori apps

View

Controller

Explore the potential of SAP Fiori development portal using complex building blocks (3 of 6)

SAP User Experience Update: What’s New for SAP S/4HANA 2025 (Private Cloud and On-Premise)

UX Updates for Consistent and Integrated Business Suite

Entry Points

Web Central Access

Design Updates for Suite Consistency

Navigation Menu: Side Navigation

New Shell Bar – need to switch it on!

Updated User Menu

Updated Notifications Design

New Illustrations Design

Web Access: My Home and SAP Fiori Launchpad

My Home

To-Dos Enhancements

Intelligent Homepage Experience

Manage News Application

SAP Fiori Launchpad

Automatic high-contrast and dark-mode detection, also for custom themes

Hiding empty pages and spaces

Improved About Dialog for Application Information

Controller (`CatalogHierarchy.controller.js`)