SAP Community - SAPUI5

Utilising the dynamic SVG within a SAP UI5 application

2026-01-01T16:18:55.060000+01:00

Hello UI5 Developers,

The case being explained here may not be encountered frequently in UI5 development. We are all familiar with the use of SVGs in frontend applications. However, the case under analysis will concern dynamic SVGs. Dynamic SVGs have internal attributes and properties that depend on global CSS variables. The standard implementation will not yield the desired results either in rendering the SVG or in ensuring compatibility with all themes.

I will explain this case in the context of our project requirements.

Below is the SVG that uses the CSS variables for the linear gradient.

<svg width="306" height="67" viewBox="0 0 306 67" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path opacity="0.9" d="M224 0H89V67H156.5L224 0Z" fill="url(#paint0_linear_2040_121992)" />
    <path opacity="0.6" d="M290 0H230V30H260L290 0Z" fill="url(#paint1_linear_2040_121992)" />
    <path opacity="0.4" d="M81 0H0V40H40.5L81 0Z" fill="url(#paint2_linear_2040_121992)" />
    <defs>
        <linearGradient id="paint0_linear_2040_121992" x1="83.5497" y1="67" x2="201.283" y2="-5.15128" gradientUnits="userSpaceOnUse">
            <stop offset="0.0158962" style="stop-color: var(--sapShell_Category_1_Background)" />
            <stop offset="0.550349" style="stop-color: var(--sapShell_Category_1_Background)" />
            <stop offset="1" style="stop-color: var(--sapShell_Category_9_Background)" />
        </linearGradient>
        <linearGradient id="paint1_linear_2040_121992" x1="227.578" y1="30" x2="280.115" y2="-1.95849" gradientUnits="userSpaceOnUse">
            <stop offset="0.0158962" style="stop-color: var(--sapShell_Category_1_Background)" />
            <stop offset="0.550349" style="stop-color: var(--sapShell_Category_1_Background)" />
            <stop offset="1" style="stop-color: var(--sapShell_Category_9_Background)" />
        </linearGradient>
        <linearGradient id="paint2_linear_2040_121992" x1="-3.27019" y1="40" x2="67.1769" y2="-3.38846" gradientUnits="userSpaceOnUse">
            <stop offset="0.503258" style="stop-color: var(--sapShell_Category_1_Background)" />
            <stop offset="0.503258" style="stop-color: var(--sapShell_Category_1_Background)" />
            <stop offset="1" style="stop-color: var(--sapShell_Category_9_Background)" />
        </linearGradient>
    </defs>
</svg>

Reason for SVG not rendering as expected,

The primary reason an SVG may not be able to fetch CSS variables in an SAPUI5 application is due to scoping issues, specifically when the SVG is loaded as an external resource (e.g., using an <img> tag or <use> element) or if there are conflicts with the SAPUI5's theming infrastructure.

The common problem and solution would be

Problem: If the SVG is referenced using an external file (e.g., <img src="icon.svg"> or <use xlink:href="images/arrow.svg#arrowLeft"></use>), the browser treats the SVG as an entirely separate document or scope. It cannot access the CSS variables defined in the main HTML document's CSS.

Solution: You must use inline SVG directly within your HTML or UI5 control's renderer. This places the SVG elements within the same DOM and CSS scope as the rest of your application, allowing them to inherit or access the CSS variables defined in the main application's stylesheet.

If the SVG is static, then directly using it inline will fetch the CSS variables, as the SVG will be in the global scope.

If the SVG is dynamic (requiring the SVG to adapt to the change in themes), then the static option won't be useful. This requires a unique and simple implementation in the controller file.

JavaScript Dynamic Injection from Controller file (Recommended)

In respective controller file, yourComponentName.controller.js

onAfterRendering: function () {
            // Post-rendering logic for header controller for rendering SVG in the background
            this._setBackgroundImageSVG();
        },

// Other methods

_setBackgroundImageSVG: function() {
    const vbox = this.byId("headerSearchContentVBox");
    if (vbox) {
        const domRef = vbox.getDomRef();
        if (domRef) {
            // Get CSS variable values
            const computedStyle = getComputedStyle(document.documentElement);
            const color1 = computedStyle.getPropertyValue('--sapShell_Category_1_Background').trim();
            const color9 = computedStyle.getPropertyValue('--sapShell_Category_9_Background').trim();
            
            // Create SVG with resolved colors
            const svgMarkup = `<svg width="306" height="67" viewBox="0 0 306 67" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path opacity="0.9" d="M224 0H89V67H156.5L224 0Z" fill="url(#paint0_linear)" />
                <path opacity="0.6" d="M290 0H230V30H260L290 0Z" fill="url(#paint1_linear)" />
                <path opacity="0.4" d="M81 0H0V40H40.5L81 0Z" fill="url(#paint2_linear)" />
                <defs>
                    <linearGradient id="paint0_linear" x1="83.5497" y1="67" x2="201.283" y2="-5.15128" gradientUnits="userSpaceOnUse">
                        <stop offset="0.0158962" stop-color="${color1}" />
                        <stop offset="0.550349" stop-color="${color1}" />
                        <stop offset="1" stop-color="${color9}" />
                    </linearGradient>
                    <linearGradient id="paint1_linear" x1="227.578" y1="30" x2="280.115" y2="-1.95849" gradientUnits="userSpaceOnUse">
                        <stop offset="0.0158962" stop-color="${color1}" />
                        <stop offset="0.550349" stop-color="${color1}" />
                        <stop offset="1" stop-color="${color9}" />
                    </linearGradient>
                    <linearGradient id="paint2_linear" x1="-3.27019" y1="40" x2="67.1769" y2="-3.38846" gradientUnits="userSpaceOnUse">
                        <stop offset="0.503258" stop-color="${color1}" />
                        <stop offset="0.503258" stop-color="${color1}" />
                        <stop offset="1" stop-color="${color9}" />
                    </linearGradient>
                </defs>
            </svg>`;
            
            // Encode and set as background
            const encoded = encodeURIComponent(svgMarkup);
            domRef.style.setProperty('--before-content', `url('data&colon;image/svg+xml,${encoded}')`);
        }
    }
}

View file: yourComponentName.view.xml

<mvc:View 
    xmlns:core="sap.ui.core" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns:m="sap.m" 
    xmlns:f="sap.f"
    controllerName="your.project.name.controller.YourComponentController">
    
    <m:VBox 
        id="headerSearchContentVBox" 
        class="headerSearchVBox" 
        width="100%"
        justifyContent="Center">
        <m:SearchField 
            id="headerMainSearchField"
            enableSuggestions="true"
            class="exampleSearchField sapUiSmallMargin"/>    
    </m:VBox>
    
</mvc:View>

I will be placing this SVG in the pseudo-element associated with the VBox bearing the id headerSearchContentVBox.

CSS file: css/style.css

.headerSearchVBox {
    /* Other CSS properties as per your use case */

    position: relative;
    background-color: var(--sapShell_Category_1_Background); 
    width: 100%; 
    height: 4.25rem; 
    border-width: var(--sapElement_BorderWidth); 
    border-style: solid; 
    border-color: var(--sapTile_BorderColor); 
    border-radius: var(--sapTile_BorderCornerRadius); 
    overflow: hidden; 
    text-align: right;
    box-sizing: border-box;

    padding: var(--sapUiSmallMargin) var(--sapContent_Space_Small);
}

.headerSearchVBox::before {
    content: var(--before-content, url(../images/SearchBackground.svg));
    position: absolute;
    top: 0;
    right: 1rem;
    width: 19.125rem;
    height: 4.1875rem;
    pointer-events: none;
}

The content property is set to var(—before-content, url(../images/SearchBackground.svg)). As previously stated, the encoded SVG is assigned to the before-content property in the controller. To enhance user experience, the SVG is directly loaded with a fallback color. If an error occurs, it will render with the provided color or the default browser color, which is black.

The primary function of dynamic SVG is to synchronize with changing themes. This can be enabled by subscribing to the event, which is fired when the theme is changed, i.e., the themeChanged event. Whenever the theme is changed,

1. Listen to this event in onInit method of same controller file

2. Call the SVG update function when the theme is changed.

3. Remove the listener attached in the onInit method from the onExit method.

// Import sap.ui.core.Core library

onInit: function () {
            // Attach theme change listener to update SVG colors
            this._onThemeChangedHandler = this._setBackgroundImageSVG.bind(this);
            Core.attachThemeChanged(this._onThemeChangedHandler);
        },

onExit: function () {
            // Clean up theme change listener
            if (this._onThemeChangedHandler) {
                Core.detachThemeChanged(this._onThemeChangedHandler);
            }
        },

This will facilitate the development of the UI using dynamic SVG within the UI5 framework, making it more straightforward and efficient.

The content below is newly added on request by @RaminS (thank you for highlighting)

Snippet: If the dynamic SVGs are used directly in XML or through CSS,

The SVG file did not locate the CSS variables present on the page, as it was created in a different stacking context. Consequently, it used the default color, black.

Once the dynamic SVGs are loaded via the controller file as previously mentioned, the rendering of the background would be as follows.

Regards,

Sanket Zad

Implementation Guide: Integrating the UI5 Spreadsheet Importer in a FIORI Application

2026-01-02T13:41:22.383000+01:00

1.0 Introduction to the UI5 Spreadsheet Importer

The Spreadsheet Importer offers several strategic advantages that make it an invaluable tool for modern FIORI development:

Seamless Data Integration: It allows applications to read and process Excel files directly on the front end, eliminating cumbersome manual data entry and reducing the risk of errors. A key benefit is its independence from the specific backend OData service implementation, making it compatible with both Cloud Application Programming Model (CAP) and ABAP RESTful Application Programming Model (RAP) scenarios.
Out-of-the-Box Functionality: The component supports standard spreadsheet formats (.xls and .xlsx) and utilizes the robust SheetJS library to parse file data within the browser. This avoids sending large binary files to the backend. It automatically converts spreadsheet data into the required OData format for seamless communication with your SAP system.
Productivity Improvements: With an intuitive interface and straightforward configuration, the component requires minimal coding effort from developers. It supports every type of OData service (SEGW, RAP, and CAP), accelerating development cycles and improving the efficiency of business processes.
Community and Security: As a well-regarded open-source tool, the Spreadsheet Importer benefits from strong community support on GitHub, ensuring it is well-documented and continuously improved. It maintains high security standards with no known vulnerabilities reported in recent audits.
Proven Track Record: The component has been successfully adopted by numerous SAP developers across the ecosystem. Its reliability is underscored by its implementation as an extension in a standard SAP banking application, proving its scalability for mission-critical enterprise environments.

Before beginning implementation, it is essential to understand the specific licensing and versioning requirements associated with this component.

2.0 Critical Prerequisites: Licensing and Version Control

Adhering to the correct licensing and versioning requirements is a critical prerequisite for any implementation. This ensures full compliance with open-source software policies and guarantees the long-term stability and supportability of your application.

The component is available under two distinct licensing models, and it is mandatory to use the approved version.

Version	Licensing and Usage Details
Version 1.x (e.g., 1.7.4)	Licensed under Apache 2.0. This is the free-of-charge Community Edition.
Version 2.0.0 and above	Requires a commercial license.

Mandatory Version

To ensure consistency and compliance across all projects, a specific version has been mandated for all development.

The required and approved version for all implementations we have used in this article - 1.7.4.

With these prerequisites established, we can proceed with the technical steps required for integration.

3.0 Step-by-Step Implementation Workflow

Integrating the Spreadsheet Importer into a FIORI Element application involves five core steps. This workflow covers modifications to the UI manifest, the implementation of controller logic, and the necessary configurations for the project's dependencies and build scripts.

3.1 Step 1: Add the Custom "Excel Upload" Action

The first step is to add a custom action button to the List Report page. This is accomplished by extending the view controller within the application's manifest.json file.

Add the following "extends" block to your manifest.json:

"extends": {
  "extensions": {
    "sap.ui.controllerExtensions": {
      "sap.suite.ui.generic.template.ListReport.view.ListReport": {
        "controllerName": "<yournamespace>.doerategrp.ext.controller.ListReportExt",
        "sap.ui.generic.app": {
          "rateGroupSet": {
            "EntitySet": "rateGroupSet",
            "Actions": {
              "excelUpload": {
                "id": "excelUploadButton",
                "text": "Excel Upload",
                "press": "openSpreadsheetUpload",
                "requiresSelection": false
              }
            }
          }
        }
      }
    }
  }
}

This configuration achieves the following:

"controllerName": Specifies the custom controller extension file that will contain the button's logic.
"id": "excelUploadButton": Assigns a unique ID to the new button control.
"text": "Excel Upload": Sets the display text for the button on the UI.
"press": "openSpreadsheetUpload": Defines the event handler function that will be called when the user clicks the button.

Pro-Tip: The controllerName (com.deere.doerategrp.ext.controller.ListReportExt) and the EntitySet key (rateGroupSet) are specific to this example. You must update these values to match your project's namespace and the target OData EntitySet for the table you are extending.

3.2 Step 2: Configure the Controller Extension (`ListReportExt.controller.js`)

Next, you must implement the openSpreadsheetUpload event handler defined in the manifest.json. This function will reside in your custom controller extension file, ListReportExt.controller.js.

Use the following code to implement the function. It is important to only use the openSpreadsheetUpload function as provided; other methods mentioned in the source documentation, such as attachChangeBeforeCreate and attachUploadButtonPress, may not be usable and should be ignored.

sap.ui.define(["sap/m/MessageToast"], function (MessageToast) {
    'use strict';

    return {
        openSpreadsheetUpload: async function (oEvent) {
            MessageToast.show("Spreadsheet upload initiated.");
            this.getView().setBusyIndicatorDelay(0);
            this.getView().setBusy(true);
            this.spreadsheetUpload = await this.getView()
                .getController()
                .getOwnerComponent()
                .createComponent({
                    usage: "spreadsheetImporter",
                    async: true,
                    componentData: {
                        context: this,
                        columns: ['shippingPoint', 'destRegion', 'matFrtGroup', 'shippingType', 'validFrom', 'validTo', 'rateGroups'],
                        mandatoryFields: ['shippingPoint', 'destRegion', 'matFrtGroup', 'shippingType', 'validFrom'],
                        showBackendErrorMessages: true,
                        continueOnError: true,
                        useTableSelector: false,
                        addArrayToMessages: true,
                        strict: true,
                        tableId: "<yournamespace>.doerategrp::sap.suite.ui.generic.template.ListReport.view.ListReport::rateGroupSet--responsiveTable",
                        sampleData: [{
                            shippingPoint: 'HX1C',
                            destRegion: 'MD',
                            matFrtGroup: 'OMFR0005',
                            shippingType: '10',
                            validFrom: '9999-12-31',
                            validTo: '9999-12-31',
                            rateGroups: 'RT002'
                        }]
                    },
                });
            
            await this.spreadsheetUpload.triggerInitContext();
            
            this.spreadsheetUpload.openSpreadsheetUploadDialog();
            this.getView().setBusy(false);
        }
    };
});

The componentData object is used to configure the importer's behavior. Key parameters include:

columns: An array of strings defining the OData property names that correspond to the columns in the spreadsheet.
mandatoryFields: An array of strings specifying which columns must contain data for a row to be considered valid.
tableId: The full ID of the target table in the List Report where the data will be inserted. You can find this ID by inspecting the table element in your browser's developer tools. It must be the complete, stable ID for the target sap.m.Table or sap.ui.table.Table.
sampleData: Provides a sample data row that can be used to generate a downloadable template for users.

3.3 Step 3: Define Component Dependencies in `manifest.json`

The application manifest must be updated to declare its dependency on the Spreadsheet Importer component. This allows the UI5 framework to locate and load the component's resources.

Add the following componentUsages and resourceRoots configurations to your manifest.json:

"componentUsages": {
  "spreadsheetImporter": {
    "name": "cc.spreadsheetimporter.v1_7_4"
  }
},
"resourceRoots": {
  "cc.spreadsheetimporter.v1_7_4": "./thirdparty/customcontrol/spreadsheetimporter/v1_7_4"
},

The key spreadsheetImporter is a local alias defined for this component's usage. This alias is what you will use to reference the component within your application's controller code. The resourceRoots path shown here is configured for local development and testing within SAP Business Application Studio (BAS). This path will be adjusted for deployment to an on-premise system, as detailed later in this guide.

3.4 Step 4: Update Project Dependencies in `package.json`

To enable local development, testing, and builds, the Spreadsheet Importer component must be added as a dependency in the project's package.json file.

Add the following line to the dependencies section of your package.json:

// In your package.json, add the following to "dependencies":
"ui5-cc-spreadsheetimporter": "^1.7.4"

3.5 Step 5: Configure the Build Script

The final configuration step is to modify the build script in package.json to ensure that all dependencies, including the custom component, are correctly processed during the build.

Add the --all flag to the "build" script command:

"build": "ui5 build --config=ui5.yaml --all --clean-dest --dest dist",

With the application now fully configured for local development and testing, the next crucial phase is to prepare it for deployment to a production-like on-premise environment, which follows a specific, centralized strategy.

4.0 On-Premise Deployment Strategy

For on-premise landscapes, a centralized deployment model for the Spreadsheet Importer component is mandatory. This model leverages a single, pre-existing instance of the component that has been deployed centrally as a BSP application. This simplifies individual application deployments, as you only need to reference this central component rather than deploying it with every application.

4.1 Understanding the `resourceRoots` Path for Deployed Applications

The resourceRoots path in the manifest.json file is environment-specific. The path used for local development in BAS is different from the one required for a deployed application running on the FIORI Launchpad.

Environment	`resourceRoots` Path in `manifest.json`
BAS / Local Development	`"./thirdparty/customcontrol/spreadsheetimporter/v1_7_4"`
On-Premise Deployment	`"./thirdparty/customcontrol/spreadsheetimporter/v1_7_4"`

The path for the deployed application points to a centrally available BSP application named ZVA0_EXL_UPD. This BSP application already contains the approved version 1.7.4 of the Spreadsheet Importer component, making it available to all other FIORI applications on the same system.

4.2 Recommended Deployment Configuration for Consistency

To avoid manually changing the resourceRoots path in manifest.json before each deployment, the recommended best practice is to update the build configuration. By excluding certain development-only files from the deployment package, you can maintain a single, consistent manifest.json for both local and deployed environments.

Update your ui5-deploy.yaml file to exclude TypeScript (.ts, .ts.map) and JavaScript map (.js.map) files from the deployment artifact.

- name: deploy-to-abap
  afterTask: generateCachebusterInfo
  configuration:
    target:
      # ... target system details
    app:
      # ... application details
    exclude:
      - /test/
      - .*\.ts
      - .*\.ts.map
      - .*\.js.map

This approach is critical for robust development and deployment pipelines, as it eliminates the need for error-prone manual modifications to the manifest.json file between environments. The local resourceRoots path is automatically ignored during deployment, and the relative path to the central BSP is correctly resolved when the application runs on the FIORI Launchpad.

5.0 Troubleshooting and Known Issues

While the integration process is generally straightforward, developers should be aware of a known issue that may occur during the deployment from SAP Business Application Studio to an on-premise system.

When deploying an application that uses the Spreadsheet Importer component, the deployment process in BAS may report a failure. However, in most cases, the BSP application is still created or updated successfully in the backend ABAP system. This behavior is a known open issue that has been reported to SAP.

For more details on this issue, please refer to the SAP Community discussion: Error when deploying UI5 app (sapui5 library/component used in application)

If you encounter this error, verify the status of the BSP application directly in the backend system before attempting to redeploy.

6.0 Final Validation

The final step is to verify that the Spreadsheet Importer component is fully functional in the target environment.

After a successful deployment, launch your application from the SAP FIORI Launchpad. You should see the "Excel Upload" button on the List Report page. Clicking this button should open the spreadsheet import dialog, confirming that the integration was successful and is ready for users to begin the data import process.

7.0 Appendix: Key Resources

For further information, detailed documentation, and community support, please refer to the following resources:

Official GitHub Repository: ui5-cc-spreadsheetimporter
Live Demo Launchpad: Spreadsheet Importer Live Demo
NPM Package: ui5-cc-spreadsheetimporter
Yeoman Generator: generator-ui5-cc-spreadsheetimporter
Official Documentation: Spreadsheet Importer Docs
Example Applications: Code Samples
wdi5 Tests: Test Examples

Simplifying UI5 Library Use on BTP by Bundling Libraries at Build Time

2026-01-10T23:27:11.400000+01:00

Background: Reusing UI5 Libraries on SAP BTP

When using a custom UI5 library on SAP BTP, the most common approach is to deploy the library source first and then consume it from other applications.

Based on previous blogs and samples, there are two established approaches, which can be broadly categorized into an older and a newer approach.

Approaches Without CDM (older approach)

Shared Destination Instance: In this approach, the library and the consuming applications share the same destination service instance (blog 1).
Separate Destination Instances per Application: Each application uses its own destination service instance, and the consuming application explicitly defines destinations for the library (HTML5 app repo host and UAA) (blog 2).

Approaches with CDM (newer approach)

Library as Content Provider: When using CDM, the library defines a content provider destination and a cdm.json file containing skeleton definitions for catalogs, groups, and roles. The consuming application depends on the library's HTML5 app repo host (blog 3).

Benefits and Limitations of Deploying Libraries Independently

Deploying the library source as an independent artifact has a clear advantage: when the library changes, it needs to be fixed or updated in only one place.

However, this approach makes the deployment of consuming applications more complex. The application's mta.yaml requires additional, library-specific configuration. This complexity is manageable when only a single shared library is used, but it increases significantly when multiple independent libraries are involved.

Using CDM can reduce this complexity. However, CDM is primarily intended for defining the layout and content structure in SAP Build Work Zone from the application side, and in my opinion, it is more suitable for SaaS-oriented solutions. Therefore, it does not fit well with workflows where application developers implement the apps, while a separate authorization or platform team designs and manages the Work Zone contents.

An Alternative Approach: Bundling the Library at Build Time

In this blog, a different approach is introduced: bundling the library source directly into the consuming application at build time and deploying them together. The main advantages of this approach are simpler application configuration and the removal of dependencies on resources defined by the library, such as destinations or HTML5 app host service instances.

The main drawback is that when the library changes, each consuming application must be redeployed individually. On the other hand, this also has a positive side effect: incompatible changes in the library can be introduced without impacting existing applications that rely on older versions.

Developing and Deploying Applications with a Bundled UI5 Library

The following sections describe how to develop an application by bundling a UI5 library directly into the consuming application.

Prerequisites

SAP Fiori tools is installed in Visual Studio Code.

Steps Overview

Create the UI5 library
Create an application that consumes the library
Configure the project for deployment
Build and Deploy

1. Create the UI5 library

Open the Command Pallete and select "Fiori: Open Reusable Library Generator".

Fill the project details as shown below.

Clean Up the Generated Library

Under the /src/<namespace>/<libraryname> folder, remove all sample content except for the following files:

.library
library.ts
messagebundle.properties

After the cleanup, the folder structure should look like the image below.

Replace the Example Controller Logic

The generated library.ts file contains example controller logic that is not required for this scenario. Replace its content with the implementation provided in the following GitHub repository:

https://github.com/miyasuta/fiori-use-library-blog/blob/main/com.myorg.reuselib/src/com/myorg/reuselib/library.ts

This sample library provides a dialog with controller logic attached.

The complete implementation can be found here:

https://github.com/miyasuta/fiori-use-library-blog/tree/main/com.myorg.reuselib/src/com/myorg/reuselib

Since the project uses TypeScript, make sure to build the library after applying the changes:

npm run build

2. Create an Application That Consumes the Library

Next, create a UI5 application that consumes the library.

Generate the application

Open the Application Generator and select the "Basic" template (other templates such as List Report can also be used).

Enter the project details. Select both "Add Deployment Configuration" and "Add SAP Fiori Launchpad Configuration".

For the deployment configuration:

Select Cloud Foundry as the target
Select "Add Application to Managed Application Router", since the app will run on SAP Build Work Zone

Configure the SAP Fiori Launchpad settings as shown below.

Add a Reference to the Library

Now that both the library and the consuming application exist, connect them.

Open the Command Pallete and select "Fiori: Add Reference to SAP Fiori Reusable Libraries".

Select the project folder path (consumerapp) and the library.

This action adds entries to manifest.json, ui5.yaml, and ui5-local.yaml.

manifest.json

  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.143.2",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "com.myorg.reuselib": {
          "lazy": false
        }
      }
    },

ui5.yaml / ui5-local.yaml

By default, the src path does not point to dist. Because the library is implemented in TypeScript, it is adjusted to reference the compiled output in the dist folder.

    - name: fiori-tools-servestatic
      beforeMiddleware: fiori-tools-proxy
      configuration:
        paths:
          - path: /resources/com/myorg/reuselib
            # src: ../com.myorg.reuselib/src/com/myorg/reuselib
            src: ../com.myorg.reuselib/dist/resources/com/myorg/reuselib
            fallthrough: false

To ensure that TypeScript recognizes the library's type definitions, add the following to tsconfig.json:

  "include": [
    "./webapp/**/*",
    "../com.myorg.reuselib/dist/index.d.ts"
  ]

Use the Library in the Application

Now the library can be used in the application locally.

In this example, a button is placed on the UI. When pressed, it opens a dialog defined in the library. After the user presses OK, a callback is triggered, allowing the consuming application to execute its own logic.

View

<mvc:View controllerName="miyasuta.consumerapp.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <Button id="pressMeButton" text="Press Me" press="onOpenDialog" />
    </Page>
</mvc:View>

Controller

import Controller from "sap/ui/core/mvc/Controller";
import MyDialogHanlder, { MyDialogHandler$SubmitEvent } from "com/myorg/reuselib/controller/MyDialogHandler";
import MessageToast from "sap/m/MessageToast";

/**
 *  miyasuta.consumerapp.controller
 */
export default class View1 extends Controller {

    /*eslint-disable @typescript-eslint/no-empty-function*/
    public onInit(): void {

    }

    public onOpenDialog(): void {
        const dialogHandler = new MyDialogHanlder();
        dialogHandler.attachSubmit((event: MyDialogHandler$SubmitEvent) => {
            const message = event.getParameter("message");
            MessageToast.show(`Dialog submitted with message: ${message}`);
        });
        dialogHandler.open();

    }
}

3. Configure the Project for Deployment

This section describes the key configuration required to bundle the library source into the consuming application at build time.

3.1 Library Project Configuration

ui5.yaml

Update metadata.name to include the full namespace:

metadata:
  # name: "reuselib"
  name: com.myorg.reuselib

Add a resources section to the builder configuration to exclude test resources from the build:

builder:
  resources:
    excludes:
      - "/test-resources/**"

The complete builder section will look like this:

3.2 Application Project Configuration

package.json

Add the library as a dependency and specify the version in the library's package.json.

  "dependencies": {
    "com.myorg.reuselib": "^1.0.0"
  },

ui5-deploy.yaml

Configure the builder to include the library dependency during the build:

builder:
  settings:
    includeDependency:
      - com.myorg.reuselib

Add includeDependencies to the ui5-task-zipper configuration so that the library resources are included in the final ZIP archive:

    - name: ui5-task-zipper
      afterTask: generateCachebusterInfo
      configuration:
        ...
        includeDependencies:
          - com.myorg.reuselib
        ...

The complete builder section will look like this:

xs-app.json

Add the following route to ensure that library resources are served from the application instead of the UI5 CDN.

    {
      "source": "^/resources/com/myorg/reuselib/(.*)$",
      "target": "/resources/com/myorg/reuselib/$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    },

manifest.json

Add resourceRoots so that the library can be resolved when launched from SAP Build Work Zone:

  "sap.ui5": {
    "flexEnabled": true,
    "resourceRoots": {
      "com.myorg.reuselib": "./resources/com/myorg/reuselib"
    }

index.html

Add the library to data-sap-ui-resource-roots so that it can be resolved when running from the HTML5 Application Repository:

        data-sap-ui-resource-roots='{
            "miyasuta.consumerapp": "./",
            "com.myorg.reuselib": "./resources/com/myorg/reuselib"
        }'

4. Build and Deploy

Run the following command in the consuming application project:

npm run build:mta

Verify that the library resources are included under the dist/resources folder.

Deploy the application to Cloud Foundry:

npm run deploy

Finally, verify that the application can be launched successfully from both the HTML5 Application Repository and SAP Build Work Zone.

Conclusion

Reusing UI5 libraries on SAP BTP offers multiple established patterns, but these often introduce additional deployment complexity for consuming applications.

This blog presented an alternative approach: bundling the UI5 library source into the consuming application at build time. While this approach requires changes across several configuration files, all adjustments remain application-scoped, reducing cross-project dependencies and overall complexity.

This approach is not intended to replace existing patterns, but to provide a pragmatic option for scenarios where applications are developed and deployed independently.

SAP UI5 - QUnit-Testing

2026-01-11T23:36:30.594000+01:00

In this post, I share practical experience with QUnit tests from my UI5 projects.
This post is aimed at developers who are already familiar with SAP UI5 and just getting started with QUnit. It was originally intended as an onboarding guide, but I noticed that information on this topic is quite scattered.
The examples in this post are kept close to real project code and can also be used as a reference when implementing similar test cases.

1. Setup

1.1 Installing the required libraries

To implement and execute QUnit tests in a UI5 application, just a few libraries are needed.
We just add them to the dependencies section of the application's package.json.

Depending on the project, either a specific version or simply latest can be used.

For later test coverage analysis (see section 3. Running Tests & Coverage), an additional library should be included:

This library also needs to be added to the ui5.yaml under "server>customMiddleware>".

After adding the required libraries, they can be installed using:

npm install

1.2 Folder structure

The folder structure for the unit tests is quite simple and is set up as follows:

- webapp
   - test
      - unit
         AllTests.js
         unitTests.qunit.html
         unitTests.qunit.js

The actual test files should ideally follow a structure similar to the application itself.
This not a rule -> just for readability
For example, if unit tests are required for BaseController.js, a corresponding folder controller and a file BaseController.js should be created inside the test directory:

- webapp
   - controller
      BaseController.js

   - test
      - unit
         - controller
            BaseController.js

1.2.1 AllTests.js

All QUnit tests to be executed are included in the define section of this file.
It is a central place where we can enable or disable tests for execution.

sap.ui.define([
    "./controller/BaseController",
    // "./controller/OtherController",
    // "./controller/OtherController2",
    // "./services/SampleService",
    // "./util/SampleFormatter",
], function () {
    "use strict";
});

(Tip)

When working on unit tests for a specific controller an running them frequently, tests for other controllers can be commented out here, so they are not executed each time.

1.2.2 unitTests.qunit.html

Short and simple: we start our tests using this file.
All required libraries for test execution are included here.

<!DOCTYPE html>
<html>
<head>
    <title>Unit tests for Template</title>
    <meta charset="utf-8">

    <script id="sap-ui-bootstrap"
        src="../../../../resources/sap-ui-core.js"
        data-sap-ui-resourceroots='{
            "app.unittester": "../"
        }'
        data-sap-ui-async="true"
        data-sap-ui-preload="async">
    </script>

    <link rel="stylesheet" type="text/css" href="../../../../resources/sap/ui/thirdparty/qunit-2.css">

    <script src="../../../../resources/sap/ui/thirdparty/qunit-2.js"></script>
    <script src="../../../../resources/sap/ui/qunit/qunit-junit.js"></script>
    <script src="../../../../resources/sap/ui/thirdparty/sinon.js"></script>
    <script src="../../../../resources/sap/ui/thirdparty/sinon-qunit.js"></script>

    <script src="../../../../resources/sap/ui/qunit/qunit-coverage-istanbul.js"
        data-sap-ui-cover-only="app/unittester/"
        data-sap-ui-cover-never="app/unittester/test, app/unittester/localServices, app/unittester/services">
    </script>

    <script src="../../../../resources/sap/ui/thirdparty/sinon.js"></script>
    <script src="../../../../resources/sap/ui/thirdparty/sinon-qunit.js"></script>

    <script src="unitTests.qunit.js"></script>
</head>

<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
</body>
</html>

Just a few notes on the most important scripts that are included here (because we will use them later).

QUnit

<link rel="stylesheet" type="text/css" href="../../../../resources/sap/ui/thirdparty/qunit-2.css">
<script src="../../../../resources/sap/ui/thirdparty/qunit-2.js"></script>
<script src="../../../../resources/sap/ui/qunit/qunit-junit.js"></script>

(Roughly summarized) The actual QUnit framework is included here.

sinon and sinon-qunit

<script src="../../../../resources/sap/ui/thirdparty/sinon.js"></script>
<script src="../../../../resources/sap/ui/thirdparty/sinon-qunit.js"></script>

These libraries enable spying, stubbing and mocking dependencies.

qunit-coverage-istanbul.js (Code Coverage Integration)

<script src="../../../../resources/sap/ui/qunit/qunit-coverage-istanbul.js"
        data-sap-ui-cover-only="app/unittester/"
        data-sap-ui-cover-never="[
           app/unittester/test, 
           app/unittester/localServices, 
           app/unittester/services
        ]">
</script>

This is required later for code coverage.

(Note) In this post, we use Istanbul for code coverage.
Of course, other options such as Karma can also be used if desired.

Important attributes:

data-sap-ui-cover-only
files to be included in the coverage
data-sap-ui-cover-never
files and directories to be excluded from coverage

1.2.3 unitTests.qunit.js

This is the central entry point for the unit tests.
Here we only include the tests from AllTests.js in the define section and start the test run.

QUnit.config.autostart = false;

sap.ui.getCore().attachInit(function () {
    "use strict";

    sap.ui.require([
        "app/unittester/test/unit/AllTests"
    ], function () {
        QUnit.start();
    });
});

2. Implementing unit tests

In this example, we will look at some unit tests for the BaseController as well as the basic structure.
In addition, we will see how sinon can be used to handle dependencies.

2.1 Basic structure of a test module

Each module has its own tests and provides lifecycle hooks such as beforeEach and afterEach.
The modules can be structured freely, depending on the requirements.

We start with a test module for BaseController.js and implement the module in the test file.
(webapp>test>unit>controller>BaseController)

sap.ui.define([
	"app/unittester/controller/BaseController",
	"sap/ui/thirdparty/sinon",
	"sap/ui/thirdparty/sinon-qunit",
], function(BaseController) {
	"use strict";
	
	/**
	* Module
	*/
	QUnit.module("Module", {
	   beforeEach: function() {
		  this.oBaseController = new BaseController();
	   },
	   afterEach: function() {
		  this.oBaseController.destroy();
	   }
	});
	
});

First, we include the actual BaseController and the two sinon libraries in the define statement.

After that, the module itself:
The lifecycle functions of the module are executed before and after each test.
In order to test the functions of the BaseController, we instatiate it before the test and destroy it afterwards.

2.2 Simple Test using sinon.stub and sinon.spy

In our first test, we will take the getRouter function from our BaseController.

getRouter: function() {
	return this.getOwnerComponent().getRouter();
},

We only want to test whether the function can be executed.

However, it has two dependencies:
this.getOwnerComponent and its function getRouter.

In order to test getRouter without having to instantiate all dependencies, we will "simulate" them with sinon.

This would look like the following:

sap.ui.define([
	"app/unittester/controller/BaseController",
	"sap/ui/thirdparty/sinon",
	"sap/ui/thirdparty/sinon-qunit",
], function(BaseController) {
	"use strict";
	
	/**
	* Module
	*/
	QUnit.module("Module", {
	   beforeEach: function() {
		  this.oBaseController = new BaseController();
	   },
	   afterEach: function() {
		  this.oBaseController.destroy();
	   }
	});
	
	/**
	* BaseController - Check getRouter
	*/
	QUnit.test("BaseController - Check getRouter", function(assert) {
	   sinon.stub(this.oBaseController, "getOwnerComponent").returns({
		  getRouter: sinon.stub()
	   });

	   const fnSpy = sinon.spy(this.oBaseController, "getRouter");
	   this.oBaseController.getRouter();
	   assert.ok(fnSpy.calledOnce, "Check getRouter successful");
	});
	
});

The function flow:

In line 24, we create a stub for this.oBaseController (our controller instance) and listen for calls to the getOwnerComponent function.
As soon as this function is executed, a return value is "simulated" that provides another simulated function, getRouter.

After that, we create a spy for this.oBaseController, that listens for calls to the getRouter function.

Then comes the actual function call in line 29.

Finally, we use an assertion where we check (via fnSpy.calledOnce) whether getRouter was executed at least once within the function.

And that's basically it. Every following test has the same structure (sometimes more or less complex).

Running the test:
If we look at the coverage here now (more on this later), we can see that the function was executed exactly once:

2.3 Testing functions with Return Values or Promises

Many controller methods are asynchronous and return a Promise.

These tests are implemented using async and await.
Using await ensures that the test waits properly for execution to finish.

Example: onStartEditMode

onStartEditMode: async function () {
	try {
		this._fireSetViewBusy(true);
		await this.oDraftManager.onEdit();
	} catch (oError) {
		this.evaluateException(oError);				
	} finally {
		this._fireSetViewBusy(false);				
	}						
},

The corresponding test:

QUnit.test("BaseController - Start edit mode", async function (assert) {
	sinon.stub(this.oBaseController, "_fireSetViewBusy");
	sinon.stub(this.oBaseController, "evaluateException");

	this.oBaseController.oDraftManager = {
		onEdit: sinon.stub().returns(Promise.resolve(true))
	};		

	const fnSpy = sinon.spy(this.oBaseController, "onStartEditMode");
	await this.oBaseController.onStartEditMode();
	assert.ok(fnSpy.calledOnce, "onStartEditMode executed successfully");
});

2.4 Testing error cases and exceptions

Error cases are just as important as successful scenarios.

In this example, we provoke an error by not stubbing any dependencies, so the function runs into the error path.
This verifies that the error handling logic is executed correctly.

Example function onFullScreenPressed:

onFullScreenPressed: function() {
	try {
		this._fireSetLayout("MidColumnFullScreen");
		this.getOwnerComponent().getModel("util").setProperty(`/ViewControl/Layout`, "MidColumnFullScreen");
		return true;
	} catch (oError) {
		this.evaluateException(oError);
		return false;
	}
},

The test:

QUnit.test("BaseController - Check onFullScreenPressed Exception", async function(assert) {
	assert.notOk(await this.oBaseController.onFullScreenPressed(), "Check onFullScreenPressed Exception successful");
});

2.5 Larger example with more branches

A slightly larger example is the onCancel function, which is a bit more complex.

The function checks whether changes exist in the current draft.

Several paths (branches):
Changes exist: the user is shown a dialog, where they can decide whether to discard the draft
No changes: the draft is discarded
Error case: an error message is shown

onCancel:

onCancel: async function(oEvent) {
	try {
		const oData = this.getView().getBindingContext().getObject();

		//are there changes?
		if (oData.DraftEntityCreationDateTime.toString() !== oData.DraftEntityLastChangeDateTime.toString()) {
			const oSource = oEvent.getSource();
			this._openDiscardDraftDialog(oSource);
			return true;
		} else {
			//no changes, so discard the draft
			return Promise.resolve(await this.onDiscardDraft());
		}
	} catch (oError) {
		this.evaluateException(oError);
		return false;
	}
},

We will now test all paths to achieve full coverage.

1. onCancel with draft changes

/**
 * BaseController - Check onCancel (with draft changes)
 */
QUnit.test("BaseController - Check onCancel - with draft changes", async function(assert) {
	this.oBaseController.onDiscardDraft = sinon.stub().returns(Promise.resolve(true));
	sinon.stub(this.oBaseController, "_openDiscardDraftDialog");
	sinon.stub(this.oBaseController, "getView").returns({
		getBindingContext: sinon.stub().returns({
			getObject: sinon.stub().returns({
				DraftEntityCreationDateTime: 1,
				DraftEntityLastChangeDateTime: 2
			})
		})
	});
	const oMockButton = new Button();
	const oEvent = {
		getSource: function() {
			return oMockButton;
		}
	};

	assert.ok(await this.oBaseController.onCancel(oEvent), "Check onCancel (with draft changes) successful");
});

2. onCancel without changes

/**
 * BaseController - Check onCancel (no draft changes)
 */
QUnit.test("BaseController - Check onCancel - no changes", async function(assert) {
	this.oBaseController.onDiscardDraft = sinon.stub().returns(Promise.resolve(true));
	sinon.stub(this.oBaseController, "getView").returns({
		getBindingContext: sinon.stub().returns({
			getObject: sinon.stub().returns({
				DraftEntityCreationDateTime: 1,
				DraftEntityLastChangeDateTime: 1
			})
		})
	});

	assert.ok(await this.oBaseController.onCancel(), "Check onCancel (no draft changes) successful");
});

3. onCancel error case

/**
 * BaseController - Check onCancel Exception
 */
QUnit.test("BaseController - Check onCancel Exception", async function(assert) {
	assert.notOk(await this.oBaseController.onCancel(), "Check onCancel Exception successful");
});

When we now run the tests, we can see that we have covered all paths (branches):

3. Running tests and coverage

Unit tests can be executed in different ways.
In practice, running them via an npm script has proven to be the most convenient option.

3.1 Running tests

Unit tests can be started using a script defined in package.json:

The test run is then started using the following command:

npm run unit-tests

Once the tests are started, the browser opens and all tests (that are not commented out in AllTests.js) are executed automatically.

3.2 Test results in the QUnit interface

After the tests have been executed, an overview is displayed in the browser showing which tests were successful an which were not.
This is also indicated by colors and shown together with an error message.

Example:

Failed tests can also be inspected in the browser console.

3.3 Enabling code coverage

Code coverage can be enabled using the checkbox "Enable coverage" in the QUnit toolbar.

Once enabled, tests are re-run automatically and an interactive coverage overview is displayed below the test results.

In the coverage overview, we can see the tested controllers and the information about the coverage itself.

statements and lines
Shows which lines of code were executed during the tests.

functions
Indicates which functions were called at least once.

branches
Shows whether different execution paths (e.g. if/else, try/catch) were actually tested.

3.4 Detailed view of individual files

Clicking a file opens a detailed coverage view.

green lines were executed
red lines were not covered

3.5 Coverage reports

In addition to the browser view, a coverage report is generated under:
tmp/coverage-reports/html/index.html

Alternatevly, it can also be found in the IDE's project folder:

The report is updated automatically, can be opened in the browser independently.

4. Conclusion

With QUnit, we mainly focus on isolated controller logic and function behavior.
Therefore keeping functions cleanly encapsulated and dependencies low during development leads to much easier unit tests

A note on coverage:
I know that coverage percentages are often defined as targets.
I have also seen that the temptation to push these numbers can be quite high by starting to test trivial functions (e.g. getters or setters). This usually backfires sooner or later.
It makes much more sense to focus on testing critical logic, error cases and especially different paths and branches.

Using SAP UI5 & Public API to Build a Sudoku Game – A Learning Experiment

2026-01-14T19:53:09.152000+01:00

Application Approach
I followed the standard MVC structure in UI5.
The view displays a 9×9 Sudoku grid using sap.m.Input controls, while the controller manages the API calls, timer logic, and input validation.
Instead of introducing additional abstraction early on, I handled the Sudoku grid and game state directly inside the controller. Prefilled cells are rendered as non-editable, and empty cells accept user input.
Integrating the Sudoku API
The Sudoku puzzle is fetched from a public API when the application starts or when the user chooses to begin a new game. The API response is processed and the values are assigned to the corresponding input fields in the grid.
Initially, I noticed some UI flickering when updating values. This was caused by updating inputs multiple times inside a loop. After restructuring the logic to update each cell only once, the UI behavior became much smoother.
Timer Implementation
To make the game more engaging, I added a simple timer. The timer starts when the puzzle is loaded. Managing the timer inside a UI5 application helped me understand how asynchronous logic works alongside UI events.
Final Thoughts
This Sudoku game started as a small experiment but turned into a useful learning project. It showed me that SAP UI5 is flexible enough to handle interactive applications with real-time feedback.
I plan to continue improving it by refining the validation logic and adding small usability improvements as I keep learning UI5.
controller.js

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

    return Controller.extend("com.sudokuapi.controller.App", {
        timer: null,
        seconds: 0,
        cells: [],

        onInit() {
            this.onNewGame();
        },

        /* =================== NEW GAME =================== */
        onNewGame: function () {
            this.resetTimer();
            this.startTimer();

            fetch("https://sugoku.onrender.com/board?difficulty=easy")
                .then(r => r.json())
                .then(d => this.buildGrid(d.board));
        },

        /* =================== TIMER =================== */
        startTimer: function () {
            if (this.timer) clearInterval(this.timer);

            this.timer = setInterval(() => {
                this.seconds++;
                this.updateTimerText();
            }, 1000);
        },

        resetTimer: function () {
            this.seconds = 0;
            this.updateTimerText();
        },

        updateTimerText: function () {
            const m = String(Math.floor(this.seconds / 60)).padStart(2, "0");
            const s = String(this.seconds % 60).padStart(2, "0");
            this.byId("timerText").setText(`Time: ${m}:${s}`);
        },

        /* =================== GRID =================== */
        buildGrid: function (board) {
            const oBox = this.byId("sudokuGridInner") || document.getElementById("sudokuGridInner");
            oBox.innerHTML = ""; // Clear old grid
            this.cells = [];

            for (let r = 0; r < 9; r++) {
                const rowDiv = document.createElement("div");
                rowDiv.className = "sudokuRow";
                this.cells[r] = [];

                for (let c = 0; c < 9; c++) {
                    const isFixed = board[r][c] !== 0;
                    const input = document.createElement("input");
                    input.type = "number";
                    input.maxLength = 1;
                    input.value = isFixed ? board[r][c] : "";
                    input.disabled = isFixed;
                    input.className = "sudokuCell";
                    input.dataset.row = r;
                    input.dataset.col = c;

                    // Live validation
                    input.addEventListener("input", () => {
                        this.validateCell(r, c);
                    });

                    this.cells[r][c] = input;
                    rowDiv.appendChild(input);
                }

                oBox.appendChild(rowDiv);
            }
        },

        /* =================== VALIDATION =================== */
        onCheckSolution: function () {
            for (let r = 0; r < 9; r++) {
                for (let c = 0; c < 9; c++) {
                    this.validateCell(r, c, true); // force full check
                }
            }
        },

        validateCell: function (row, col, force = false) {
            const input = this.cells[row][col];
            if (!input || input.disabled) return;

            const val = parseInt(input.value, 10);
            let isValid = true;

            if (isNaN(val) || val < 1 || val > 9) {
                isValid = false;
            } else {
                // Check row
                for (let c = 0; c < 9; c++) {
                    if (c !== col && parseInt(this.cells[row][c].value, 10) === val) {
                        isValid = false;
                        break;
                    }
                }
                // Check column
                for (let r = 0; r < 9; r++) {
                    if (r !== row && parseInt(this.cells[r][col].value, 10) === val) {
                        isValid = false;
                        break;
                    }
                }
                // Check 3x3 box
                const startRow = Math.floor(row / 3) * 3;
                const startCol = Math.floor(col / 3) * 3;
                for (let r2 = startRow; r2 < startRow + 3; r2++) {
                    for (let c2 = startCol; c2 < startCol + 3; c2++) {
                        if ((r2 !== row || c2 !== col) &&
                            parseInt(this.cells[r2][c2].value, 10) === val) {
                            isValid = false;
                        }
                    }
                }
            }

            input.style.backgroundColor = isValid ? "white" : "lightcoral";
        }
    });
});

view.xml

<mvc:View
    controllerName="com.sudokuapi.controller.App"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
  
  <App>
    <pages>
      <Page title="Sudoku">
        <content>
          <VBox alignItems="Center" width="100%">
            <Text id="timerText" text="Time: 00:00" class="sapUiMediumMargin"/>
            
            <!-- Use escaped HTML inside core:HTML -->
            <core:HTML
                id="sudokuGrid"
                content="&lt;div id='sudokuGridInner' class='sudokuGrid'&gt;&lt;/div&gt;" />
            
            <HBox justifyContent="Center" class="sapUiMediumMarginTop">
              <Button text="New Game" press="onNewGame" />
              <Button text="Check Solution" press="onCheckSolution" class="sapUiMediumMarginBegin"/>
            </HBox>
          </VBox>
        </content>
      </Page>
    </pages>
  </App>
</mvc:View>

output

Thank you!!

SAP UI5 - Draft Handling in FreeStyle Applications

2026-01-14T23:43:12.458000+01:00

1. Creating a DraftManager Class

In this post, I would like to share some of my experience with draft handling in FreeStyle applications.
After we decided in one of our projects to implement draft handling and at the same time had to consider our new component-based architecture, we encapsulated SAP’s DraftController (sap.ui.generic.app.transaction.DraftController) in a way that made sense for our use case.

I describe one possible encapsulation of the DraftController in a service class called "DraftManager", which (depending on the project) can be integrated and used across FreeStyle applications.
This approach worked very well for us, especially since official documentation was quite limited at that time.

Important: In our application we use an OData V2 service (with CDS views) that is already prepared accordingly for draft handling.

1.1 Initialization

The DraftManager is a service class used to encapsulate the DraftController.
The following basic structure has proven itself in our projects and can be used as is or adapted and extended as needed.

When initializing the DraftManager in the controller, we only pass the component instance and the view’s binding context.

(Example)

this.oDraftManager = new DraftManager(this.getOwnerComponent(), oContext);

The binding context is stored internally within the class for further processing and can be accessed or modified if required using the helper functions getActiveContext and setActiveContext.

Basic structure:

sap.ui.define([
  "sap/ui/generic/app/transaction/DraftController"
], function (DraftController) {
  "use strict";

  const DraftManager = function (oComponent, oContext) {
    this.oModel = oComponent.getModel();
    this.oDraftController = new DraftController(this.oModel);
    this.oActiveContext = oContext;
    this.oDraftContext = null;
  };

  DraftManager.prototype.setActiveContext = function (oContext) {
    this.oActiveContext = oContext;
  };

  DraftManager.prototype.getActiveContext = function () {
    return this.oActiveContext;
  };

  return DraftManager;
});

1.2 Draft Functions in the DraftManager

The DraftManager can be extended as needed, but in this post I would like to focus in particular on the main draft handling functions (Activate, Edit, and Discard).

Determine or Create a Draft

The DraftController itself is relatively easy to use.
However, there are operations, such as Edit, that always require multiple steps.
If a draft already exists, a new one cannot be created and an error will occur.

To avoid having to implement the same check in every controller, this logic is encapsulated.
This way, only a single function needs to be executed.

In this example code, we first check whether a draft exists for the active view context.
If so, it is returned and the controller can rebind the view accordingly.
If not, a new draft is created.

If needed, success and error messages can also be handled inside the function (for example, if they should be consistent across several applications). We use our own separate error handling in this case.

DraftManager.prototype.getOrCreateEditDraft = async function () {
  const oExistingDraft = await this.oDraftController.getDraftForActiveEntity(this.oActiveContext);

  if (oExistingDraft && !oExistingDraft.context.getObject().IsActiveEntity) {
    this.oDraftContext = oExistingDraft.context;
    return this.oDraftContext;
  }

  const oDraft = await this.oDraftController.createEditDraftEntity(this.oActiveContext);

  this.oDraftContext = oDraft.context;
  return this.oDraftContext;
};

Activate a Draft

Activating a draft is pretty straightforward in this case. Here as well: The function can be extended as needed (error + success handling e.g.)

DraftManager.prototype.activateDraft = async function () {
  await this.oDraftController.activateDraftEntity(this.oDraftContext);
  this.oActiveContext = this.oDraftContext;
};

Discard a Draft

Discarding a draft is also easy to implement in this case.

DraftManager.prototype.discardDraft = async function () {
  await this.oDraftController.discardDraft(this.oDraftContext);
  this.oDraftContext = null;
};

2. Instantiating the DraftManager in the Controller

As mentioned at the beginning, the DraftManager can be instantiated quite easily.

Example: We have a master/detail application with an onRouteMatched function in the detail controller.
Assume we have a SmartTable on the master page and navigate to the detail page after clicking on an entry.
Here, we pass the corresponding bound id (or guid) of the list item and the HasActiveEntity property.

Using this properties, we now create a raw context (helper function _loadContext) and start instantiating the DraftManager .

onRouteMatched: async function (oEvent) {
  const sId = oEvent.getParameter("arguments").UUID;
  const bActive = oEvent.getParameter("arguments").HasActiveEntity;

  try {
	const oContext = await this._loadContext("/EntitySet", { "UUID": sId, "IsActiveEntity": bActive });
	this.oDraftManager = new DraftManager(this.getOwnerComponent(), oContext);
  } catch (oError) {
	//error handling
  }  
}

_loadContext: async function (sEntity, oContextParameters) {
	const oModel = this.getView().getModel();
	await oModel.metadataLoaded();
	const sKey = oModel.createKey(sEntity, oContextParameters);
	const oContext = new sap.ui.model.Context(oModel, sKey);
	return Promise.resolve(oContext);
},

After that, the DraftManager is instantiated and can be used.

3. Using the DraftManager in the Controller

From this point on things become much more relaxed, as encapsulating the draft logic significantly reduces the number of operations in the controller.

I will keep the following examples to a minimum. Depending on the requirements, these can of course become more complex.

For rebinding/refreshing the view, we're using the following helper function:

_bindView: async function (sId, bIsActiveEntity) {
  return new Promise((resolve) => {
    this.getView().bindElement({
      path: `/EntitySet(UUID=guid'${sId}',IsActiveEntity=${bIsActiveEntity})`,
      parameters: {
        expand: "DraftAdministrativeData"
      },
      events: {
        change: (oEvent) => {
          resolve(oEvent.getSource().getBoundContext());
        }
      }
    });
  });
};

3.1 Start Editing

Editing has now become a fire-and-forget function, as everything is nicely encapsulated.
After each draft operation, the view should be updated (in this case using _bindView).

onEdit: async function () {
	try {	
		const oDraftContext = await this.oDraftManager.getOrCreateEditDraft();  
		await this._bindView(
			oDraftContext.getProperty("UUID"),
			oDraftContext.getProperty("IsActiveEntity")
		);		
	} catch (oError) {
		//error handling...
	}
}

3.2 Save

After activating the draft, the view is rebound to the active entity.

onSave: async function () {
	try {	
		await this.oDraftManager.activateDraft();  
		await this._bindView(
			this.oDraftManager.getActiveContext().getProperty("UUID"),
			this.oDraftManager.getActiveContext().getProperty("IsActiveEntity")
		);	
	} catch (oError) {
		//error handling...
	}
}

3.3 Cancel

When canceling, the draft is discarded and the view is rebound to the active context.

onDiscard: async function () {
	try {	
		await this.oDraftManager.discardDraft();
		await this._bindView(
			this.oDraftManager.getActiveContext().getProperty("UUID"),
			this.oDraftManager.getActiveContext().getProperty("IsActiveEntity")
		);
	} catch (oError) {
		//error handling...
	}
}

4. DraftHandling and MERGE lock errors

One important learning from our projects was dealing with MERGE lock errors.
As soon as draft handling is applied to larger views with many form fields and especially rich text editors, you will sooner or later run into locking issues, as we did.

This happens because the DraftController triggers a MERGE request on every change in the view (which is correct behavior).
However, if too many changes are performed too quickly, multiple MERGE requests can be sent at the same time and end up locking each other.

This can easily be reproduced with a rich text editor in the view by pressing the Enter key very quickly. The result is a large number of lock errors (The draft itself is still updated correctly, but this can become quite annoying when working with messaging).

Our solution for this was to work with deferredGroups and changeGroups.

In order to get this to work with the DraftController and the service class, we use the merge timer provided by SAP.

First we start by setting the deferredGroup and changeGroup in the onInit function of the view controller.

this.getOwnerComponent().getModel().setDeferredGroups(["Changes"]);
this.getOwnerComponent().getModel().setChangeGroups({
  "*": {
    groupId: "Changes",
    changeSetId: "Changes",
    single: false
  }
});
this.getOwnerComponent().getModel().attachPropertyChange(this.onEnqueueSubmitChanges.bind(this, 1));

After that we define the propertyChange handler function onEnqueueSubmitChanges.

onEnqueueSubmitChanges: function (nIntervalInSeconds) {
  const mParameters = this.getOwnerComponent().getModel("util").getProperty("/ViewControl/batchParameters");
  this.oDraftManager.triggerSubmitChanges(nIntervalInSeconds, mParameters);
}

And finally, we define a new DraftManager function triggerSubmitChanges, which bundles the requests using the merge timer and submits them accordingly.

oDraftManager.prototype.triggerSubmitChanges = function (nIntervalInSeconds, mParameters) {
  const oDraftMergeTimer = this.oDraftController._oDraftMergeTimer;
  if (!oDraftMergeTimer.nTimeoutID) {
    oDraftMergeTimer.nTimeoutID = setTimeout(() => {
      oDraftMergeTimer.nTimeoutID = null;
      if (this.oModel.hasPendingChanges()) {
        this.oDraftController.triggerSubmitChanges(mParameters)
          .catch((oError) => {
            console.error("Error during submit changes:", oError);
          });
      }
    }, (nIntervalInSeconds || 0) * 1000);
  }
};

5. Conclusion

I have reduced the examples to the basics, as they can be extended as needed. We had very good experience with this service class, and draft handling in FreeStyle applications in combination with an OData V2 service worked very well.

The DraftController can of course also be used directly in the controller.
However, as mentioned before, encapsulating it is worthwhile when working with a larger application architecture, especially when testing is relevant in the project.

SAP Fiori Development newsletter January 2026 (issue #38)

2026-01-15T15:50:00.034000+01:00

Happy New Year. If 2025 was the year of AI, what will 2026 bring? Likely more AI.

Some predictions:

Vibe coding will become more mainstream with MCP servers and LLMs working together to deliver more predictable and consistent results.
We will start to see the emergence of the “post-app” era in enterprise software. I don’t think it will be entirely chat-based, but I do expect some parts to be generated on demand.
The knowledge gap between developers who use AI and those who don’t will continue to grow. Now, the early adopters have a 1-year head start. For those who choose to remain on the sidelines, that will continue to grow. Don’t be that person – you need to start experimenting with AI, even if you don’t include the results in your production code

What are your predictions for 2026? Let us know or add to the comments below. If you want to discuss your thoughts with your fellow developers, I encourage you to join our monthly SAP Fiori development roundtable. Register online or email me for an invitation.

Development News

The complete 6-part SAP Fiori Development Portal blog series
In this 6-part series, Katrin Polloczek and Marcel Waechter explore the SAP Fiori development portal and how to use it. Topics include SAP Fiori elements, building blocks, extension options, custom pages, and how all these pieces fit together. Read part 1 – with links to all the posts.

SAP Fiori tools 2601 update – Mobile Device Preview, Building Blocks, and AI-Driven Productivity
SAP Fiori tools 2601 includes enhancements for previewing applications, managing system connections, building SAP Fiori elements–based UIs, and accelerating development with AI-powered tooling. In parallel, we continue to refine the fundamentals in security, modeling, and extensibility. See details.

Joule in SAP Build Code can now create freestyle UI5 apps
Last year, we introduced the SAPUI5 extension for the Joule coding assistant in SAP Build Code Over time, it has evolved to support conversion of UI5 apps to TypeScript and setting up new pages and the respective navigation. The latest improvement lets you create new freestyle UI5 apps according to your requirements, bringing the functionality right to developers using SAP Build Code—no other tools needed. Discover how it works.

Inside Joule: Lessons from building an AI coding assistant for SAP Build
This is a "making of" article about the implementation of the new /ui5-create-app slash command available within Joule in SAP Build Code. This new feature enables a conversation between an application developer and their AI assistant about building a new freestyle UI5 application. Learn more.

UI5 MCP Server's New TypeScript Migration Feature
The new UI5 MCP server will give you a massive head start on converting your existing JavaScript UI5 apps to TypeScript. A multi-day manual conversion becomes an hour of agent work plus several hours of polishing. The time savings add up with each project. Learn more.

Harmonizing UI5 URLs: Convenient URLs for SAPUI5/OpenUI5 CDN
When accessing the UI5 Demo Kit and when using UI5 in cloud scenarios, you use URLs like https://ui5.sap.com/. We are harmonizing these URLs to make them future-proof. See more details.

Events

SAP Fiori Innovation Day 2025 is a wrap. The final event in Walldorf included an overview of AI capabilities in SAP Cloud ERP, two hands-on exercises, and some great insights from the sponsoring partners. Learn the details.

We are planning more SAP Fiori Innovation Days in 2026. Watch your inbox for announcements about where and when we will be hosting these events.

Call for papers is open for SAP Sapphire 2026Call for Proposals open for 2026 SAP Sapphire & ASUG Annual Conference Orlando.
Share your success story or lead an interactive discussion with your peers.
Submit your proposal.

Back issues from the past year

SAP Fiori development newsletter November 2025 (issue #37)

SAP Fiori development newsletter September 2025 (issue #36)

SAP Fiori development newsletter July 2025 (issue #35)

SAP FIori development newsletter May 2025 (Issue #34)

SAP Fiori development newsletter March 2025 (Issue #33)

SAP Fiori development newsletter January 2025 (issue #32)

Code Connect 2026 is Coming – Mark Your Calendars!

2026-01-16T10:17:39.514000+01:00

We’re excited to announce the return of Code Connect for its third edition, bringing together three dynamic events - UI5con, reCAP, and HANA Tech Con - under one roof. Mark your calendars for July 13 to 16, 2026, and join us in St. Leon-Rot, Germany, or online.

What is Code Connect?

Code Connect creates a unique opportunity to experience three specialized events in one location: UI5con, reCAP, and HANA Tech Con, allowing you to dive deep into different aspects of SAP development. Code Connect is designed for developers at every level: Whether you're an SAP veteran or just starting out, this is your chance to connect, learn, and innovate alongside a vibrant community of developers.

Your Week at Code Connect

July 13: Code Jam Sessions and Warmup

Kick things off with our Code Jam sessions - a hands-on way to sharpen your skills before the main event. Afterward, join us for a pre-conference networking event to meet fellow attendees in a relaxed setting.

July 14: UI5con

The official program kicks off with UI5con, bringing together UI5 enthusiasts to share insights, explore the latest innovations, and build new connections. Expect expert sessions, interactive workshops, and plenty of opportunities to engage with the UI5 community.

Learn more about UI5con.

July 15: reCAP

The next day focuses on the SAP Cloud Application Programming Model (CAP). At reCAP, developers, customers, and partners meet the CAP Product Team to discuss technical concepts, share project experiences, and explore future possibilities.

Learn more about reCAP.

July 16: HANA Tech Con

The week concludes with HANA Tech Con. Delve into the HANA universe and join development experts, users, and partners to exchange knowledge and ignite new ideas. If you've ever had questions about HANA that you haven't found answers to, this is your chance to get them resolved.

Learn more about HANA Tech Con.

Early Bird Process

Planning a longer trip? We offer a limited number of early bird tickets for attendees who need to arrange travel well in advance.

Check our FAQ document for details on how to secure your ticket.

Sponsorship Opportunities

Be a part of Code Connect 2026 and become a sponsor to support the developer community at UI5con, reCAP, and HANA Tech Con. By sponsoring Code Connect, you gain access to a diverse audience spanning front-end developers, backend specialists, and database experts – all in one event.

Read our sponsorship prospectus to check our sponsorship opportunities.

Call for Proposals

Our Call for Speakers runs from 26 January to 13 March. As a speaker, you’ll be an active part of Code Connect, shaping the conversation, sharing your expertise, and inspiring the developer community. Don’t wait and submit your session proposal by 13 March at the latest.

Important Dates

Call for Proposals: January 26, 2026 to March 13, 2026.
Registration Opens: April 10, 2026
Agenda Published: Early June 2026
Code Connect Week: July 13 to 16, 2026

Ready to Connect?

Code Connect 2026 represents more than just learning opportunities. It's about building relationships, sharing knowledge, and being part of a community that's shaping the future of SAP development.

Join us at Code Connect 2026 and be part of a community driving the future of technology. We can't wait to see you there!

Simplify Your Test Setup: Introducing the Test Starter Concept for Your UI5 Projects

2026-01-19T10:17:31.056000+01:00

With UI5 version 1.124 (Note: A downport for UI5 1.120 is available with 1.120.24) the test starter concept is officially enabled for UI5 application projects. Previously, this concept was mainly used in UI5 framework libraries. This guide explains how to migrate an application project’s test setup to a test starter-based setup.

In the previous setup, the central entry point for running tests is webapp/test/testsuite.qunit.html, which usually references testsuite.qunit.js located next to it. Test runners like UI5 Test Runner or WebdriverIO QUnit Service also request both files.

webapp/test/testsuite.qunit.html

To migrate to the new setup, replace the two script tags with one new script tag. This tag loads the sap/ui/test/starter/createSuite module, references the testsuite.qunit.js file, and configures the test namespace. This module creates the actual test suite based on the configuration in the testsuite.qunit.js file.

Old

<!doctype html> 
<html> 
    <head> 
        <title>QUnit test suite for the UI5 Application: ui5.myapp</title> 
        <script src="../resources/sap/ui/qunit/qunit-redirect.js"></script> 
        <script src="testsuite.qunit.js" data-sap-ui-testsuite></script> 
    </head> 
    <body></body> 
</html>

New

<!doctype html> 
<html> 
    <head> 
        <title>QUnit test suite for the UI5 Application: ui5.myapp</title> 
        <!-- Adjust the paths in the following lines to reflect your component namespace --> 
        <script
            src="../resources/sap/ui/test/starter/createSuite.js"   
            data-sap-ui-testsuite="test-resources/ui5/myapp/testsuite.qunit"
            data-sap-ui-resource-roots='{ 
                "test-resources.ui5.myapp": "./" 
            }' 
        ></script> 
    </head> 
    <body></body> 
</html>

webapp/test/testsuite.qunit.js

In the previous setup, the testsuite.qunit.js file registered the relevant test pages. This remains true in the new setup, but the number of configuration options has increased significantly, and the file structure has changed. In the new setup, testsuite.qunit.js must return an object representing the test suite configuration. We describe the available configuration options in detail in UI5 Test Starter – Configuration Options. Unlike the previous setup, the configuration doesn’t reference HTML-based test pages. Instead, it points to test pages written in JavaScript or TypeScript.

Old

window.suite = function () { 
    var suite = new parent.jsUnitTestSuite(); 
    var aParts = location.pathname.match(/(.*\/)(?:[^/]+)/); 
    var sContextPath = aParts && aParts[1]; 
    suite.addTestPage(sContextPath + "unit/unitTests.qunit.html"); 
    suite.addTestPage(sContextPath + "integration/opaTests.qunit.html"); 
    return suite; 
};

New

sap.ui.define(function () { 
    "use strict"; 

    return {
        name: "QUnit test suite for the UI5 Application: ui5.myapp", 
        defaults: { 
            // Adjust the path in the next line to reflect your component namespace
            page: "ui5://test-resources/ui5/myapp/Test.qunit.html?testsuite={suite}&test={name}", 
            qunit: { 
                version: 2 
            }, 
            sinon: { 
                version: 1 
            }, 
            ui5: { 
                language: "EN", 
                theme: "sap_horizon" 
            }, 
            coverage: {
                // Adjust the path in the next line to reflect your component namespace
                only: "ui5/myapp/", 
                // Adjust the path in the next line to reflect your component namespace
                never: "test-resources/ui5/myapp/" 
            }, 
            loader: { 
                paths: { 
                    // Adjust the path in the next line to reflect your component namespace
                    "ui5/myapp": "../" 
                } 
            } 
        }, 
        tests: { 
            "unit/unitTests": { 
                title: "Unit tests for ui5.myapp" 
            }, 
            "integration/opaTests": { 
                title: "Integration tests for ui5.myapp" 
            } 
        } 
    }; 
});

webapp/test/unit/unitTests.qunit.js

Previously, the test pages unitTests.qunit.js and opaTests.qunit.js registered a function to be executed after UI5 booted, loaded all test files (QUnit or OPA5) ,and started the test execution. The new test starter concept simplifies these files significantly. Their only task is to require all relevant test pages.

Old

QUnit.config.autostart = false; 

sap.ui.getCore().attachInit(function () { 

    "use strict"; 

    sap.ui.require(["unit/controller/Main.qunit"], function () { 
        QUnit.start(); 
    }); 
});

New

sap.ui.define(["./controller/Main.qunit"]);

webapp/test/integration/opaTests.qunit.js

Old

QUnit.config.autostart = false; 

sap.ui.getCore().attachInit(function () { 

    "use strict";

    sap.ui.require(["integration/HelloJourney"], function () { 
        QUnit.start(); 
    });

});

New

sap.ui.define(["./HelloJourney"]);

webapp/test/unit/unitTests.qunit.html and webapp/test/integration/opaTests.qunit.html

You can now delete webapp/test/unit/unitTests.qunit.html and webapp/test/integration/opaTests.qunit.html, as they are no longer needed.

webapp/test/Test.qunit.html

Instead, create a new generic test execution page called webapp/test/Test.qunit.html. This file executes the test pages migrated in the previous step.

<!doctype html> 
<html> 
    <head>
        <meta charset="utf-8" />
        <!-- Adjust the paths in the following lines to reflect your component namespace --> 
        <script
            src="../resources/sap/ui/test/starter/runTest.js" 
            data-sap-ui-resource-roots='{ 
                "test-resources.ui5.myapp": "./" 
            }'
        ></script> 
</head> 
<body class="sapUiBody"> 
    <div id="qunit"></div> 
    <div id="qunit-fixture"></div> 
</body>
</html>

TypeScript

Note: The following section is only relevant, if your project is using TypeScript.

With UI5 1.142, TypeScript support for defining a test suite has improved. Simply import the sap/ui/test/starter/config/SuiteConfiguration types offered by UI5.

import type {SuiteConfiguration} from "sap/ui/test/starter/config"; 

export default { 
    name: "QUnit test suite for the UI5 Application: ui5.myapp", 
    defaults: { 
            // Adjust the path in the next line to reflect your component namespace
            page: "ui5://test-resources/ui5/myapp/Test.qunit.html?testsuite={suite}&test={name}", 
            qunit: { 
                version: 2 
            }, 
            sinon: { 
                version: 1 
            }, 
            ui5: { 
                language: "EN", 
                theme: "sap_horizon" 
            }, 
            coverage: {
                // Adjust the path in the next line to reflect your component namespace
                only: "ui5/myapp/",
                // Adjust the path in the next line to reflect your component namespace
                never: "test-resources/ui5/myapp/" 
            }, 
            loader: { 
                paths: {
                    // Adjust the path in the next line to reflect your component namespace
                    "ui5/myapp": "../" 
                } 
            } 
        }, 
        tests: { 
            "unit/unitTests": { 
                title: "Unit tests for ui5.myapp" 
            }, 
            "integration/opaTests": { 
                title: "Integration tests for ui5.myapp" 
            } 
        }
} satisfies SuiteConfiguration;

Dive Deeper

The UI5 Demo Kit provides detailed documentation on the general concept and various configuration options, helping you get the most out of the test starter for your project. For a more interactive learning experience, watch the UI5ers live #43 session, where we presented the test starter concept.

Summary

The new test starter concept simplifies the test setup, reduces the boilerplate code needed to write a QUnit test, and ensures the loading of commonly used testing frameworks (such as QUnit, Sinon.JS, and qunit-reporter). It ensures these testing frameworks and your test modules load asynchronously and comply with the Content Security Policy. It also allows moving the configuration of the testing frameworks out of the test code. We look forward to your feedback and experiences when applying the test starter concept to your UI5 projects.

UI5 MCP Server Got Extended for UI Integration Cards Generation

2026-01-22T13:54:47.553000+01:00

Following the recent announcement for the release and availability of the UI5 MCP server, we are pleased to announce that the UI5 MCP Server now supports the development of UI Integration Cards. In its latest version – v0.2.1 – it includes three new tools dedicated to UI Integration Cards. These tools assist Large Language Models (LLMs) in creating new cards from scratch or editing existing ones, following the best practices for card development.

Infuse Creativity Into Your UI Integration Cards

The updated UI5 MCP Server version v.0.2.1 enhances card development with AI Agents like Cline. Fostering creativity and efficiency, this approach makes it easy for both developers and non-developers to create UI Integration Cards smoothly.

Usage of the UI5 MCP Server in Cline.

Why Use the UI5 MCP Server for Integration Cards Development?

The reasons for initially using UI5 MCP Server are similarly applicable to developing Integration Cards:

LLMs might lack information on the latest best practices and APIs recommended for UI Integration Cards development.
LLMs might suggest using the properties of UI Integration Cards or APIs that are not available in your project's version or have been marked as deprecated.
Scaffolding can help agents kickstart new projects faster and with established patterns, saving token costs.

and furthermore:

Encouraging the use of cards of type Declarative to make the card also compatible with Mobile Native platforms.
Providing specific knowledge for each card type to the LLMs, such as the available chart types in Analytical cards, and enabling the LLMs to suggest the best chart type for your data.
And more…

Tools

Best practice guidance for your agent: get_integration_cards_guidelines
Scaffolding a new Integration Card: create_integration_card
Validating the Card’s manifest: run_manifest_validation

Setup & Use

Install the UI5 MCP Server v.0.2.1 in your AI agent, as described here. Once this version or later is installed, your AI Agent should automatically gain access to the new tools. Once you define your prompt for generating a Card the AI Agent will offer you as first step to run the get_integration_cards_guidelines, then will scaffold the very coding project with dynamically created Card, and finally will run the manifest schema validation tool. Enjoy your Card!

What’s Next?

We plan to further enhance the existing tools to handle more complex scenarios, such as creating or editing child cards, pagination in list and table cards, a more advanced configuration editor for the generated card, and more.

SAP Developer News, January 22nd, 2026

2026-01-22T21:10:00.030000+01:00

DESCRIPTION

UI5Con Bangalore

UI5con Bangalore: https://openui5.org/ui5con/bengaluru2026/index.html

SAP BTP Platform Automation Roundtable #1

Blog post https://community.sap.com/t5/technology-blog-posts-by-sap/customer-amp-partner-roundtable-for-sap-btp-platform-automation-february/ba-p/14306394

Registration https://events.teams.microsoft.com/event/ccc79b7d-c96b-4564-a1a3-361b82789171@42f7676c-f455-423c-82f6-dc2d99791af7

Event Mesh capability monitoring in SAP Cloud ALM

Monitoring Event Mesh from SAP Integration Suite with SAP Cloud ALM: https://community.sap.com/t5/technology-blog-posts-by-sap/monitoring-event-mesh-from-sap-integration-suite-with-sap-cloud-alm/ba-p/14309869

SAPUI5 Roadmap Explorer

Link to the Roadmap: https://roadmaps.sap.com/board?PRODUCT=73554900100800001361&range=CURRENT-LAST&range=CURRENT-LAST#Q1%202026

Code Connect 2026

Code Connect website https://code-connect.dev/

Devtoberfest Winners Interview - Gert Mertens

CHAPTER TITLES

0:00 Intro

0:10 UI5con Bangalore

0:45 SAP BTP Platform Automation Roundtable #1

1:28 Event Mesh capability monitoring in SAP Cloud ALM

2:19 SAPUI5 Roadmap Explorer

3:23 Code Connect 2026

4:48 Devtoberfest Winners Interview - Gert Mertens

Transcript

00;00;00;25 - 00;00;06;20

This is the SAP Developer News for January 22nd, 2026.

00;00;06;23 - 00;00;09;18

We have kick started the first CodeJam of 2026 in

00;00;09;26 - 00;00;25;10

Hyderabad. We have two more CodeJams on SAP Gen AI and ABAP Cloud. Do let us know in which city you want to have the next CodeJam. And I'll just have one more news to share. UI5Con is coming to Bangalore after many years. So all UI5 enthusiast

00;00;25;10 - 00;00;44;18

Just watch out this space for UI5Con Bangalore happening at SAP Labs Innovation Park, Bangalore on February 28th. Mark the date it's February 28th. All the information about the registration can be in the link provided in the description. Thank you.

00;00;44;21 - 00;01;15;26

The first monthly customer and partner roundtable for SAP BTP Platform Automation is set to take place next month. Tuesday, the 10th of February at 1100 hours CET. BTP Platform automation. That's right. Topics such as the BTP CLI and Terraform. Two of my favorite topics during the session. There'll be Q&A. There'll be a round of updates, some demos and also a look ahead for the rest of 2026.

00;01;15;28 - 00;01;28;20

Everyone's welcome. You just need to register. It's free. Christian's blog post has all the details, so head over there and check it out. Link in the description.

00;01;28;22 - 00;01;58;22

Hola developers! Are you using the event mesh capability and you also use cloud them for monitoring? Well, here's some news for you. It is now possible to monitor the event mesh capability directly in SAP cloud ALM, meaning that you can now not just monitor your cloud integration tenant, but also your event mesh capability program for the broker. You can monitor the broker health active connections, message consumers and message queues.

00;01;58;25 - 00;02;18;20

The setup is pretty straightforward. If your integration suite is already in cloud ALM, then you just hit the scope selector in the health monitoring app, toggle on the event Mesh capability and that's it. Want to learn more about it? Check out Shivani’s blog post on SAP community. Hasta luego.

00;02;18;22 - 00;02;44;23

Developers love road maps, particularly when we're not the ones that have to deliver on them. They're kind of like wish lists that are going to be fulfilled. So it's fun to check out what's, on upcoming road maps. This month we see the updated SAPUI5 road map and contains lots of new functionality around Fiori web components and other capabilities that SAPUI5 makes possible.

00;02;44;26 - 00;03;11;17

Just to, give you an example of a few of them. For instance, there's a new geo map control plan in the road map, that will be, metadata driven control. And there is a planned MDC server for, UI5 web components. And that's just one of many things planned in Q1, Q1 being the section that has the most details.

00;03;11;20 - 00;03;23;26

But if you're a UI five developer, I'm sure this is a roadmap you're going to want to check out to see what things you can take advantage of in the near future.

00;03;23;28 - 00;04;05;21

It's only January, but we can already happily announce that CodeConnect is happening again this year. Undeniably a key in-person event for developers in the SAP ecosphere. This year, it includes three classic one day conferences. UI5Con on Tuesday, reCAP on Wednesday and HANA TechCon on Thursday, and starting the CodeConnect week off on Monday. I'm not one, not two, but three CodeJams one on CAP topics, one on Gen AI coding on the SAP rapid one model and one on UI5.

00;04;05;23 - 00;04;35;03

When is CodeConnect, I hear you ask? Well, it's pretty much right in the center of July. It's most of the week beginning the 13th of July. It's been in St. Leon/ROT in Germany as usual at the SAP campus. There we can mingle and chat with like minded developers, listen to and maybe even give sessions and just generally geek out. It's become a must attend event for folks like you and like me.

00;04;35;05 - 00;04;49;01

Anyway, head over to the CodeConnect website to learn more and if you are able to become a sponsor, then get in touch with the organizers there. Lovely people and thank you.

00;04;49;03 - 00;05;13;20

It's so I'm happy to right back from at TechEd. So what else do you join? And I'm one of the ministers. What are you? Key takeaways. The main things. What did you like? What did you like? What did I learn from the photographers I really liked? Especially this year that, you had, like, all the five tracks, so that you could really choose what you wanted to, to focus on.

00;05;13;22 - 00;05;37;05

And also, the photography is also really focused on both juniors and more experienced people. This read something for everybody and also with the funny sense it's it's really yeah, you learn a lot, but also doing it via for example, the puzzle you learn a little of things there. So it was really fun to do and yeah, to be able to just have like a gamification around it.

00;05;37;08 - 00;05;57;24

Yeah. That really speaks to me as a developer. So yeah, that it was me. A lot of fun and a lot of learning to do. Yeah. And now you're here and then. Oh yeah. So many highlights. What did you like most? Especially at the community, after, Covid, of course. Yeah. Being back in a community meeting, the mentors.

00;05;57;24 - 00;06;17;19

Meeting the advocates. Yeah. Especially that. And also with AI, the big buzzwords, seeing what is a piece doing with it? Yeah, all of those agents that they're building, it's really, really, really nice to just be here and feel the vibe and seeing what is in the future for for it. Yeah, that's what I really like about it I guess right now.

00;06;17;20 - 00;06;20;10

Yeah. But thank you guys. No problem.

SAP UI5 - Component-Based Architecture: Shell, Feature and Modules

2026-01-23T06:34:36.055000+01:00

This post describes one possible way to structure larger Freestyle SAP UI5 applications in a meaningful way.

The focus here is on a component-based architecture, where the application is split into a parent shell and several functional feature components, following a structure that worked well in our projects.

In this compact example, the application is hierarchically split into multiple UI5 components.

Each component is technically a standalone UI5 application with its own Component.js and its own manifest.
This way, the application grows in a controlled manner and can be extended at any time with new features and modules.

We use a classic list/detail application here. Shell as the framework, Feature List as the entry point, and Feature Detail for the object view.
Modules are smaller (reusable) building blocks within a feature.

1. Shell

The Shell is a standalone UI5 application and represents the technical framework of the application.

It renders the feature components at the appropriate places and is otherwise responsible for layout, navigation, or UI states (e.g. busy states).

App View

The App view is the root view of the Shell and is only responsible for the pure UI structure.

The Shell view is loaded into the FlexibleColumnLayout.

<mvc:View
  controllerName="app.shell.controller.App"
  displayBlock="true"
  height="100%"
  width="100%"
  xmlns="sap.m"
  xmlns:f="sap.f"
  xmlns:mvc="sap.ui.core.mvc">
  <App 
    id="app"
    busy="{appView>/busy}">
      <f:FlexibleColumnLayout
        id="layout"
        layout="{appView>/layout}"
        backgroundDesign="Translucent" />
  </App>
</mvc:View>

App Controller

The corresponding controller does not contain any notable logic except for initializing the view model appView.

sap.ui.define([
  "app/utility/controller/BaseController",
  "sap/ui/model/json/JSONModel"
], function (
  BaseController,
  JSONModel
) {
  "use strict";

  return BaseController.extend("app.shell.controller.App", {

    onInit: function () {
      const oViewModel = this._createViewModel();
      this.setModel(oViewModel, "appView");

      this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
    },

    _createViewModel: function () {
      return new JSONModel({
        busy: false,
        delay: 0,
        layout: "OneColumn",
        previousLayout: ""
      });
    }
  });
});

Shell View

We keep the Shell view fairly simple.

It contains a layout and an area (the mainContents aggregation) where feature components are rendered, e.g. using a ToolPage.

<mvc:View
  controllerName="app.shell.controller.Shell"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:tnt="sap.tnt"
  xmlns:core="sap.ui.core"
  displayBlock="true">
  <tnt:ToolPage id="toolPage" sideExpanded="false">
    <tnt:sideContent>
      <tnt:SideNavigation id="sideNavigation">
        <tnt:item>
          <tnt:NavigationList id="navList" expanded="false" selectedKey="">
            <tnt:NavigationListItem
              id="navListItemList"
              text="List"
              icon="sap-icon://list"
              select="onNavToList" />
          </tnt:NavigationList>
        </tnt:item>
      </tnt:SideNavigation>
    </tnt:sideContent>
    <tnt:mainContents>
    </tnt:mainContents>
  </tnt:ToolPage>
</mvc:View>

Shell Controller

After the Shell has been loaded, we directly navigate to Feature List and render it into mainContents of the ToolPage.

In addition, we define two event listeners for the events "setShellBusy" and "hideShellBusy" for later communication.

sap.ui.define([
  "app/utility/controller/BaseController",
  "sap/ui/model/json/JSONModel",
  "sap/ui/Device"
], function (
  BaseController,
  JSONModel,
  Device
) {
  "use strict";

  return BaseController.extend("app.shell.controller.Shell", {

    onInit: function () {
      const oViewModel = this._createViewModel();
      this.setModel(oViewModel, "shellView");
      this.getRouter().getRoute("shell").attachPatternMatched(this._onShellPatternMatched, this);
      this.getOwnerComponent().attachSetShellBusy(this._setShellBusy, this);
      this.getOwnerComponent().attachHideShellBusy(this._hideShellBusy, this);
    },

    _onShellPatternMatched: function () {
      this._navToList();
    },

    _createViewModel: function () {
      return new JSONModel({
        busy: false,
        delay: 50
      });
    },

    _setShellBusy: function() {
      this.getModel("appView").setProperty("/busy", true);
    },
    
    _hideShellBusy: function() {
      this.getModel("appView").setProperty("/busy", false);
    },

    _navToList: function () {
      const bReplace = !Device.system.phone;
      this.getRouter().navTo("list", {}, bReplace);
    }
  });
});

Shell Manifest

The Shell knows its features via "componentUsages" in the manifest.

In our example, we want to display the List feature as the first feature within the Shell.

For this, we define the List feature once as a component in "componentUsages" and create a route.
The "controlAggregation" of List is the "mainContents" aggregation of the ToolPage in the view.

{
  "_version": "1.32.0",
  "sap.app": {
    "id": "app.shell",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": { "version": "0.0.1" },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}"
  },
  "sap.ui": {
    "technology": "UI5",
    "fullWidth": true,
    "deviceTypes": { "desktop": true, "tablet": true, "phone": true }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.120.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.f": {},
        "sap.tnt": {}
      }
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": { "bundleName": "app.shell.i18n.i18n" }
      }
    },
    "componentUsages": {
      "list": {
        "name": "app.list",
        "lazy": false
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.f.routing.Router",
        "viewType": "XML",
        "viewPath": "app.shell.view",
        "controlId": "layout",
        "controlAggregation": "beginColumnPages",
        "async": true,
        "bypassed": {
          "target": "shell"
        }
      },
      "routes": [
        {
          "pattern": "",
          "name": "shell",
          "target": "shell"
        },
        {
          "pattern": "List",
          "name": "list",
          "target": ["shell", "list"]
        }
      ],
      "targets": {
        "shell": {
          "viewName": "Shell",
          "viewId": "shell",
          "viewLevel": 1
        },
        "list": {
          "type": "Component",
          "usage": "list",
          "parent": "shell",
          "controlId": "toolPage",
          "controlAggregation": "mainContents"
        }
      }
    },
    "rootView": {
      "viewName": "app.shell.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    }
  }
}

Shell Component

Besides the usual router initialization, we only provide the two events already mentioned: setShellBusy and hideShellBusy.

sap.ui.define([
	"app/shell/model/models",
	"sap/ui/core/UIComponent"
], function(
	models,
	UIComponent
) {
	"use strict";

	return UIComponent.extend("app.shell.Component", {
		metadata: {
			manifest: "json",
			events: {		
				setShellBusy: {},
				hideShellBusy: {}
			}
		},
		init: function () {
            UIComponent.prototype.init.apply(this, arguments);
            this.setModel(models.createDeviceModel(), "device");
            this.getRouter().initialize();
        },
		destroy: function() {			
			UIComponent.prototype.destroy.apply(this, arguments);		
		},
		getContentDensityClass: function() {
			if (this._sContentDensityClass === undefined) {				
				if (document.body.classList.contains("sapUiSizeCozy") ||                
					document.body.classList.contains("sapUiSizeCompact")) {
					this._sContentDensityClass = "";				
				} else if (!Device.support.touch) {				
					this._sContentDensityClass = "sapUiSizeCompact";				
				} else {				
					this._sContentDensityClass = "sapUiSizeCozy";
				}
			}
			return this._sContentDensityClass;
		}
	});
});

2. Feature List

Feature components are also technically standalone UI5 applications and can be executed separately.

Similar to the Shell, we can link feature components (List/Detail) and also integrate smaller modules.

Feature List decides when to navigate to Detail.

In the case of a list/detail linking, we pass the necessary parameters during navigation. Apart from that, Feature List does not know any further details about Feature Detail.

App View

Structured similarly to the Shell. The FlexibleColumnLayout is important here for the interaction between List and Detail.

Layout handling is bound to the view model.

<mvc:View
  controllerName="app.list.controller.App"
  displayBlock="true"
  height="100%"
  xmlns="sap.m"
  xmlns:f="sap.f"
  xmlns:mvc="sap.ui.core.mvc">
  <App id="app" height="100%">
    <f:FlexibleColumnLayout
      id="layout"
      height="100%"
      layout="{appView>/layout}"
      backgroundDesign="Translucent" />
  </App>
</mvc:View>

App Controller

Here we initialize the view model and add a new event listener for the component event setLayout.

sap.ui.define([
	"app/utility/controller/BaseController",
	"sap/ui/model/json/JSONModel"
], function (BaseController, JSONModel) {
  "use strict";

  return BaseController.extend("app.list.controller.App", {
    onInit: function () {
		const oViewModel = this._createViewModel();
		this.setModel(oViewModel, "appView");
		this.getOwnerComponent().attachSetLayout(this._onSetLayout, this);
    },

    _onSetLayout: function (oEvent) {
		const sLayout = oEvent.getParameter("layout");
		this.getModel("appView").setProperty("/layout", sLayout);
    },

    _createViewModel: function() {
		const oViewModel = new JSONModel({
				busy: false,
				delay: 0
			});
			return oViewModel;
		}
  });
});

List View

For simplicity, a normal list with some dummy items:

<mvc:View
  controllerName="app.list.controller.List"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true">
  <Page title="List Feature" class="sapUiContentPadding">
    <content>
      <List id="demoList" mode="SingleSelectMaster" itemPress="onItemPress">
        <StandardListItem title="Item 1000" description="1000000000" type="Active" />
        <StandardListItem title="Item 2000" description="1000000001" type="Active" />
        <StandardListItem title="Item 3000" description="1000000002" type="Active" />
      </List>
    </content>
  </Page>
</mvc:View>

List Controller

Without any major binding logic, we have direct navigation to the Detail feature here, passing the item ID as a parameter.

sap.ui.define([
  "app/utility/controller/BaseController",
  "sap/ui/Device",
  "sap/ui/model/json/JSONModel"
], function (BaseController, Device, JSONModel) {
  "use strict";

  return BaseController.extend("app.list.controller.List", {

    onInit: function () {
      const oViewModel = this._createViewModel();
      this.setModel(oViewModel, "listView");
      this.getRouter().getRoute("list").attachPatternMatched(this._onListMatched, this);
    },

    _onListMatched: function () {
      // maybe further binding logic
    },

    onItemPress: function (oEvent) {
      const oItem = oEvent.getParameter("listItem");
      const sId = oItem.getDescription();

      const bReplace = !Device.system.phone;
      this.getRouter().navTo("detail", { id: sId }, bReplace);
    },

    _createViewModel: function () {
      const oViewModel = new JSONModel({
        busy: false,
        delay: 0,
        noDataText: this.getResourceBundle().getText("noDataText")
      });
      return oViewModel;
    }

  });
});

List Manifest

As in the Shell, we integrate the next feature (Detail) in the manifest of the Feature List component.

Feature Detail also receives its own route.

{
  "_version": "1.32.0",
  "sap.app": {
    "id": "app.list",
    "type": "component",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": { "version": "0.0.1" },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}"
  },
  "sap.ui": {
    "technology": "UI5",
    "fullWidth": true,
    "deviceTypes": { "desktop": true, "tablet": true, "phone": true }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.120.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.f": {}
      }
    },
    "componentUsages": {
      "detail": {
        "name": "app.detail",
        "lazy": false
      }
    },
    "contentDensities": { "compact": true, "cozy": true },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": { "bundleName": "app.list.i18n.i18n" }
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.f.routing.Router",
        "viewType": "XML",
        "viewPath": "app.list.view",
        "controlId": "layout",
        "controlAggregation": "beginColumnPages",
        "async": true,
        "bypassed": { "target": "list" }
      },
      "routes": [
        { "pattern": "", "name": "list", "target": "list" },
        { "pattern": "detail/{id}", "name": "detail", "target": "detail" }
      ],
      "targets": {
        "list": { "viewName": "List", "viewId": "list", "viewLevel": 1 },
        "detail": {
          "type": "Component",
          "usage": "detail",
          "controlAggregation": "midColumnPages"
        }
      }
    },
    "rootView": {
      "viewName": "app.list.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    }
  }
}

3. Feature Detail

Feature Detail also has an App view and an App controller, but in this example they do not contain any significant logic. Therefore, I omit them here. The same also applies to "Component.js".

Detail View

For this example, we would simply assume that the detail view is a simple ObjectPageLayout. Then, we embed additional modules in the individual sections, each within a ComponentContainer. For simplicity, I will only cover the Comments module.

The ComponentContainer automatically renders the Comments module which we specify in the usage property (“moduleComments” is the componentUsages name from the manifest).

<mvc:View
	controllerName="app.detail.controller.Detail"
	xmlns="sap.m"
	displayBlock="true"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:uxap="sap.uxap"
	xmlns:core="sap.ui.core">
	<uxap:ObjectPageLayout
        id="objectPageLayout"
		showTitleInHeaderContent="true"		
		showFooter="true"
		alwaysShowContentHeader="true"
		preserveHeaderStateOnScroll="false"
		headerContentPinnable="true"
		isChildPage="true"
		upperCaseAnchorBar="false"
		useIconTabBar="true"
		enableLazyLoading="true">
		<uxap:headerTitle>
			<uxap:ObjectPageDynamicHeaderTitle
				id="objectPageDynamicHeaderTitle"
				areaShrinkRatio="5:1:1">
				<uxap:heading>
						<Title
							id="objectPageDynamicHeaderTitleHeadingTitle"
							wrapping="true"
							text="Feature Detail: {detailView>/id}"/>
				</uxap:heading>
			</uxap:ObjectPageDynamicHeaderTitle>
		</uxap:headerTitle>
		<uxap:headerContent>
		</uxap:headerContent>
		<uxap:sections>
		
			<!-- Modul Comments -->
			<uxap:ObjectPageSection title="Comments">
				<uxap:subSections>
					<uxap:ObjectPageSubSection mode="Expanded">
						<core:ComponentContainer
							id="moduleCommentsContainer"
							usage="moduleComments"
							async="true"
							componentCreated="onComponentCommentsCreated"/>
					</uxap:ObjectPageSubSection>
				</uxap:subSections>
			</uxap:ObjectPageSection>

			<!-- Modul History -->
			<uxap:ObjectPageSection title="History">
				<uxap:subSections>
					<uxap:ObjectPageSubSection mode="Expanded">
						<!-- <core:ComponentContainer
							id="moduleHistoryContainer"
							usage="moduleHistory"
							async="true"
							componentCreated="onComponentHistoryCreated"/> -->
							<Text text="History"/>
					</uxap:ObjectPageSubSection>
				</uxap:subSections>
			</uxap:ObjectPageSection>

			<!-- Modul Flow -->
			<uxap:ObjectPageSection title="Flow">
				<uxap:subSections>
					<uxap:ObjectPageSubSection mode="Expanded">
						<!-- <core:ComponentContainer
							id="moduleFlowContainer"
							usage="moduleFlow"
							async="true"
							componentCreated="onComponentFlowCreated"/> -->
							<Text text="Flow"/>
					</uxap:ObjectPageSubSection>
				</uxap:subSections>
			</uxap:ObjectPageSection>
		</uxap:sections>
		<uxap:footer>
			<OverflowToolbar>
			</OverflowToolbar>
		</uxap:footer>
	</uxap:ObjectPageLayout>
</mvc:View>

Detail Controller

There are multiple points here.

First, we implement a simple view binding (_bindView) where we bind the ID passed from List to our view.

Second, some functions for chapter 5 (communication) are already defined which trigger events in other components.
For example, setting or clearing the busy state in the Shell (_setShellBusy and _hideShellBusy) or controlling the layout in List (_listSetLayout).

And lastly, there are handler functions for the componentCreated event of the module ComponentContainer.

Here I am already anticipating something:

As soon as the Comments module was created, the function onComponentCommentsCreated is triggered. In this function, we pass an API created by "_createCommentsApi" to the module, through which "Comments" can call functions of the parent component.

This is one possible way of communication between components.

Another way, which I will discuss later, is accessing the required component via a defined ID. In our example we use a helper function called "getComponent". More on this later.

sap.ui.define([
	"app/utility/controller/BaseController",
	"sap/ui/model/json/JSONModel"
], function(
	BaseController,	
	JSONModel
) {
	"use strict";

	return BaseController.extend("app.detail.controller.Detail", {

		onInit: function() {
			const oViewModel = this._createViewModel();
			this.setModel(oViewModel, "detailView");

			this.getRouter().getRoute("detail").attachPatternMatched(this._handleRouteMatched, this);
		},	
		
		getEntityId: function() {
			return this.getModel("detailView").getProperty("/id");
		},

		_createViewModel: function() {
			const oViewModel = new JSONModel({
				busy: false,
				delay: 50,
				id: ""
			});
			return oViewModel;
		},

		_handleRouteMatched: async function(oEvent) {				
			try {
				this._listSetLayout("TwoColumnsMidExpanded");
				const sId = oEvent.getParameter("arguments").id;
				this._setShellBusy();
				await this._bindView(sId);
				await this._bindCommentsModule(sId);
			} catch(oError) {
				// Error handling
			} finally {
				this._hideShellBusy();
			}
		},

		_createCommentsApi: function () {
			return {
				getEntityId: this.getEntityId.bind(this),
				setShellBusy: this._setShellBusy.bind(this),
				hideShellBusy: this._hideShellBusy.bind(this)
			};
		},
		
		_bindView: async function(sId) {
			this.getModel("detailView").setProperty("/id", sId);
			return Promise.resolve(true);
		},
		
		_bindCommentsModule: async function(sId) {
			const oComponent = this.byId("moduleCommentsContainer").getComponentInstance();
			if(oComponent) {
				oComponent.fireSetEntityId({id: sId});									
			}
			return Promise.resolve(true);			
		},

		/* --- Shell Busy State Handling --- */
		_setShellBusy: function() {
			try {
				this.getComponent("app.shell").fireSetShellBusy();
			} catch (oError) {
				//error handling
			}
		},

		_hideShellBusy: function() {
			try {
				this.getComponent("app.shell").fireHideShellBusy();
			} catch (oError) {
				//error handling
			}
		},

		/* --- Feature List Events ---  */
		_listSetLayout: function(sLayout) {
			try {
				this.getComponent("app.list").fireSetLayout({layout: sLayout});
			} catch (oError) {
				//error handling
			}
		},

		/* --- Module Creation Handling --- */
		onComponentCommentsCreated: function(oEvent) {
			const oComponent = oEvent.getParameter("component");
			oComponent.oAPI = this._createCommentsApi();
			
			this._bindCommentsModule(this.getModel("detailView").getProperty("/id"));
		},		

		onComponentHistoryCreated: function(oEvent) {
		},

		onComponentFlowCreated: function() {
		}
	});
});

Detail Manifest

The Detail feature can contain additional modules that are used within this feature.

In our example, these would be Comments, History, and Flow, for which we have already created the appropriate ComponentContainers in the view. The modules are automatically loaded into the respective ComponentContainers when opening the Detail feature.

{
  "_version": "1.32.0",
  "sap.app": {
    "id": "app.detail",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/SERVICE",
        "type": "OData",
        "settings": {
          "localUri": "localService/metadata.xml",
          "odataVersion": "2.0"
        }
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "fullWidth": true,
    "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.97.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.f": {},
        "sap.uxap": {}
      }
    },
    "componentUsages": {
      "moduleComments": {
        "name": "app.module.comments",
        "lazy": true
      },
      "moduleHistory": {
        "name": "app.module.history",
        "lazy": true
      },
      "moduleFlow": {
        "name": "app.module.flow",
        "lazy": true
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "app.detail.i18n.i18n"
        }
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.f.routing.Router",
        "viewType": "XML",
        "viewPath": "app.detail.view",
        "controlId": "app",
        "controlAggregation": "pages",        
        "async": true
      },
      "routes": [
        {
          "pattern": "Detail/{id}",
          "name": "detail",
          "target": [
            "detail"
          ]
        }
      ],
      "targets": {
        "detail": {
          "viewName": "Detail",
          "viewLevel": 1,
          "viewId": "detail"
        }
      }
    },
    "rootView": {
      "viewName": "app.detail.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    }
  }
}

4. Modules

Modules are smaller, reusable components that are used exclusively (at least in our example) within a feature.

What is defined as a module depends on the specific use case.

In our projects, modules are small functional components that are embedded in multiple features.

For example, a UI5 application with a table for change history, notes (in our example Comments), etc.

The module takes care of its own UI and data retrieval.

The structure can remain very clear and compact:

5. Communication between Components

This is the most important part.

For communication between components (e.g. passing data or triggering functions), there are multiple possibilities.

Some use the EventBus, others build an additional service class.

Here I want to explain two possibilities that we have used in our projects.

Event handling with sap.ui.core.ComponentRegistry

We define custom events in Component.js for functions that we want to use in the respective component.

The following scenario:

As soon as we click an entry in the list of Feature List, we want to see the details in Feature Detail on the right side.
For that, we need to set the layout of the FlexibleColumnLayout in the App.controller.js of Feature List to "TwoColumnsMidExpanded".

We already prepared the necessary steps.

1. Define the event "setLayout" in the List component.

metadata: {
  manifest: "json",
  events: {
	setLayout: {
	  parameters: {
		layout: {type: "string"}
	  }
	}
  }
}

2. Define the event handler in App.controller.js (List).

onInit: function () {
    //...
	this.getOwnerComponent().attachSetLayout(this._onSetLayout, this);
    //...
},

_onSetLayout: function (oEvent) {
	const sLayout = oEvent.getParameter("layout");
	this.getModel("appView").setProperty("/layout", sLayout);
},

To be able to use this event in Feature Detail, we created a helper function getComponent in our example.

getComponent: function (sAppId) {
  let oResultComponent;

  const aComponentNames = Object.keys(sap.ui.core.ComponentRegistry.all());
  aComponentNames.forEach((sComponentName) => {
    const oComponent = sap.ui.core.ComponentRegistry.all()[sComponentName];
    if (oComponent.getManifestEntry("sap.app").id === sAppId) {
      oResultComponent = oComponent;
    }
  });

  return oResultComponent;
}

We pass the app ID to this function, which we previously defined in the component’s manifest.json, and which identifies the component we want to access.

This function is reliable as long as app IDs are maintained properly and kept unique.

This helper can also be centralized. In our example, the function is located in the BaseController, which is outsourced into a separate Utility library.

Utility/
└─ src/
   └─ app/
      └─ utility/
         ├─ controller/
         │  └─ BaseController.js
         ├─ library.js
         ├─ manifest.json
         ├─ package.json
         └─ ui5.yaml

Since each feature inherits from the BaseController, Feature Detail can now trigger the layout event, for example.

_listSetLayout: function(sLayout) {
	try {
		this.getComponent("app.list").fireSetLayout({layout: sLayout});
	} catch (oError) {
		//error handling
	}
},

The ID "app.list" is the ID that we defined in the manifest.json of Feature List.

 "sap.app": {
    "id": "app.list"

As soon as the event is triggered, Feature Detail opens in the right area of the FlexibleColumnLayout.

Passing an API

Another possibility that we also like to use is passing an “API” to another component.

Here we create an object with callbacks and pass it to a newly created or rendered component.

We have already prepared this in Feature Detail as well:

_createCommentsApi: function () {
    return {
        getEntityId: this.getEntityId.bind(this),
        setShellBusy: this._setShellBusy.bind(this),
        hideShellBusy: this._hideShellBusy.bind(this)
    };
},

As soon as the Comments module was created by the ComponentContainer, we pass the API with the callbacks.

onComponentCommentsCreated: function(oEvent) {
    const oComponent = oEvent.getParameter("component");
    oComponent.oAPI = this._createCommentsApi();
     
    this._bindCommentsModule(this.getModel("detailView").getProperty("/id"));
},

This way, the Comments module is able to execute functions of the parent component.

A very rough example:

We set the busy state of the Shell before the view binding via the Feature Detail API in the function "_setEntityId" and clear it again afterwards.

Comments Controller:

sap.ui.define([
  "app/utility/controller/BaseController",
	"sap/ui/model/json/JSONModel"
], function (
    BaseController, 
    JSONModel
) {
    "use strict";

    return BaseController.extend("app.module.comments.controller.Comments", {

        onInit: function () {
            const oViewModel = this._createViewModel();
			this.setModel(oViewModel, "moduleView");

            this.getOwnerComponent().attachSetEntityId(this._setEntityId, this);
        },

        _setEntityId: function(oEvent) {
            this.getOwnerComponent().oAPI.setShellBusy();
            this.getModel("moduleView").setProperty("/id", oEvent.getParameter("id"));
            this.getOwnerComponent().oAPI.hideShellBusy();
        },

        _createViewModel: function() {
			const oViewModel = new JSONModel({
				busy: false,
				delay: 50,
				id: ""
			});
			return oViewModel;
		}
    });
});

6. Conclusion

The examples shown here are intended only as an inspiration, and I therefore kept them intentionally rough and simple.

If you notice early on (or already know) that the application will grow significantly in the future, it can be worth thinking about a larger architecture already at this stage.

If you wait too long, dependencies quickly arise and the restructuring becomes unnecessarily complex and time-consuming.

A clean structure does not only pay off in readability, but also makes later maintenance easier.

Run your app on any UI5 version

2026-01-23T11:26:03.657000+01:00

Here’s a quick, zero-deploy way to test your app against a specific SAPUI5 version right from the browser.

The hack
- Append the UI5 version you want to your app URL:
- If your URL has no query parameters: ?sap-ui-version=1.43.2
- If it already has query parameters: &sap-ui-version=1.43.2
- Example: https://my-app.example.com/index.html?sap-ui-version=1.120.3

What it does
- When your app bootstraps SAPUI5 from the SAP CDN, adding sap-ui-version in the URL instructs UI5 to load its resources from that version.
- In practice, you can flip between versions to quickly check whether a bug is version-specific without touching your build or deployment pipeline.

How to confirm it worked
- Open the browser console and run:
- sap.ui.getVersionInfo().version
- You should see the version you specified in the URL.

Great use cases
- Reproducing customer issues on older UI5 versions
- Validating if a regression disappears on a newer patch
- Comparing behavior across minor versions without rebuilding

Important notes and caveats
- It works when your app loads UI5 from the SAPUI5/OpenUI5 CDN (e.g., …/resources/sap-ui-core.js). If your app uses a self-hosted UI5 (e.g., from an ABAP front-end server), the parameter may not take effect.
- Some apps explicitly pin a version in the bootstrap URL (e.g., …/1.108.3/resources/sap-ui-core.js). In that case, the pinned version will win.
- Browser caching and accelerators can get in the way. If the version doesn’t seem to change, hard refresh the page (Ctrl/Cmd+Shift+R) or clear cache.
- Don’t ship this as a “feature” for end users. It’s a developer convenience for testing and troubleshooting.
- Compatibility isn’t guaranteed across major/minor versions. Always validate critical flows when switching versions.

Bonus: other handy UI5 URL flags
- sap-ui-debug=true — loads non-minified sources for better stack traces
- sap-ui-language=en — forces a language for quick i18n checks
- sap-ui-theme=sap_fiori_3 — switches theme without redeploy
- sap-ui-xx-componentPreload=off — disables component preload during debugging

Wrap-up
Next time you need to answer “Is this a UI5 issue or my app?” save yourself a build and try the URL trick. A simple &sap-ui-version=… can be the fastest path to clarity.

Thank you

SAP UX Q1/2026 Update – Part 2: SAP S/4HANA Cloud Public Edition 2602 and SAP Fiori Launchpad

2026-01-28T09:57:22.998000+01:00

This second post in my series gives an overview of user experience innovations that become generally available with the SAP S/4HANA Cloud Public Edition 2602 release. Highlights are further AI-assisted features: for personalizing My Home, getting explanations for error messages, and Situation Handling recommendations. We also provide the often-requested capability to launch apps via transaction code or SAP Fiori ID, the new “required reading” feature for news in My Home, and mobile phone optimization – to name a few.

Users in SAP S/4HANA Cloud Public Edition can use Joule to access their data: via web browser on desktop, or mobile, via SAP Mobile Start, which also provides access to applications directly. Read about innovations for Joule and SAP Mobile Start in the first blog post introducing the series, and providing information about SAP Build Work Zone:

SAP UX Q1/2026 Update – Part 1: AI, Joule, SAP Build Work Zone, SAP Mobile Start.

Below, you will get an overview of SAP S/4HANA Cloud Public Edition UX innovations in these areas:

SAP Fiori launchpad
o. New shell bar now the default
o. Launch apps directly via Transaction Code / Fiori-ID
o. Making New Apps Available to Users
- Activating new apps, since now delivered inactive
- New Experience Switch
o. Further improvements for the launchpad
My Home
o. Manage News app now with “must be read” feature
o. Enhanced Personalization
o. AI-Assisted UX Features:
- AI-Assisted Smart Personalization of My Home for Applications
- AI-Assisted Error Explanation
- AI-Assisted Situation Handling
SAP Fiori elements mobile phone optimization
UI Adaptation
Improvements in details

Beyond these, we have a number of interesting new UX innovations for beta testing and early adopters with the 2602 release. I plan to cover these in my next blog post in the next few days.

Many of the UX improvements in details are enabled by our UI framework (SAPUI5 and SAP Fiori elements) and hence also available to customers and partners developing their own applications. Note however that the enabled AI-assisted features are only available for extensions built directly on the SAP S/4HANA Cloud Public Edition system.

Below you’ll see AI innovations from our UX framework as well as some selected application highlights. You can get a more comprehensive overview of the latest AI innovations in these blog posts, which also include application specific examples:

SAP Fiori Launchpad

Let’s look closer at these UX updates:

New shell bar now the default, with updated design of notifications and user menu.
Launch apps directly via Transaction Code / Fiori-ID.
Further improvements.

New shell bar now the default

We have made design improvements which are relevant for a consistent user experience across the entire SAP Business Suite. The new shell bar first became available as an opt-in choice for customers with SAP S/4HANA Cloud Public Edition 2508 as described in my blog post covering 2508. With the 2602 release, it is now activated by default.

Benefits of the New Shell Bar

The new shell bar has these benefits:

The product name is displayed prominently now to the right of the SAP logo. In this case the name is “S/4HANA Cloud”.
Updated notifications design.
Updated user menu design.

Product Name Displayed

The immediately visible difference with the new shell bar is that 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 1. The logo and the name are all contained within a clickable area, which brings the user to the start page (i.e. My Home).

Figure 1: New shell bar, now activated by default. Alt Text: A screenshot of Manage Sales Orders app, with the shell header highlighted, looking as described in the text.

Updated User Menu

The new user menu design shown in Figure 2 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 2: 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 2 fits better with the overall design of SAP S/4HANA Cloud Public Edition, and provides simplier interactions. By default notifications are sorted by date, with grouping by “Today”, “Yesterday”, “Last Week”, “Last Month”, as you can see in Figure 3 below. Users can also choose to sort by importance.

Figure 3: Updated design of notifications. Alt Text: A short video showing the user selecting to display the list of notifications in the groups “Today”, “Yesterday” and “This Week”.

Recommendation: Check Test Automation and RPA

We advise that you check any test automation and RPA (Robotic Process Automation) you may have, since you may need to make some adjustments – in particular if you access the user menu, for example to log off at the end of a test.

In case you need more time to do this, you can opt-out of the new shell bar for this release.You can switch it off via “Activate New Features”, Feature “/UI2/SHELL_BAR_TOGGLE”.

Important: do switch it back on before next upgrade! There is no opt-out planned from 2608 onwards.

Launch apps directly via Transaction Code

Customers have been requesting this for quite a while now, so I am happy to announce that with the 2602 release, users can launch applications directly via the transaction code (t-code).

This is particularly helpful for those users who have experience with older SAP ERP systems, such as SAP ECC (ERP Central Component), and are used to launching transactions by entering the “t-code” (transaction code) in the SAP GUI for Windows shell bar. To launch a transaction VA01 (Create sales order) in SAP GUI for Windows, users enter “/nVA01” if they want it to open in the same window, and “/oVA01” if they want it to open in a new window. Lower case “/nva01” or “/ova01” also works. Furthermore, users could go to the start page by entering “/n” or “/o”, opening it either in the same window or in a new window respectively.

We have implemented the same logic in the search field in the launchpad shell bar, but with “/o” now creating a new browser tab rather than opening a new window.

We have also extended it, so that users can also enter the t-code after “/n” or “/o”. Figure 4 shows what it looks like, and Figure 5 shows a short video of it in action for an example using /nmm03 (Display Material) to open the classic UI and /nF217A (Customer – 360 View) to open a Fiori app.

Figure 4: Launching a classic UI via the transaction code “va01”. Alt Text: The shell header is shown, with the search field showing “All” and the search term /nva01 entered.

Figure 5: Launching applications directly via transaction code. Alt Text: A short video showing the user entering /nmm03 and /nF217A as described in the text.

You can determine an application’s t-code via the About entry in the launchpad user menu. We have also assigned transaction codes to Fiori apps, they are often identical to the Fiori ID, but not always.

Making New Apps Available to Users

New apps for business users can help them work more effectively, and get their work done more easily – but only if they actually use them! That means that they need to be activated and hence made available to users in the first place.

When one or more new applications are delivered that replace an existing application, users of the existing application need to be informed that a replacement is available to them. This is handled by the New Experience Switch. This is especially important if the existing application is about to be deprecated.

The next two sections cover these two topics in more detail: activating new apps, and the New Experience Switch.

Activating new apps, since now delivered inactive

With the 2602 release we no longer activate new apps automatically, so as not to disrupt existing users, as well as to ensure that users are not automatically granted authorizations that they should not have.

In order to activate an application, i.e. a Fiori app or a classic UI, the underlying IAM (Identity and Application Management) apps of type “App Authorization Variant” need to be activated. These particular IAM apps were introduced a while ago in order to allow finer-grained authorizations for applications.

For example, the My Inbox app has a standard view and an expert view. You will only be able to access the expert view if the corresponding IAM app for the expert view has been activated by your administrator. If your administrator has only activated the IAM app for the standard view, then you will be able to access the My Inbox app, but only its standard view.

Since new apps provided by SAP are no longer activated automatically, administrators need to activate the underlying IAM apps of type “App Authorization Variant”. Only then will users be able to find the apps via the launchpad search or in the App Finder, see the corresponding tiles on pages in the launchpad, and assign them as favorites in My Home.

Find out more in the documentation:

New Experience Switch

The New Experience Switch informs users that a replacement of the application that they have opened is available to them, and offers a toggle in the shell bar to directly switch to the new application. You can see what this looks like in the top left image in Figure 6.

If the existing, old version of the app is planned to be deprecated and removed in a future release beyond the next one, then the information icon in the shell bar next to the New Version toggle is replaced by a warning icon, as shown in the top right image in Figure 6.

Finally, if the existing, old version will be removed with the upgrade to the next release, an alert is shown instead of a warning, as shown in the bottom image in Figure 6.

Figure 6: New Experience Switch. Clockwise from top left: Information, Warning and Alert pop-overs. Alt Text: Three screenshots showing the respective popovers, each with a button “Switch to New Version”. The first two include a carousel giving information about the benefits of the new version. The last one include in red “August 2025” as the month when the app is planned to be removed.

The three phases described above were introduced already with the 2508 release.

With the 2602 release, we also support cases where one application has multiple successors. Figure 7 shows an example.

Figure 7: New Experience Switch warning for an application with multiple successors. Alt Text: Screenshot showing the popover containing two cards, one for each of the specialized versions available as successors.

Also new with 2602 is the option for users to provide feedback when the open up the new version of an application (Figure 8). When they select this, a survey is opened with one page of questions about the new version of the app.

Figure 8: New Experience Switch welcome pop-over for new app, now with “Provide Feedback” button. Alt Text: Screenshot showing the pop-over, with a carousel giving information about the benefits of the new version.

To find out more, have a look at the documentation, or at the SAP note for the list of apps that currently have successors making use of the New Experience Switch:

Documentation: Switching to a New App Version
SAP Note 3545277 - New Experience Switch in SAP S/4HANA Cloud Public Edition: Overview of Apps

Further Improvements for the Launchpad

Enterprise Search Shows All Smart Business Tiles

Business users can now find all their Smart Business tiles (typically insight tiles with KPIs and/or mini charts) using enterprise search in the launchpad shellbar. Since users can define their own tiles via Smart Business, with specific filter values, this means that they can also find these personal tiles using search.

Did you know that enterprise search supports a number of search operators that you can use when searching for apps, or indeed when searching for business objects? Operators such as OR, *, - and “”.

You can also further filter search results, export them, share them or save the search as a tile. Find out more in the documentation:

Searching and Launching Apps or Business Objects.

Administrators can Upload and Download Spaces

In the Manage Launchpad Spaces app of the SAP Fiori launchpad, administrators can download existing spaces together with their assigned pages and upload them again to another system.

This enables you to transfer spaces and their assigned pages to other systems, for example, when you can't use transports, meaning that you can improve productivity and consistency across systems. Find out more:

Documentation: Downloading and Uploading Spaces

My Home

We continue to enhance My Home to make it even more popular with users. In this release, we have:

Manage News app now with “must be read” feature
Enhanced Personalization
AI-assisted smart personalization of My Home for applications
(this is covered in the next section AI-Assisted UX Innovations)

We are also providing the feature AI-Assisted Smart Solution for Situations in My Home for beta-testing, which I will showcase in part 3 in this series of blog posts.

Manage News App now with “Must be Read” Feature

News articles containing essential company information can now be designated as required reading. All users must acknowledge that they have read and understood the content.

The main benefits of this feature are:

Strengthens accountability: When reading is mandatory, employees can be held accountable for understanding essential information. This practice helps ensure compliance with legal, safety, and policy-related requirements.
Ensures consistent knowledge across the organization: All employees receive the same information, minimizing knowledge gaps and miscommunication.
Enhances change management : During periods of transition—such as the introduction of new policies or process changes—required reading ensures that all employees understand the reasons behind and the impacts of those changes.

Figure 9 shows what this looks like for a user: a required reading pop-over appears on their screen. The article has also been flagged as “Containing Critical News”.

Figure 9: An example of a news article that is required reading. Alt Text: A screenshot of My Home with a pop-over “Required Reading” that is also highlighted with “Contains Critical News”. The news article has an image at the top, followed by text showing the first part of the article. The “Done” button is greyed out, the “Remind me later” button is visible.

Figure 10 below shows the Manage News app, with the toggles Critical and the new Required Reading one.

Figure 10: The Manage News app has a toggle to mark articles as “Required Reading”. Alt Text: Screenshot of the Manage News app with the toggles set to “Yes”, and some news text in the Description field.

Enhanced Personalization

A great strength of My Home is the degree to which users can personalize it to suit their needs. We have now enhanced personalization further by letting users control the visibility of News and Pages separately within the News and Pages section of My Home.

If they are not so interested in news, they can choose to hide it, with the additional benefit of having all the pages only take up one row of vertical space rather than two, as shown in Figure 11. Figure 12shows how users can do the personalization.

Note that even with the news hidden, they will still receive required reading: when they log on, the required reading appears as a pop-over that can only be closed by confirming that one has read and understood the content.

Alternatively, users can decide to only show news and not pages. They can of course also decide to show both news and pages, as before, or hide both.

Figure 11: My Home with enhanced personalization, showing News deselected and Pages selected. Alt Text: A screenshot of My Home, with eight cards in one row in the Pages section, below the ToDos section showing one situation and the Apps section.

Figure 12: My Home Settings pop-over with the new selectors for News and Pages within the News and Pages section. Alt Text: A screenshot showing the Layout part of My Home Settings, where users can select or deselect sections. For the News and Pages section, News is deselected, Pages are selected.

AI-Assisted User Experience

When AI is embedded directly into the application UI to give users a better user experience, as opposed to being accessed via the Joule window, we talk about “AI-Assisted User Experience”.

In SAP S/4HANA Cloud Public Edition 2508, we distinguish between AI base features and premium features:

Base features are free of charge, and only require that the customer signs the SAP AI Terms, which can be done via this link.
Premium features require SAP AI Units to be in place. Those listed here also require Joule Premium for Financial Management. Customers can activate this via SAP for Me -> Portfolio & Products -> Business AI.

The following are now generally available as premium features (they were both in beta testing with the 2508 release) and are described in more detail below:

AI-assisted smart personalization of My Home for applications.
AI-assisted error explanation.

This feature is still in beta, but planned to become generally available with the 2602 release on March 12th:

AI-assisted situation handling.
See below for more details.

AI-Assisted Smart Personalization of My Home for Applications

You could already use natural language and AI to personalize your My Home by adding Insights Cards, since the 2508 release. Now, with 2602, you can use natural language to find and add applications and insights tiles.

To do this, use the AI button “Add Content” in the salutation bar at the top of My Home, as shown at the top of Figure X. Clicking on this brings a pop-over with the option to add Insights Cards or, as shown, Apps & Insights Tiles. By describing what you want to do, the system will propose suitable applications and Insights Tiles. If you select them and click “Add”, they will be added, either as an entry in your Apps Favorites section, or in the Insights Tiles section. Figure 13 shows these main steps.

Figure 13: AI-Assisted Smart Personalization of My Home for Applications. Alt Text: The image shows three screenshots: at the top an extract of My Home showing the blue salutation bar, with an AI button “Add Content” on the right. An arrow has been added linking it to the second screenshot, where a popover “Add Content” is shown, where the user has entered “I want to monitor sales orders what app should I use to do this”, and two of four results are listed and visualized: “Track Sales Orders” and “Manage Sales Orders” (shown as an insight tile). Below that a screenshot of the outcome in My Home: the former is added to Apps Favorites, the latter to Insights Tiles.

Watch a demo and read more:

Video: AI-Assisted Smart Personalization of My Home for Applications in SAP S/4HANA Cloud Public Edition (1:07 min.)
SAP Discovery Center: Smart Personalization of My Home.

AI-Assisted Error Explanation

New users who are unfamiliar with the system may find that the short error messages give too little information for them to fully understand the issue, and what to do about it. This is where the Summarizing and Guiding and Recommending AI-patterns can help: the AI-Assisted Error Explanation in SAP S/4HANA Cloud Public Edition uses these to summarize information which explains the error and provide a recommendation for how to resolve it. Figure 14 shows an example where a user has entered a Sold-to-Party ID which does not exist in the system.

Note that this feature is also only available for applications based on SAP Fiori elements.

Figure 14: AI-Assisted Error Explanation in SAP S/4HANA Cloud Public Edition 2502. Alt Text: On the left part of a data entry screen is shown, with the field “Sold-to Party containing “ABC” marked red and below that a popover with an error message “No customer master record exists for sold-to-party ABC”, and in the text line below that the AI icon followed by “Generate Explanation”. A fat arrow leads from this text to the image on the right, which indicates what happens when you click on this text: you get a popover with an short Explanation section and a longer Resolution section with numbered actions.

Have a look:

Video: AI-Assisted Error Explanation (45 seconds)
SAP Discovery Center: SAP S/4HANA Cloud Public Edition, error explanation.

AI-Assisted Situation Handling

The Intelligent Situation Handling framework helps users deal with not-so-frequent business situations, by notifying them of the situation, giving them an overview of the situation and providing contextual information to help resolve it. Ideally, the system also offers recommendations on how to go about resolving it.

Currently still in beta testing, we plan to make AI-assisted situation handling generally available with the 2602.1 release on March 12th.

Figure 15 shows what this looks like for a situation where a purchase contract is going to expire soon. The system is able to evaluate the company policy, in this case provided in the form of a decision matrix, and informs the user that a Request for Proposals is not needed for this contract, since its contract value is below the threshold.

Figure 15: AI-Assisted Situation Handling in SAP S/4HANA Cloud Public Edition 2602, showing how the user is notified in My Home and can navigate to the situation page and there generate a recommended solution. ALT Text: The To-Do card “The purchase contract will expire soon” is shown at the top, with an arrow leading to the image below of the situation page, showing a “General Info” section and a “Recommended Solution” section, which only contains the text “You haven’t generated a solution yet. Would you like to do that now”, along with a “Generate” button with the AI icon. From there an arrow leads to the bottom image which shows the recommended solution text, along with thumbs-up and thumbs-down feedback buttons.

To see it in action, watch this:

Video: AI-Assisted Situation Handling in SAP S/4HANA Cloud Public Edition (1:00 minutes).
SAP Discover Center: AI-assisted Situation Handling.

The extended framework for Situation Handling allows customers to define their own situations. It is very powerful, but we have received feedback that it can be challenging for first time customers and partners to get it up and running. Hence Angelika Salmen has published this blog post to help you get started:

My First Situation with the Extended Framework.

For further information about Situation Handling, have a look at the links at the end of the above blog post.

SAP Fiori elements mobile phone optimization

We have made significant improvements in the overall user experience for accessing selected applications from your mobile phone, with layouts and interactions tailored specifically for smartphones.

The recommended way to access SAP Fiori web applications from your mobile phone is via SAP Mobile Start, which treats web applications the same way as native mobile applications: users can define favorites, and see all their apps, both web and native mobile, in the Apps view.

The currently supported SAP Fiori elements based applications are now rendered in a more user-friendly way, reducing complexity for users on the go by removing non-essential features, patterns and services that are not suited for mobile use.

This results in improved productivity and speed with simplified navigation, faster access to actions and optimized information density.

The new layout is provided by the mobile mode. Users can switch on the previous desktop mode in case they need access to any of the non-essential features hidden in the mobile mode. Figure 16 shows an example of a list report in the desktop mode (on the left) and what it now looks like rendered in the mobile mode (on the right).

Figure 16: SAP Fiori elements mobile phone optimization. On the left a list report rendered using the previous desktop mode, on the right using the new mobile mode. Alt Text: screenshots of a list report as it would appear on a mobile phone. On the left with filter bar and filters visible, so that only one line of the list is shown; on the right they are hidden, so that three lines of content are shown.

Currently these five apps are supported:

My Home
Customer 360 View (F2187A)
Manage Direct Activity Allocation (F3697A)
Manage Material Serial Numbers (F6879)
Manage Production Supply Areas (F6935)
Serial Number History (F7368)

We are eager to learn from our customers to see how well the current functionality meets users real-life needs, and where we could improve the experience. If you are interested in trying this out and providing feedback, please sign up for our Early Adopter Care program.

UI Adaptation

Adapt UI is a key user extensibility tool for making no-code / low-code, upgrade-safe adaptations and extensions to SAP Fiori apps. We have continuously enhanced its scope, so that it now supports most of the common changes.

A key user is a business expert who is authorized to make changes on behalf of other users – for example a team member who is interested in technology. The goal of key user extensibility is to empower business users to be able to adapt their working environment to suit their needs, without having to rely on system administrators.

Adapt UI is easy and safe to use: you can undo/redo changes, revert to a previously activated version or even revert to the original app.

Many Fiori apps contain object pages, that summarize information on a business object such as a sales order or a product. Adapt UI offers a large amount of options for adapting and extending object pages:

Hide/show SAP-defined fields
Add custom fields created with the SAP Fiori app Custom Fields (ID F1481)
Combine/split/rearrange/group/ungroup fields
Hide/show SAP-defined tabs, sections, tables, or action buttons
Change the configuration of tables (view settings, initial load, scrolling thresholds etc. – as featured in my previous blog post)
Change text arrangement (ID only, Text first, Text las) – also featured in my previous blog post.
Rename labels
Hide/show object header content
Embed web-based content in the object header or a section.

Key users who are authorized to use adapt UI can open it directly from their user menu in the launchpad. Once in started, Adapt UI shows you directly on the screen what changes you can make.

To find out more about this and watch a demo showing how it works and how easy it is, I thoroughly recommend this 13-minute video:

Video 1: Extending SAP Fiori Object Pages with Adapt UI. Click on the image to go to the video.The video shows you:

How to recognize an object page
What is Adapt UI
Prerequisites for Adapt UI
Demo
Tips for Working with Adapt UI
Key Takeaways
Resources worth knowing. These are:
- SAP Design System - SAP Fiori: Object Page Floorplan
- SAP Help - SAP Fiori Launchpad User Guide: Adapting SAP Fiori UIs at Runtime – Key User Adaptation.
- SAP Learning - Tutorials: Key User Adaptation for SAPUI5 Applications.

Note that the video was created for SAP S/4HANA Cloud Private Edition, so the transport step at the end is different in SAP S/4HANA Cloud Public Edition – all the rest is relevant also for public edition, which is why I included it here.

The Adapt UI functionality is powered by SAPUI5 Flexibility technology.

Improvements in Details

User research has shown that it is easier to work with tables that contain hundreds of entries when the tables are implemented as a grid table rather than a responsive table.

Hence, with the 2602 release, we have looked at apps containing tables that typically have hundreds of entries and have changed the type of table used from a responsive table to a grid table.

For the full list of enhancements, have a look at the What’s New Viewer:

UX in What’s New Viewer for SAP S/4HANA Cloud Public Edition 2602.

Continue reading

I hope you enjoyed this second part, covering what is now generally available with SAP S/4HANA Cloud Public Edition 2602 and SAP Fiori launchpad. Here's a link to part 3, covering exciting new UX innovations available for beta testing with the S/4HANA Cloud Public Edition 2602 release:

SAP UX Q1/2026 Update – Part 3: AI (Beta) Innovations in SAP S/4HANA Cloud Public Edition 2602.

Do keep posting your experiences and recommendations yourself in the SAP Community, with the SAP Fiori and/or the User Experience tag! In case you are wondering how to get a list of the most recent blog posts on SAP Fiori and User Experience in our new SAP Community, use these links:

Fix pdfmake Table Width Issues with Long Continuous Text and Special Characters (SAP UI5)

2026-01-29T05:49:14.250000+01:00

Introduction
I recently hit a really specific edge case while building a PDF feature for our SAP UI5 app. We were using pdfmake, and honestly, everything looked great during standard testing. But then the backend sent over some real-world data—specifically these massive, continuous strings of text—and the whole layout just fell apart.
Even though we had set fixed column widths, the table completely ignored them. The text refused to wrap, spilled right over the borders, and basically ruined the document structure. It’s one of those issues you don't usually catch until you throw messy, non-standard data at your code. In this post, I’ll break down exactly why pdfmake struggles with this and the simple workaround we found to keep the layout intact without changing how the text looks.

Problem Description
We get a specific edge case while building a PDF feature in our SAP UI5 app using pdfmake(pdf playground). Everything looked fine until the backend sent over a massive string of text, which is mix of special characters. Even though we had fixed-width columns, the table ignored them—text wouldn't wrap, it spilled over the cell borders, and basically broke the whole layout.

The issue became easier to reproduce when the input text had:
Very long continuous strings
No spaces
A lot of special characters

Example:
ssssssssss@@@@@@@@@@@@@@@uuuuuuuuuuuuuiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

Even noWrap: false was already set, it didn’t help.

The reason became evident after studying the text analyzing logic of pdfmake.

When the text consists of a single, continuous word, pdfmake determines the whole length of the string from considering it as a single, unbreakable unit.

Both of the font issue and the PDFmake bug aren't the root cause of this. Wrap points can't be put into continuous text; additionally fonts like Roboto or NotoSans only aid in character rendering.

This will fix when we insert invisible wrap points into the string before sending it to pdfmake.

We used a zero-width space character that is (\u200B), which is invisible for human eye but allows PDF engines to wrap text safely

Code:

function safeBreak(str) {
  return (str || '').replace(/(.{1})/g, "$1\u200B");
}

This will not change the text looks in the PDF, but it gives pdfmake to break point to respect the table width and wrap content correctly.

The user can view the PDF in exactly the same manner. So as for pdfmake is properly wrap the text so the table width, this simply adds a few break points.

This turned out to be a invisible (for human eye) edge case when generating PDFs with dynamic data. Adding zero-width spaces solved the problem without affecting visible output.

Before Applying the Fix

After Applying the Fix

Try the Working Demo
If you want to see how this project, we put together a complete SAP UI5 sample app. It covers the basic pdfmake setup and shows exactly how to handle those long strings inside table cells so they don't break your layout. You can check out the code here: PDF_SAP

Conclusion
Long, unbroken strings are definitely one of those hidden edges when you're generating PDFs with dynamic data. Since pdfmake needs explicit breakpoints to know when to wrap a line, it will break your table layout if it doesn't find them.
We went with the zero-width space (\u200B) in the end because, frankly, it just works. It makes the text wrap properly so the table widths doesn't get destroyed, but visually, you can't tell the difference, this annoying bug can be easily and safely fixed.

Ask Me Anything with SAP Champions – Monthly Series (Session 1)

2026-02-02T08:07:05.474000+01:00

Hello Community,

My name is Sebastiano Marchesini, SAP Champion and SAP BTP architect. I moved from Italy to the US and currently work as a technology lead consultant, focusing on SAP BTP and enterprise architectures. I also love running 🙂

From my experience at SAP TechEd, learning sessions, and live events, the most valuable moments are always the same:

Asking questions, any kind of question, and getting direct, honest answers from experts.

For this reason, the SAP Champions are launching a new monthly AMA (Ask Me Anything) series starting in 2026.

Each month, a different SAP Champion with a specific area of expertise (BTP, architecture, integration, development, automation, career growth, and more) will answer questions from the community, both technical and non-technical.

This blog post is the first of the series.

You are invited to ask any questions you have, openly or anonymously, using the form below.
No topic is off-limits: architecture doubts, product choices, real-life SAP challenges, or even questions about working in the SAP ecosystem, running (lol).

Let’s make this a space for open discussion, real experience, and practical answers.

You can ask anonymously here

AMA Champion Anonymously Questions

(or below as anwer of the blog)

Submit your questions by early February and get answers in our upcoming SAP Communities video and blog recap.

This AMA session will be open for questions until the last week of February.

After that, selected questions will be answered in a recorded video published on the SAP Communities YouTube channel.
A blog recap summarizing the questions and answers will also be published for the community.

Only questions submitted during this window will be considered.

Declarative UI Integration Cards - Consistent Framework With Flexible Content Capabilities

2026-02-02T16:34:17.547000+01:00

Introduction

Since the early announcement of the UI Integration Cards paradigm (as described in this article), we have been busy expanding the functionality of Cards, resulting in an ever-growing adoption across almost all SAP products.

Today, Cards are utilized in a range of solutions and scenarios, from the SAP S/4HANA home page with “To-Do” and Insights Cards, to SAP Build Work Zone, where Cards from any SAP product can be easily assembled together, to Joule, and also on mobile-native screens.

The fundamental principles that underpin this technology, as detailed on our Card Explorer landing page, are that it is designed to be Declarative, Easy to consume, and Consistent.

Declarative: configured by a manifest.json ==> Low to No-code skills required (AI-gen@UI5 MCP server)
Easy to consume: product and UI-technology agnostic ==> Mobile-ready / Integration-ready via configuration
Consistent: predefined card types in Fiori/Horizon design ==> Thoughtfully designed / Product Standards covered

Key Concepts and Capabilities

In this article, we’ll detail the key qualities and advantages of the Declarative Integration Cards. Declarative Card types offer a range of display options and minimalist interactions, including List Card, Table Card, Timeline, Calendar, Analytical, and Object Card with input elements.

Declarative Card types enable the fast and easy creation of “Home page” and “Overview” pages, where Card developers can integrate data from various sources to display relevant business data for any SAP or non-SAP product.

Declarative and Consistent

Integration Cards are straightforwardly defined using a single JSON descriptor file called manifest.json. This file is all you need to get a fully functional and nicely rendered representation of business data in the form of a Card. Once you have this descriptive manifest.json file, our Card Runtime can process it and render the card in a web browser or any mobile-native device, regardless of the UI framework. Hence – declarative!

Anatomy of Declarative UI Integration Cards

Examining the Card's structure, we can identify three separate parts:

The Card Header provides the card's identity, typically represented by a title, subtitle, and icon or avatar/image attributes. It can also display more dynamic or complex data, such as the special Numeric Header, which prominently features a key numeric indicator, or an extended Header.

The Content / Data is the main part of the card that displays relevant business data in a selected type of view. These data types can be List, Table, Object, Analytical, Timeline, or Calendar.
The Footer area is usually designated for intended Card interaction elements, such as action buttons or links for navigation.

The general structure of a declarative manifest.json looks like this:

{
  "sap.app": {
    "id": "my.card.id",
    "type": "card",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.card": {
    "type": "List",  // Card type: List, Table, Object, Analytical, Timeline, Calendar
    "header": {
      // Header configuration
    },
    "content": {
      // Content configuration specific to card type
    },
    "footer": {
      // Optional footer with actions
    }
  }
}

The Card Header

The card header displays essential information about the card by grouping a set of card attributes and presenting them at the top of the card. The "sap.card"/header section is mandatory. Providing it together with the title is essential for proper screen reader support and other functionalities.

Integration Cards support three header configurations:

Default Header - Standard header with title, subtitle, icon, status
Numeric Header - KPI-focused header with prominent numeric indicators
Extended Header with Info Section - flexible layout within either kind of header, capable of accommodating various components

All headers support actions, data timestamps, visibility control, and text wrapping options.

Default Header

The standard header displays general information about the card.

"header": {
	"title": "An example title",
	"subtitle": "Some subtitle",
	"icon": {
		"src": "sap-icon://business-objects-experience",
		"visible": true
	},
	"status": {
		"text": "5 of 20"
	}
}

Numeric Header

The Numeric Header is optimized for displaying KPIs, metrics, and quantitative data with prominent visualization.

"header": {
	"type": "Numeric",
	"title": "Project Cloud Transformation",
	"subtitle": "Revenue",
	"unitOfMeasurement": "EUR",
	"mainIndicator": {
		"number": "44",
		"unit": "%",
		"trend": "Down",
		"state": "Critical"
	},
	"details": "Some details",
	"sideIndicators": [
		{
			"title": "Target",
			"number": "17",
			"unit": "%"
		},
		{
			"title": "Deviation",
			"number": "5",
			"unit": "%"
		}
	]
}

Extended Header with Info Section

Both header types can be extended with an info section for additional grouped information.

Currently, only items of type "Status" are available.

"header": {
	"title": "Project Cloud Transformation",
	"subtitle": "Revenue",
	"infoSection": {
		"rows": [
			{
				"items": [
					{
						"type": "Status",
						"value": "On Track",
						"state": "Success",
						"inverted": true,
						"showStateIcon": true
					},
					{
						"type": "Status",
						"value": "OKR Relevant",
						"state": "None",
						"inverted": true,
						"showStateIcon": true
					},
					…
				]
			}
		]
	}
}

The Card Content Area

The Card content area defines how data is rendered by selecting a declarative card type, each offering predefined structures and configuration options to visualize business information in a consistent and self-contained way.

List Card – Displays multiple items in a vertical list with flexible layouts to present titles, descriptions, and multiple attributes per item.
Table Card – Visualizes structured data in rows and columns with configurable formatting, alignment, grouping, and item count to support clear data comparison and summarization.
Object Card – Presents information about a single object in configurable groups, supporting rich attribute types, visibility control, and consistent usage across SAP products.
Analytical Card – Displays analytical business data using chart visualizations with defined dimensions to ensure accurate and meaningful insight representation.
Timeline Card – Shows time-related information as a sequence of events arranged chronologically with clear visual flow and contextual details.
Calendar Card – Displays agenda or timetable data for an entity with interactive date selection, semantic legends, and dynamic data updates.

Stay tuned for future articles with details for every Card type.

The Card Footer

The card footer, located at the bottom of the card, is used for important or routine actions that directly impact the card functionality, such as "Approve" or "Submit" actions. It serves as the designated area where users can interact with or respond to the card's content through an Actions Strip—a flexible and responsive overflow toolbar that accommodates a variety of interactive elements.

The Actions Strip supports diverse interaction patterns through three primary element types: Buttons for actionable operations, Links for navigation purposes, and Labels for displaying contextual information. Additionally, ToolbarSpacer elements provide precise control over the visual arrangement of actions, enabling left-aligned, right-aligned, or centered positioning within the footer.

Each action element can be extensively configured to match specific use cases. Buttons offer multiple visual styles (Accept, Reject, Transparent, Emphasized) and can display either text, icons, or both—with the ability to prefer icon-only display in space-constrained layouts. All elements support standard properties including tooltips, visibility conditions, accessibility attributes, and overflow behavior through overflowPriority settings (High, Low, NeverOverflow, AlwaysOverflow), which determine how actions adapt to different screen sizes.

Actions themselves can be of various types: Navigation actions for opening URLs or triggering deep links, Submit actions for posting data to backend services, Custom actions that invoke extension methods. Each action can be configured with parameters and enabled/disabled states, often bound to dynamic data for context-sensitive behavior.

Here's an example demonstrating the versatility of footer configurations:

"footer": {
  "actionsStrip": [
    {
      "type": "Link",
      "text": "View Details",
      "icon": "sap-icon://detail-view",
      "actions": [
        {
          "type": "Navigation",
          "parameters": {
            "url": "{detailsUrl}"
          }
        }
      ]
    },
    {
      "type": "ToolbarSpacer"
    },
    {
      "text": "Approve",
      "buttonType": "Accept",
      "overflowPriority": "High",
      "actions": [
        {
          "type": "Submit",
          "url": "/api/approve",
          "method": "POST"
        }
      ]
    },
    {
      "buttonType": "Transparent",
      "icon": "sap-icon://email",
      "preferIcon": true,
      "text": "Contact",
      "tooltip": "Send an email",
      "actions": [
        {
          "type": "Navigation",
          "parameters": {
            "url": "mailto:{company/email}?subject={company/emailSubject}"
          }
        }
      ]
    }
  ]
}

Beyond the Actions Strip, the footer supports additional built-in features that enhance usability. It provides built-in pagination/scrolling support through the "Show More" button, which elegantly handles content overflow by opening cards in an resizable Dialog view. When cards are displayed within dialogs, the footer automatically manages a "Close" button, streamlining the user experience without requiring explicit configuration. This is achieved by defining paginator element in the footer declaration, which automatically will show an extra "Show More" button, next to custom-defined actions. See it in action in this sample.

		"footer": {
			"paginator": {
				"totalCount": "{/itemsCount}",
				"pageSize": 5
			}
		}

The footer's visibility can be controlled dynamically through binding expressions, allowing it to appear only when specific conditions are met:

"footer": {
  "visible": "{= ${/itemsCount} > 0}",
  "actionsStrip": [ /* actions configuration */ ]
}

Final Thoughts

You can use Declarative UI Integration Cards as an entry point to an app or if you want the user to focus on a single object, topic, or group of objects.

Avoid building complex, small apps within the card that require navigation flows. Instead of being complex or multifunctional, each card is designed to serve a specific role or display business data in a clear manner.

Clarity and simplicity are prioritized in Declarative UI Integration Cards, enabling users to easily understand and integrate the cards without unnecessary complexity or ambiguity.

The architecture's three-part structure—header, content, and footer—establishes a predictable framework that accelerates development while ensuring consistency across diverse use cases. This structured approach not only simplifies the creation process but also enhances the end-user experience through familiar, intuitive patterns that work seamlessly across all SAP solutions.

By embracing the declarative paradigm, developers can rapidly compose powerful, data-driven cards without deep technical expertise, while maintaining the enterprise-grade quality and accessibility standards that users expect. The result is a flexible, scalable solution that transforms how business information is surfaced and acted upon across the digital workplace.

Reading Excel and Displaying Data in SAPUI5 Tables – Static vs Dynamic Columns

2026-02-04T10:37:07.641000+01:00

Hi,

While working on SAPUI5 application, i came across a common business requirement where user needed to upload excel files and review the data before further processing

SAPUI5 does not provide built in support for reading excel files on the client side, so i explored a client side solution that allows users to upload an excel, reads content and display it in the UI

Introduction
In many UI5 applications there will be a common scenario to allow users to upload Excel files and review the data before proceeding with further business process. since SAPUI5 does not provide built in support for reading excel files, developers need to rely on external libraries. So in this blog i will read excel data using xlsx library and display it in the SAPUI5 table.

Pre-requisites

Basic knowledge of SAPUI5

Sapui5 project setup

Xlsx.js file should be added in compinent.js file

Component.js file

var jQueryScript = document.createElement('script');
                jQueryScript.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/jszip.js');
                document.head.appendChild(jQueryScript);
           
                var jQueryScript = document.createElement('script');
                jQueryScript.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.js');
                document.head.appendChild(jQueryScript);

What we are going to do here:

Upload excel file using FileUploader

Read the file using javascript fileReader

Excel file will be parsed using XLSX library

Extract the sheet from workbook

Will convert sheet data into json format

We will set json data to JSON Model

We will bind json model to table in the UI

Note: the column names in the excel should be same as the properties used in the SAPUI5 table

Controller.js File

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/m/Column",
    "sap/m/Text",
    "sap/m/ColumnListItem"
],
    /**
     *  {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageToast, JSONModel, Column, Text, ColumnListItem) {
        "use strict";

        return Controller.extend("project1.controller.View1", {
            onInit: function () {

            },
            
            onUpload:function(oEvent){
                debugger
               var file =  oEvent.getParameter("files")[0]
                var that = this
                var reader = new FileReader()
                    reader.onload= function(e){
                        debugger
                        var data = e.target.result;
                        var workbook = XLSX.read(data, { type: "binary" });

                        // Take first sheet
                        var sheetName = workbook.SheetNames[0];
                        var sheet = workbook.Sheets[sheetName];

                        // Convert to JSON
                        var jsonData = XLSX.utils.sheet_to_json(sheet);

                        // Get your existing model from manifest.json
                        var oModel = that.getView().getModel("empModel");

                        // Replace empDetails with Excel data
                        oModel.setProperty("/empDetails", jsonData);
                    }
                    reader.readAsBinaryString(file);

            },

        });
    });

XML View

<mvc:View controllerName="project1.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns:unified="sap.ui.unified"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>

             <unified:FileUploader fileType="XLSX,xlsx" change="onUpload"  id="FileUploaderId" sameFilenameAllowed="true" iconOnly="false" buttonOnly="true" icon="sap-icon://upload" iconFirst="true" style="Emphasized" >
              </unified:FileUploader>
              <!-- <Button text="Upload" press="onPress" ></Button> -->

            <Table items="{empModel>/empDetails}">
                <columns>
                    <Column>
                        <Text text="Name" />
                    </Column>
                    <Column>
                        <Text text="Location" />
                    </Column>
                    <Column >
                        <Text text="Age"/>
                    </Column>
                    <Column >
                        <Text text="Salary"/>
                    </Column>
                    <Column >
                        <Text text="EmployeeID"/>
                    </Column>
                    <Column >
                        <Text text="Nationality"/>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <Text text="{empModel>Name}"></Text>
                            <Text text="{empModel>Location}"></Text>
                            <Text text="{empModel>Age}"></Text>
                            <Text text="{empModel>Salary}"></Text>
                            <Text text="{empModel>EmployeeID}"></Text>
                            <Text text="{empModel>Nationality}"></Text>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>


            <!-- <Table id="idTable" inset="false"/>  -->

        </content>
    </Page>
</mvc:View>

Output

Dynamic excel upload and table generation in UI5

In above approach, that solution works only when the excel file contains fixed and known column names

In real scenarios, excels may have different structure, may have different column names, and may have different number of rows

So to handle that situation

Read excel data dynamically

Extract columns headers from excel

Will create UI5 columns at run-time

Then bind table rows dynamically

Controller.js file

Step1:

Fetch the uploaded excel file

Initializes Filereader to read file content

Step2:

Conver binary excel data into a workbook object

Step3:

Always reads the first sheet from excel

Step4:

Converts excel rows into json objects

Default -> ensures empty cells are not skipped

Step5:

Extract cloumns names from excel first row

These headers will used to create table columns

Step6:

Clears the previously created columns before adding new ones

Step7:

Iterated through headers

Creates Coulmns dynamically for each excel columns

Step8:

Stores excel data in the model

Enables data binding to table rows

Step9:

Creates cells dynamically

Each cell will bind to corresponding excel fields

Step10:

Binds excel rows to table

Tables renders automatically with dynamic structure

Controller Code

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/m/Column",
    "sap/m/Text",
    "sap/m/ColumnListItem"
],
    /**
     *  {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageToast, JSONModel, Column, Text, ColumnListItem) {
        "use strict";

        return Controller.extend("project1.controller.View1", {
            onInit: function () {

            },
        onUpload: function (oEvent) {
                debugger
                var file = oEvent.getParameter("files")[0];
                var that = this;
                var reader = new FileReader();

                reader.onload = function (e) {
                    debugger
                        var data = e.target.result;
                        var workbook = XLSX.read(data, { type: "binary" });

                        // Take first sheet
                        var sheetName = workbook.SheetNames[0];
                        var sheet = workbook.Sheets[sheetName];

                        // Convert to JSON with empty values for blank cells
                        var jsonData = XLSX.utils.sheet_to_json(sheet, { defval: "" });

                        // Extract headers dynamically
                        var headers = Object.keys(jsonData[0]);

                        // Get table reference
                        var oTable = that.byId("idTable");
                        oTable.removeAllColumns();

                        // Build columns dynamically
                        headers.forEach(function (header) {
                            oTable.addColumn(new sap.m.Column({
                                header: new sap.m.Text({ text: header })
                            }));
                        });

                        var oModel = that.getView().getModel("empModel");
                        oModel.setProperty("/empDetails", jsonData);

                        // Create template row
                        var oTemplate = new sap.m.ColumnListItem({
                            cells: headers.map(function (header) {
                                return new sap.m.Text({ text: "{empModel>" + header + "}" });
                            })
                        });

                        // Bind items
                        oTable.bindItems({
                            path: "empModel>/empDetails",
                            template: oTemplate
                        });

                };
                reader.readAsBinaryString(file);
        }

        });
    });

XML View

<mvc:View controllerName="project1.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns:unified="sap.ui.unified"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>

             <unified:FileUploader fileType="XLSX,xlsx" change="onUpload"  id="FileUploaderId" sameFilenameAllowed="true" iconOnly="false" buttonOnly="true" icon="sap-icon://upload" iconFirst="true" style="Emphasized" >
              </unified:FileUploader>
           
            <Table id="idTable" inset="false"/> 

        </content>
    </Page>
</mvc:View>

Output

Conclusion

in this blog we discussed how to upload and read excel files in SAPUI5 application using a client side approach. We covered both fixed column excel handling and dynamic solution that adapts varying excel structures

The New Geomap Control in MDC Library: Bring SAP Geomap Into Your UI5 Apps

2026-02-10T15:19:04.206000+01:00

Intro
We’re excited to announce the release of an experimental MDC control for displaying interactive maps — visualizing GeoJSON data, integrating vector and raster tiles from various providers, enabling features like clustering and selection, or handling user interaction — sap.ui.mdc.Geomap offers a native UI5 interface to achieve this without building custom wrappers. 

What’s in it for you 

Faster integration: Directly embed a production-grade map component into your UI5 applications, leveraging familiar UI5 properties, events, and aggregations.

Flexible data & visualization: Seamlessly combine various tile providers (ESRI, MapBox, Azure maps, SAP HSS, etc.) with GeoJSON data sources. Manage diverse layers like fill, line, circle, heatmap, or symbol layers directly from your application’s model.

Native UI5 behavior: Benefit from standard UI5 control lifecycle, data binding, and composition, ensuring the map integrates smoothly with your existing UI5 patterns.

Build-friendly: This library is specifically designed for UI5 runtime consumption.

SAP HANA Spatial Services (HSS) integration: Allows to run with data provided from HSS.

What’s included 

A new experimental control in MDC library:  sap.ui.mdc.Geomap

Core building blocks: The main Geomap control, alongside specialized controls for providers, data sources, various layer types (such as, GeomapFillLayer, GeomapLineLayer, GeomapHeatmapLayer, GeomapSymbolLayer), and common map UI controls (such as, GeomapNavigationControl, GeomapScaleControl, GeomapSelectionControl, GeomapCopyrightControl).

Full capabilities including: Rendering a dynamic, responsive map canvas with pan, zoom, rotate, and tilt capabilities. Supports smooth animations, full-screen mode, and adapts to all screen sizes, including mobile devices.  Built on WebGL for high-performance rendering. Map view can be programmatically controlled or manipulated by the user .

Multi-provider support 

Integrates with multiple map data providers for maximum flexibility. Out-of-the-box support for ESRI, HERE, OpenStreetMap and SAP HANA Spatial Services. Easily switch providers or configure custom styles and tokens. 

Rich layer system 

Visualize geospatial data using multiple layer types, each optimized for different visualization needs. 

Fill Layer: Colored polygons for regions, zones, or districts.

Circle Layer: Point markers with customizable radius and color.

Line Layer: Draw paths, routes, or connections.

Heatmap Layer: Visualize data density or clustering.

Symbol Layer: Display icons and text labels for feature identification.

Advanced clustering 

Automatically groups nearby features to reduce clutter and improve performance. 
Dynamic cluster sizing, customizable properties, and click-through expansion. Especially useful for large datasets.

Drawing & selection tools 

Enables users to select or annotate map features using lasso, circle, polygon or rectangle tools. Supports multi-feature selection.  

GeoJSON data support 

 Loads and visualizes standard GeoJSON data, including points, lines, polygons, and multi-geometries. 
Supports dynamic updates, feature properties, and optimized rendering for large datasets. Clustering available for point data.

Comprehensive controls 

 Built-in UI controls for navigation, scale, fullscreen, copyright, and selection. 
 Controls can be positioned, enabled/disabled.

Event-driven architecture 

Rich event system for application integration and interactive workflows. Listens for map lifecycle, user interaction, feature, drawing, and data update events. 

Styling & theming 

Professional, customizable styling with support for multiple color palettes, icons, and themes.  Data-driven styling rules, CSS variable integration, and dark/light theme support. 

Performance optimization 

Designed for enterprise-scale performance. Automatic tile-based rendering, lazy loading, efficient clustering, and WebGL acceleration.

Internationalization 

Inclusive design with keyboard navigation, screen reader compatibility, and multi-language support. ARIA labels, high contrast mode, and full i18n support. 

How to use it 

The sap.ui.mdc.Geomap library is delivered as part of OpenUI5. It’s designed to be included and consumed through your standard UI5 build processes or runtime distribution. 

Link to samples: https://sapui5.hana.ondemand.com/#/entity/sap.ui.mdc.Geomap

MDC tutorial: https://github.com/SAP-samples/ui5-mdc-json-tutorial/tree/main/u2/ex1

Get started 

As an experimental library, OpenUI5 Geomap is in its initial stages, and its API is not yet finalized. This presents a unique opportunity for you to contribute to its evolution by providing feedback and suggestions. Be aware that some APIs may change or be removed in future updates.  

We are excited to see the innovative applications you will create using the SAPUI5 Geomap library.  

Happy geocoding! 

Problems hiding and showing table columns

2026-02-12T15:00:28.444000+01:00

Hello experts, I have a problem.
I need to hide table columns based on certain conditions.
I get the table object by ID and then all the columns.
Then I use oColumn.setVisible(), and everything works. However, the problem is that in the table personalization, this column is marked as selected, with a check mark.
Is it possible to affect the table settings after changing the column properties?
All tables are described on the backend and Table Type

ResponsiveTable(sap.ui.mdc.table)