SAP Community - SAPUI5

Simplify SAPUI5 Code Extensions with the SAP Build Extensibility Wizard

2025-04-28T07:50:34.669000+02:00

SAPUI5 flexibility to adapt standard SAP apps
SAPUI5 is SAP’s strategic Web framework for SAP Fiori. SAPUI5 flexibility allows developers, key users and end users to adapt standard apps with simple drag-and-drop tools. It supports a clean core approach by enabling on-stack extensions without requiring any predefined extension points. Discover all the capabilities in: SAPUI5 Flexibility - All You Need to Know.

Key user adaptation vs. Developer adaptation
In the SAP Community and many customer interactions, questions often arise about when to you use Key user adaptation vs. Developer adaptation. Key user adaptation allows business experts to change standard apps using tools directly within a running app. On the other hand, Developer adaptation targets developers who create custom code in a code-first environment using SAP Build. For a detailed comparison, check out our When to Use What guide.

The SAP Build Extensibility Wizard
SAP S/4HANA Cloud introduced the new SAP Build Extensibility Wizard, consolidating multiple extension options into one streamlined tool. No more juggling various tools or manually entering parameters such as the technical ID of the app to be extended. Instead, launch the wizard directly from a running SAP Fiori app for a simplified extension process. Learn more in: SAP Build Extensibility Wizard for SAP S/4HANA Cloud Public Edition.

What is new in SAP Build Extensibility Wizard?
The latest update to the SAP Build Extensibility Wizard introduces the ability to also create an SAPUI5 adaptation project as a User Interface Extension.

The wizard automatically fills the technical ID of the application to be adapted, asks for the SAP BTP Destination to connect to the SAP standard app, lets you enter the project name and off you go to SAP Business Application Studio to add your custom code.

For details see SAP Help:

Summary
SAP Build is the go-to platform for extending the SAP Business Suite, making it easier than ever to add custom extensions. With the new SAPUI5 adaptation project feature in the SAP Build Extensibility Wizard, developers can more easily extend standard SAP Fiori apps. Start leveraging this new option today to tailor your SAP experience to what your business users need.

Improve SAP UI5 Application Performance using Lazy Loading

2025-04-29T19:04:55.156000+02:00

Hi Everyone,
Today, I’m writing a blog about How to improve Performance of SAP UI5 Application.
Below, I'll guide you through a simple step-by-step process How to improve Performance of UI Application.
What is Lazy Loading
Lazy loading is a performance optimization technique that loads only the necessary resources at first,
and defers loading the rest until they are actually needed.
In SAPUI5, lazy loading can be applied to views, fragments, components, and data. Here's how to do it:
Improving application performance using lazy loading in SAPUI5 is a great topic for blog.
Lazy loading means loading only what's needed at the time—like loading views, fragments, or heavy datasets only when required instead of at startup. this makes the app faster and more efficient.

Here’s a step-by-step guide with source code and clear explanation using View and Controller to demonstrate lazy loading of a fragment when a button is clicked.
What We'll Do
Create a simple View with a Button.
Load a Fragment only when the button is clicked (lazy loaded).
Use the loaded fragment to show a dialog.
Folder Structure (for reference)

1 Main View (Lazy loading trigger)
View1.view.xml

<mvc:View controllerName="project1.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <VBox id="_IDGenVBox" class="sapUiSmallMargin">
            <Button id="_IDGenButton1" 
              text="Open Lazy Loaded Dialog" 
              press="onOpenDialog" />
          </VBox>
    </Page>
</mvc:View>

2 Fragment to Load Lazily
DialogFragment.fragment.xml

<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core">

  <Dialog
    id="myLazyDialog"
    title="Lazy Loaded Dialog"
    draggable="true"
    resizable="true"
    contentWidth="400px"
    contentHeight="200px"
    class="sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer"
    >
    
    <Text id="_IDGenText1" text="This dialog was loaded lazily!" />

    <beginButton>
      <Button id="_IDGenButton" text="Close" press="onCloseDialog" />
    </beginButton>
  </Dialog>

</core:FragmentDefinition>

3 Controller (Lazy loading logic)
View1.controller

sap.ui.define([
    "sap/ui/core/mvc/Controller",
     "sap/ui/core/Fragment"
], (Controller,Fragment) => {
    "use strict";
  return Controller.extend("project1.controller.View1", {
        onOpenDialog: function () {
            var oView = this.getView();
            // Check if dialog is already loaded
            if (!this._pDialog) {
              this._pDialog = Fragment.load({
                id: oView.getId(),
                name: "project1.view.DialogFragment",
                controller: this
              }).then(function(oDialog){
                oView.addDependent(oDialog); 
                return oDialog;
              });
            }
      
            this._pDialog.then(function(oDialog){
              oDialog.open();
            });
          },
        onCloseDialog: function () {
            // Close the dialog
            this.byId("myLazyDialog").close();
          }
    });
});

When will you click on open Lazy Loaded Button it's will show Lazy loaded Dialog Fragment

Explanation:
Why this improves performance:
Without Lazy Loading: All fragments load at app start, even if not used.
With Lazy Loading: The dialog is only loaded into memory when the user clicks the button.
What’s happening:
Fragment. load() is asynchronous, returning a promise.
It loads the fragment only once and caches it using this._pDialog.
add Dependent() ensures the fragment is destroyed when the view is.

Switch from SAP_COM_0086 (Neo) to SAP_COM_0623 (Cloud Foundry)

2025-04-30T10:56:41.393000+02:00

In this blog post, I will guide you through the process of switching from the theming communication scenario SAP_COM_0086 (SAP BTP, Neo environment) to SAP_COM_0623 (SAP BTP, Cloud Foundry environment). This switch enables you to access the latest features of the UI theme designer, such as theme migration.

Background

In an S/4HANA Cloud system, you use the UI theme designer from either the SAP BTP, Cloud Foundry environment or the SAP BTP, Neo environment to create and manage custom themes for SAP applications. To do this, you must implement one of the communication scenarios for the UI theme designer. For more details, refer to the documentation on Integrating UI Theme Designer.

Why is it important to switch to the communication scenario SAP_COM_0623 (SAP BTP, Cloud Foundry environment)?

Sunsetting of SAP BTP, Neo Environment: The SAP BTP, Neo environment will be retired by the end of 2028. For more information, refer to the blog post Farewell, Neo!
End-of-Life for Belize Theme: The Belize theme has reached its end-of-life with SAPUI5 1.135. By using the UI theme designer on the SAP BTP, Cloud Foundry environment, you can migrate your custom themes to modern themes based on Quartz or Horizon. For further details, see:
- SAP note 3595596.
- Blog posts: Removal of Belize Theme of SAP Fiori and Upcoming Removal of SAP Fiori Themes Belize and Blue Crystal.

Prerequisites

You already have a subaccount on the SAP BTP, Cloud Foundry environment.

Procedure

Step 1: Initial Setup

Set up the UI theme designer on the SAP BTP, Cloud Foundry environment as described in the guide Initial Setup of UI Theme Designer: Portal Scenario.

Step 2: Copy Themes

Export your custom themes from the UI theme designer in the SAP BTP, Neo environment. For detailed instructions, refer to Exporting Themes.
Import your custom themes into the UI theme designer in the SAP BTP, Cloud Foundry environment. For detailed instructions, refer to Importing Themes.
If your custom theme is based on the Belize theme, migrate it to a theme based on Horizon or Quartz. See Migrating Themes for further information.
Note: The Belize theme has been deprecated since SAPUI5 version 1.120 and was removed in SAPUI5 version 1.135.
After a successful migration, rename your theme accordingly. Use the same theme ID as before to ensure that no changes are needed for users to continue using the theme. For detailed instructions, refer to Renaming Themes.
Test your theme using the preview pages available in the UI theme designer. For detailed instructions, refer to Editing Themes.
Note: Migration will keep as many of your changes as possible, such as changed parameters or uploaded resources like a logo. However, there will be cases where the result is not 100% correct. Revisit the migration result and use it as a starting point for manual fine-tuning.
Publish your theme to make it available for use. For detailed instructions, refer to Publishing Themes.

Step 3: Switch Communication Scenario

Important: Perform this step during a maintenance window when few or no users are active in the system. While switching the communication scenario, applications will temporarily display the SAP standard theme.

Delete the communication scenario SAP_COM_0086 for the SAP BTP, Neo environment.
Create a new communication scenario for SAP_COM_0623 (SAP BTP, Cloud Foundry environment) as described in the guide SAP BTP, Cloud Foundry Environment (SAP_COM_0623).
Test your custom themes with the SAP Fiori Launchpad in the S/4HANA Cloud system.

Recap

By following the outlined steps—setting up the UI theme designer on the SAP BTP, Cloud Foundry environment, migrating your themes, and switching the communication scenario—you can modernize your theming approach and ensure a seamless transition with minimal disruption to your users.

For additional information, refer to the linked SAP Notes and guides. If you need further assistance, feel free to reach out via component CA-UI2-THD.

Introducing Application Frontend Service

2025-05-01T18:49:02.245000+02:00

As part of our exciting SAP Build release, we're happy to announce the release of Application Frontend service, a new SaaS application on SAP Business Technology Platform (BTP) for hosting, serving and operating frontend applications.

Next Generation Solution for hosting frontend applications

Application Frontend serves as a single point of entry for hosting, serving and operating frontend applications. By consolidating all aspects of UI application management under one managed service, Application Frontend simplifies the development experience and enhances custom application operations.

Bridging the Gap Between Neo and Multi-Cloud

If you have been around SAP BTP for more than 10 years then, most likely, you have used the Neo environment. If you developed an HTML5 application in Neo, then you probably used the HTML5 Runtime. Many customers we met in the past years have reported that the snappy experience they had in Neo, when developing and operating HTML5 applications, was lost when moving to the multi-cloud environment, where the HTML5 Application Repository and the managed application router (approuter) are used.
This feedback was received, noted and motivated us to come up with a new solution for managing HTML5 applications. A solution that will bring back the simplicity and flexibility customers liked so much in the Neo environment. With Application Frontend, we aim to bring that experience into the multi-cloud environment.

The first capabilities Neo fans will find familiar are host-based routing, the versioning concept and a direct deployment option. Additional capabilities like extended control from the SAP BTP cockpit will be added in the future.

But don’t get me wrong, Application Frontend is not a replica of HTML5 Runtime in Neo. It is a multi-cloud service compatible with the multi-cloud development model. We use the same descriptors used in HTML5 Repository and application router, ensuring that developers don't need to learn yet another paradigm.

Very high level architecture diagram

A New SaaS application

Application Frontend is a SaaS application which is not coupled to any specific SAP BTP runtime environment or other SAP BTP applications. You can find and subscribe to the service from the SAP BTP cockpit. Application Frontend is also equipped with a service broker to support interaction flows using service instances, for example when using MTA deploy in the CF environment.

While there is native support in the good old MTA concept for lifecycle management, Application Frontend also provides a command line interface (CLI) as a first-class tool for managing your applications. With the CLI, you can directly interact with the service and execute all actions supported by Application Frontend to enjoy fast response times and new integration opportunities.

Supported Use cases

At the moment, Application Frontend supports hosting of single tenant, stand-alone applications. (Stand-alone means applications that are not embedding other applications.)
In the future we will extend the supported use cases to cover more scenarios like applications dependencies, multi-tenancy, native SAP Build Work Zone integration, etc.
Application Frontend is perfect if you have a Build license and developing new HTML5 applications or migrating existing ones from Neo.
If the HTML5 Repository and application router are more suitable for your needs, please continue using them.

Application Frontend management UI in SAP BTP Cockpit

Next steps

Application Frontend service is starting its journey. We will continuously release additional features to support new scenarios and delight your experience.
In few weeks’ time, we will also make Application Frontend available in the SAP trial environment, so you can try it out more easily.
Note: Application Frontend will reside next to the HTML5 Repository, and the managed Application Router (approuter) hosted in SAP Build Work Zone. Both services will continue to be available, supported and developed as needed.

How to get started

SAP Build is available for subscription, more details in SAP Discovery Center
Once you purchased SAP Build, follow these steps for Application Frontend on-boarding.
Check out this intro tutorial for Simple UI Applications with Application Frontend Service

UI5 autofocus

2025-05-05T09:39:52.172000+02:00

Problem:

I used UI5 to create my own website and aimed to make it look different from a typical UI5 application. During this process, I encountered an issue where UI5 would automatically scroll to certain sections when navigating between pages. After some investigation, I discovered the cause: a button positioned at the bottom of the page. UI5 automatically sets the focus on the first clickable element it finds, which in this case, caused the page to scroll down.

Although I removed the button, you can still check out my site at https://wouter.lemaire.tech .

I also discovered that many others have faced similar issues with UI5 automatically managing focus and causing unexpected scrolling behavior:

https://community.sap.com/t5/technology-q-a/stop-focus-on-control/qaq-p/11295709

https://community.sap.com/t5/technology-q-a/prevent-autofocus-on-sap-ui-unified-calendar/qaq-p/11173411

https://community.sap.com/t5/technology-q-a/disable-soft-keyboard-or-autofocus-in-sapui5-mobile/qaq-p/682939

Solution:

In my case, the solution turned out to be quite simple—I just needed to disable the autoFocus property of the App control. I wasn’t aware of this functionality, and despite searching through numerous posts about focus issues on the SAP Community, I didn’t come across this solution. Here’s how I solved it:

Creating your custom validation in CAP (JAVA) + MessageTargets for composition associations

2025-05-05T10:37:38.704000+02:00

Objective

Implement dynamic field control on a chosen field, add our own validation along with an error message that targets that field when the validation fails.

Source code: https://github.com/nickcantstop/SchoolExample

As per capire documentation when using dynamic field control, it forces you to create your custom validations.

capire fieldcontrol

Available field control options.

Number KeyField Control

In our example we want the field averageGrade to be (Read Only) when firstName is null and then Mandatory when firstName has a value.

We will use averageGradeFC field to store and also annotate our averageGrade field.

(./db/school.cds)

The composition associations are included purely for illustrative purposes 🙂

namespace my.domain.education;

entity School {
    key ID      : Integer;
        name    : String;
        address : String;
        classes : Composition of many School.Classes
                      on classes.parent = $self;
}

entity School.Classes {
    key ID       : Integer;
    key parent   : Association to School;
        subject  : String;
        students : Composition of many School.Classes.Students
                       on students.parent = $self;
}

entity School.Classes.Students {
    key ID             : Integer;
    key parent         : Association to School.Classes;
        firstName      : String;
        lastName       : String;
        averageGrade   : String;
        averageGradeFC : Integer default 1;
}

Service Layer (./srv/schoolService.cds)

using {my.domain.education as education} from '../db/school';

service SchoolService {
    @odata.draft.enabled
    entity School                as projection on education.School;

    @cds.redirection.target: true
    entity SchoolClasses         as projection on education.School.Classes;

    @cds.redirection.target: true
    entity SchoolClassesStudents as projection on education.School.Classes.Students;
}

In annotations file (./app/school/annotations.cds)

annotate service.SchoolClassesStudents with @(Common : { SideEffects #averageGradeSideEffect : {
    SourceProperties: [firstName],
    TargetProperties: ['averageGradeFC']
}}) {
    averageGrade @Common.FieldControl : averageGradeFC;
};

Using the target method as seen here messages.error(“Error”).target() can help us indicate to the user which field needs attention, in our example we are throwing an error for each averageGrade field that does not pass the validation in the existing School entity.

If we use the following code snippet averageGrade @Common.FieldControl : 7; the framework will append a red asterisk (*) next to the annotated field, to signal that this field is mandatory, but it does not enforce that mandatory rule.

The following handler provides us the validation needed to enforce our mandatory field.

SchoolHandler - validation on when School entity is updated

@Component
@ServiceName(SchoolService_.CDS_NAME)
public class SchoolHandler implements EventHandler {

    @Autowired
    Messages messages;

    SchoolHandler(Messages messages) {
        messages = this.messages;
    }

    @Before(entity = School_.CDS_NAME, event = CqnService.EVENT_UPDATE)
    public void onSchoolUpdate(School school) {
        school.getClasses().forEach(classes -> classes.getStudents().forEach(students -> {
            if (Objects.isNull(students.getAverageGrade())) {
                messages.error("Average Grade cannot be null.").target(School_.class,
                        sc -> sc.classes(
                                cl -> cl.ID().eq(classes.getId())
                                        .and(cl.parent_ID().eq(classes.getParentId())
                                                .and(cl.IsActiveEntity().eq(false))))
                                .students(
                                        stu -> stu.ID().eq(students.getId())
                                                .and(stu.parent_ID().eq(students.getParentId()))
                                                .and(stu.parent_parent_ID().eq(students.getParentParentId()))
                                                .and(stu.IsActiveEntity().eq(false)))
                                .averageGrade());
            }
        }));
        messages.throwIfError();
    }

    @Before(entity = SchoolClassesStudents_.CDS_NAME, event = DraftService.EVENT_DRAFT_PATCH)
    public void onStudentSideEffect(SchoolClassesStudents students) {
        if (Objects.isNull(students.getFirstName())) {
            students.setAverageGradeFC(1);
        } else {
            students.setAverageGradeFC(7);
        }
    }
}

With this code if I leave the field averageGrade as null when it is set to mandatory in the field control, I am met with this error when saving the draft.

The following error message is returned in the backend, it depicts the target as the odata path to the corresponding field.

{
    "error": {
        "code": "400",
        "message": "Average Grade cannot be null.",
        "target": "in/classes(ID=2,parent_ID=1,IsActiveEntity=false)/students(ID=3,parent_ID=2,parent_parent_ID=1,IsActiveEntity=false)/averageGrade"
    }
}

Implementing User Role-Based Views in SAPUI5: A Complete Guide

2025-05-05T10:49:01.710000+02:00

Implementing User Role-Based Views in SAPUI5: A Complete Guide

Introduction

In today's enterprise application development, delivering the right experience to the right users is just as crucial as the functionality itself. One of the most effective ways to achieve this is through role-based view management - a powerful approach that tailors the user interface based on individual permissions and responsibilities.

I'm excited to share this comprehensive guide on implementing role-based views in SAPUI5 applications. Whether you're building a new application from scratch or enhancing an existing one, implementing proper view segregation will not only improve security but also create a more focused and efficient user experience.

In this blog, we'll explore:

The critical importance of role-based views in enterprise applications
A step-by-step implementation guide using SAPUI5's powerful features
How to combine OData services with dynamic UI controls
Professional best practices refined from real-world implementations

By the end of this guide, you'll be able to create applications where:

Administrators (ADMN) have complete system access
Project Managers (PM) see management-relevant views
Team Leads (TL) access team coordination features
Regular Employees (RE) work with task-specific interfaces

Let's transform your SAPUI5 application into a secure, role-appropriate experience that users will appreciate!

Why Role-Based Views Matter More Than Ever

In our increasingly security-conscious digital landscape, role-based views provide three fundamental benefits:

Security Through Obscurity
By completely hiding unauthorized functionality rather than just disabling it, we eliminate potential attack vectors and accidental access to sensitive operations.
Cognitive Simplicity
Users aren't distracted by irrelevant menu items or functions they can't use, leading to higher productivity and satisfaction.
Compliance Ready
Many industry regulations (GDPR, SOX, HIPAA) explicitly require proper access controls that role-based views help implement.

Prerequisites for Implementation

Before we begin, you'll need:

✔ SAPUI5 Fundamentals - Comfort with MVC concepts and data binding
✔ Development Environment - SAP Business Application Studio or local IDE setup
✔ Backend Access - OData service with employee data (mock data works for testing)
✔ Basic Security Understanding - Familiarity with authentication flows

Let's begin our journey to create a truly professional role-based SAPUI5 application!

Project Structure

Data

Step 1: Set Up the Login System

Login Controller (Login.controller.js)

 onInit() {
            var oComponentModel = this.getOwnerComponent().getModel();
            var oModel = this.getOwnerComponent().getModel('employeesModel')
            oComponentModel.read("/your_entitySetName",{
                  method:'GET',
                  success: function (oData, response){
                  oModel.setProperty('/employees',oData.results)
                  },
  
                  error: function(error){
                      console.error("Error Loading Data: " + error);
                  },
              
              });  
        },

onPressLoginBtn: function() {
  const sUsername = this.byId("name").getValue();
  const sPassword = this.byId("userId").getValue();
  
  const oModel = this.getOwnerComponent().getModel("employeesModel");
  const aEmployees = oModel.getProperty("/employees") || [];
  
  const oEmployee = aEmployees.find(emp => 
    emp.UserId === sUsername && emp.Password === sPassword
  );
  
  if (oEmployee) {
    oModel.setProperty("/currentUser", oEmployee); // Store user data
    this.getOwnerComponent().getRouter().navTo("MainView");
  } else {
    sap.m.MessageToast.show("Invalid credentials");
  }
}

Key Points:

Validates credentials against fetched employee data.
Stores the logged-in user in employees Model.

Login View(Login.view.xml)

<VBox justifyContent="Center" alignItems="Center" height="100%">
                <Panel width="430px" class="loginFormPanel">
                    <form:SimpleForm title="Login Here" class="sapUiMediumMarginTopBottom">
                        <Label></Label>
                        <Input id="name" placeholder="Enter Name"></Input>
                        <Label></Label>
                        <Input id="userId" placeholder="Enter UserId" type="Password"></Input>
                        <Label></Label>
                        <Button text="Login" press="onPressLoginBtn" type="Emphasized"></Button>
                    </form:SimpleForm>
                </Panel>
            </VBox>

Main View(Main.view.xml)

<core:Fragment fragmentName="roleassignment.fragments.IconTabBar" type="XML"></core:Fragment>

IconTabBar Fragment (IconTabBar.fragment.xml)

  <IconTabBar id="idIconTabBar" expandable="false" headerMode="Inline">
        <items>
            <IconTabFilter text="Roles" key="roles"> 
                <mvc:View viewName="roleassignment.view.subView.AllRole" type="XML"></mvc:View>
                    <items>
                        <IconTabFilter text="AdminView" key="AdminView" visible="{= ${employeesModel>/currentUser/Role} === 'ADM' }">
                            <mvc:View viewName="roleassignment.view.subView.Admin" type="XML"/>
                        </IconTabFilter>
                        <IconTabFilter text="ProjectManagerView" key="ProjectManagerView"  visible="{= ${employeesModel>/currentUser/Role} === 'ADM' || ${employeesModel>/currentUser/Role} === 'PM' }">
                            <mvc:View viewName="roleassignment.view.subView.ProjectManager" type="XML"/>
                        </IconTabFilter>
                        <IconTabFilter text="TeamLeadView" key="TeamLeadView"  visible="{= ${employeesModel>/currentUser/Role} === 'ADM' || ${employeesModel>/currentUser/Role} === 'PM' || ${employeesModel>/currentUser/Role} === 'TL' }">
                            <mvc:View viewName="roleassignment.view.subView.TeamLead" type="XML"/>
                        </IconTabFilter>
                        <IconTabFilter text="RegularEmpView" key="RegularEmpView" >
                            <mvc:View viewName="roleassignment.view.subView.RegularEmp" type="XML"/>
                        </IconTabFilter>
                    </items>
            </IconTabFilter>
        </items>
    </IconTabBar>

AllRole View(AllRole.view.xml)

<Table   >
	<columns>
		<Column >
			<Text text="ID"></Text>
		</Column>
		<Column >
			<Text text="Name"></Text>
		</Column>
		<Column >
			<Text text="Role Description"></Text>
		</Column>
	</columns>
	<items>
		<ColumnListItem>
			<cells>
				<Text text="{employeesModel>/currentUser/Id}"></Text>
				<Text text="{employeesModel>/currentUser/Name}"></Text>
				<Text text="{employeesModel>/currentUser/Roledescription}"></Text>
			</cells>
		</ColumnListItem>
	</items>
</Table>

Admin View(Admin.view.xml)

	<c:Fragment fragmentName="roleassignment.fragments.tables.Admin" type="XML"></c:Fragment>

Admin Fragment(Admin.fragment.xml)

<Table items="{employeesModel>/ADMData}">
        <columns>
            <Column>
                <Text text="ID"></Text>
            </Column>
            <Column>
                <Text text="Name"></Text>
            </Column>
            <Column>
                <Text text="Role"></Text>
            </Column>
            <Column>
                <Text text="Role Description"></Text>
            </Column>
        </columns>
        <items>
            <ColumnListItem >
                <cells>
                    <Text text="{employeesModel>Id}"></Text>
                    <Text text="{employeesModel>Name}"></Text>
                    <Text text="{employeesModel>Role}"></Text>
                    <Text text="{employeesModel>Roledescription}"></Text>

                </cells>
            </ColumnListItem>
        </items>
    </Table>

Admin Controller (Admin.controller.js)

var oComponentModel = this.getOwnerComponent().getModel();
			var oModel = this.getOwnerComponent().getModel('employeesModel')
			oComponentModel.read("/Your_entitySetName",{
				  method:'GET',
				  urlParameters: {
					  "$filter": "Role eq 'ADM'"
				  },
				  success: function (oData, response){
				  oModel.setProperty('/ADMData',oData.results)
				  },
				  error: function(error){
					  console.error("Error Loading Data: " + error);
				  },
			  
			  });

How It Works:

Binds visibility to the user’s role.
Only shows tabs matching the user’s permissions.

Other Views

ProjectManager.view.xml
TeamLead.view.xml
RegularEmp.view.xml

Other Controllers

ProjectManager.controller.js
TeamLead.controller.js
RegularEmp.controller.js.

The implementation follows a consistent pattern where only the fragment names differ based on roles. Here's how to adapt the same logic across all views:

Fragment Naming Structure
- Each role has its own fragment file following this naming pattern:
  - Admin.fragment.xml
  - ProjectManager.fragment.xml
  - TeamLead.fragment.xml
  - RegularEmp.fragment.xml
Identical Implementation Logic
While the fragment names are different, they all share:
- The same table structure and column layout
- The same type of data bindings
- The same controller approach for data loading
How to Apply This Pattern
For each role view:
- Create a new fragment file with the role-specific name
- Copy the same table structure from existing fragments
- Only change:
  1. The binding path to match the role (PMData/TLData/REData)
  2. The filter condition in controller ("Role eq 'PM'" etc.).

UI Output Screenshots

Administrator sees all available tabs

Project Manager access with PM/TL/RE tabs (Admin tab hidden)

Single-tab interface for regular employees.

Key Visual Differentiators

Role-Specific Tab Visibility
- Admin: 4 tabs visible
- PM: 3 tabs visible
- TL: 2 tabs visible
- RE: 1 tab visible
Data Columns
Same structure across all fragments, with:
- ID, Name, Role, Role Description fields
- Color-coded by role (admin=red, pm=blue, tl=green, re=grey)
Visual Cues
- Role badge in header
- Disabled/hidden elements for unauthorized actions
- Consistent table styling across fragments.

Conclusion

By leveraging SAPUI5’s binding and OData capabilities, we built a secure, role-based navigation system that:
✔ Restricts views based on roles
✔ Optimizes data loading
✔ Scales easily for new roles.

I hope you found this guide helpful! If you have any questions or feedback, feel free to leave a comment below. Happy coding!

Time to migrate your Belize theme on SAP BTP, Cloud Foundry environment

2025-05-05T13:46:33.595000+02:00

In this blog post, I will guide you through the process of migrating your custom theme based on Belize to a theme based on Quartz or Horizon.

Background

The Belize theme has been deprecated since SAPUI5 version 1.120. As of SAPUI5 version 1.135, the Belize theme has reached its end-of-life and is no longer supported for SAPUI5 applications. For more details, refer to the documentation on Supported Combinations of Themes and Libraries and the announcements Removal of Belize Theme of SAP Fiori and Upcoming Removal of SAP Fiori Themes Belize and Blue Crystal.

Why Is It Important to migrate themes based on Belize?

With the removal of the Belize theme in SAPUI5, custom themes based on Belize will no longer be applied to SAPUI5 applications. Instead, the applications will default to the Horizon theme, which may not align with your desired branding.

Prerequisites

You have a subaccount on the SAP BTP, Cloud Foundry environment and have created a custom theme based on Belize.
You are using the custom theme for applications running on SAP BTP, Cloud Foundry environment, or you have created a communication scenario for the UI theme designer in S/4HANA Cloud (communication scenario SAP_COM_0623).

Step 1: Migrate the Theme

Open the UI theme designer in the SAP BTP, Cloud Foundry environment.
Select the theme that is based on Belize.
Click the "Migrate" button to migrate your theme. For detailed instructions, refer to Migrating Themes.

Step 2: Test and Adjust the Migrated Theme

Edit the migrated theme in the UI theme designer. For detailed instructions, refer to Editing Themes.
Test the theme using the available preview pages.
Adjust any parameters as needed to achieve the same look and feel as before.
If you have implemented custom CSS, verify that it still works as expected.
Note: Theming capabilities have been enhanced for the Horizon theme, offering more options for customization. Consider replacing custom CSS with theming parameters to ensure your theme is more robust and compatible with future UI technology upgrades

Step 3: Publish Your Theme

Rename the old theme based on Belize. For detailed instructions, refer to Renaming Themes.
Rename the migrated theme to use the same theme ID as before. This ensures that no changes are required for users to continue using the theme.
Publish your theme to make it available for use. For detailed instructions, refer to Publishing Themes.

Step 4: Test Your Applications

Test your applications thoroughly with the migrated theme to ensure everything works as expected.

Step 5: Delete the Belize-Based Theme

Once you have confirmed that the migrated theme works correctly, you can safely delete the old theme based on Belize. For detailed instructions, refer to Deleting Themes.

Recap

By following these steps, you can ensure a smooth transition from the deprecated Belize theme to a modern theme based on Quartz or Horizon, while maintaining a consistent user experience across your applications.

For additional information, refer to the linked guides. If you need further assistance, feel free to reach out via component CA-UI2-THD.

Ciao everyone and a big welcome to the new SAP Community Group – Rome

2025-05-05T13:51:39.812000+02:00

I’m super happy that Rome finally has its own local group in the SAP Community and I really hope lots of you will join! 🎉
Sono davvero contenta che anche Roma abbia finalmente il suo spazio nella community… e spero che in tanti decideranno di farne parte!

This is our place to stay in touch between events, share ideas, plan meetups or just have some relaxed conversations.
Qui possiamo tenerci in contatto tra un evento e l’altro, scambiarci idee, organizzare qualcosa insieme o semplicemente fare due chiacchiere in libertà.

Feel free to start a discussion on anything SAP topics, ideas for the next SAP Stammtisch Rome, thoughts for a SAP Inside Track, or even just to say hi! 🙂
Sentitevi liberi di iniziare nuove conversazioni: spunti per eventi, domande, curiosità… oppure anche solo per salutarci!

This group is informal and open to everyone the more voices, the more fun! 😊
È un gruppo aperto, informale, dove tutti sono i benvenuti... più siamo, meglio è!

I’ve been part of the SAP Community for many years, and I’m really happy that we finally have a local group here in Italy’s capital!
My hope is to bring together people from Rome and beyond, anyone who’s interested in connecting, sharing ideas, and helping this group grow. Whether you’re new or experienced, you’re more than welcome to join us. Let’s make some noise together!

Faccio parte della SAP Community da tantissimi anni, e sono davvero felice che finalmente abbiamo un gruppo locale qui nella capitale.
Il mio desiderio è riuscire a riunire persone da Roma e da tutta Italia, chiunque abbia voglia di conoscersi, condividere idee e far crescere insieme questo gruppo. Che siate nuovi o parte della community da tempo, siete più che benvenuti. Facciamo casino insieme!

Can’t wait to chat with you all and see what we’ll build together here in Rome!
Non vedo l’ora di conoscervi e vedere cosa riusciremo a creare insieme qui a Roma!

SAP Fiori development newsletter May 2025 (issue #34)

2025-05-06T15:40:00.038000+02:00

SAP Sapphire is coming, so you should expect lots of announcements about how AI solves complex business problems. AI also plays a major role in application development and simplifying the user experience. This issue has information about some product innovations that will make your life as a developer easier.

For ongoing updates, I encourage you to join our monthly SAP Fiori development roundtable. You can meet online with fellow developers and the SAP engineers who build our professional development tools. Register online or email me for an invitation. Our next meeting is Wednesday, May 14, 2025.

If you prefer to receive this in your inbox, please subscribe to the SAP Fiori development newsletter.

Development News

Sapphire preview blog post

SAP Sapphire and the ASUG Annual Conference are a great way to see the art of the possible, get inspired, and take away some concrete next steps on how to move your organization forward. This post contains sessions on AI, UX, moving to SAP S/4HANA Cloud, and personal development, including organizational change management.
https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/ux-ai-sap-s-4hana-transformation-sessions-at-sap-sapphire-and-asug-annual/ba-p/14068806

Announcement: removal of Belize theme of SAP Fiori

Know about the removal of the Belize theme of SAP Fiori and how to handle custom themes based on Belize.
https://community.sap.com/t5/technology-blogs-by-sap/announcement-removal-of-belize-theme-of-sap-fiori/ba-p/14061924

UI5 linter just got smarter: Autofix is here!

UI5 linter is the tool of choice to check your UI5 project for using best practices and replacement of deprecated UI5 APIs. With UI5 linter v1.12.0, we are happy to announce the initial version of an autofix feature: Use the "--fix" argument to let UI5 linter apply fixes to your code automatically. https://community.sap.com/t5/technology-blogs-by-sap/migrate-your-code-with-ui5-linter-autofix-has-landed/ba-p/14048470

SAPUI5 adoption now reaches all seven continents

SAPUI5 is the foundation of many SAP solutions such SAP S/4HANA. Developers experience modern tools in SAP Build Code and frameworks such as SAP Fiori elements to efficiently develop and extend SAPUI5 applications. The combination of its power and ease of use is what drives its adoption across every continent, including Antarctica.
https://community.sap.com/t5/technology-blogs-by-sap/sapui5-adoption-becoming-more-universal/ba-p/14064364

Simplify SAPUI5 code extensions with the SAP Build Extensibility Wizard

SAP S/4HANA Cloud introduced the new SAP Build Extensibility Wizard, consolidating multiple extension options into one streamlined tool. Launch the wizard directly from a running SAP Fiori app for a simplified extension process. The latest update to the SAP Build Extensibility Wizard introduces the ability to also create an SAPUI5 adaptation project as a User Interface Extension.
https://community.sap.com/t5/technology-blogs-by-sap/simplify-sapui5-code-extensions-with-the-sap-build-extensibility-wizard/ba-p/14087839

Energy supplier badenova transforms work order coordination with SAP Fiori Makers, BTP, and user research insights

SAP customer and German energy supplier badenova embarked on a transformative journey to streamline its work order coordination processes. To better manage the persistent operational challenges around customer requests, its subsidiary badenovaNETZE joined SAP to create a user-centric and future-focused design and solution for a new work order cockpit. They use SAP Fiori elements, SAP BTP, Scenes, and end user insights to get the job done.
https://news.sap.com/2025/03/badenovanetze-work-order-coordination-sap-fiori-bootcamp/

SAP Fiori tools 2503 update: icons, app Info page, adaptation projects, preview

SAP Fiori tools 2503 release introduces a refreshed icon set, improvements to the Application Info page, a new approach to previewing applications using virtual endpoints, and enhancements for UI adaptation. This post covers these and several other updates.
https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2503-update-icons-app-info-page-adaptation-projects-preview/ba-p/14056256

SAP Build Code updates

The latest updates to SAP Build Code include a new high productivity experience for CAP Java projects, the creation of UI applications via our AI copilot Joule, and the development of MDK-based projects utilizing Joule. And much more. Details in the latest summary post.
https://community.sap.com/t5/technology-blogs-by-sap/product-updates-for-sap-build-code-march-2025-edition/ba-p/14056060

SAP Build has new, simplified pricing and packaging to provide a unified experience for all developers

SAP is introducing a new, unified commercial model for SAP Build that consolidates capabilities for pro-code, low-code, and AI-powered development tools. This makes it easier to build applications and extensions within the SAP ecosystem.
https://community.sap.com/t5/technology-blogs-by-sap/introducing-the-new-pricing-and-packaging-for-sap-build-a-unified/ba-p/14086382

Events

SAP Fiori Innovation Day dates in 2025

We have the dates for our next SAP Fiori Innovation Day events.

October 17 in Dallas, Texas
December 10 in Paris, France

The registration pages will go live during the summer, but you can mark your calendar now.

Back issues from the past year

SAP Fiori development newsletter March 2025 (Issue #33)

SAP Fiori development newsletter January 2025 (issue #32)

SAP Fiori development newsletter November 2024 (issue #31)

SAP Fiori development newsletter September 2024 (issue #30)

SAP Fiori development newsletter July 2024 (issue #29)

SAP FIori development newsletter May 2024 (issue #28)

SAP Fiori for Web v6.0

2025-05-08T09:26:58.489000+02:00

We’re excited to share that the latest version of the SAP Fiori for Web UI Kit is now live in the SAP Figma Community!

This update is essential for anyone designing enterprise web apps: it helps teams work faster, avoid rework and ensures your designs stay consistent, efficient, and ready for implementation.

The updates below include new components, improved variants, and refreshed design variables, all of which directly impact how you build and maintain high-quality UI elements.

Check it out here

SAP Figma Community

What’s New - and What’s Evolved? 

Here’s a quick overview of the most important updates we’ve introduced over the past few versions, now all included in the new file:

9+ New components:

Tool Header, User Menu, Settings, Shell Bar, Side Navigation, and Notifications introduced.

Disclaimer: This image is a conceptual composition and does not represent a real-life use case.

Form has been added to streamline structured data input.

Form component

The Legend provides a visual guide for interpreting content in the Calendar. The Legend Item represents individual status indicators within the Legend.

Calendar with Legend

A new badge type called the Attention Badge has been introduced for Buttons, building on the existing Counter Badge.

Button with Attention Badge

Variables:

All design variables have been updated to align with the latest version, ensuring consistency and accuracy across components.

Component Improvements:

Additional variants have been added to existing components.

What This Means for You

You have access to an accurate, easy-to-use, and regularly updated UI Kit - all in one place. Whether you're designing, prototyping, or building with SAP Fiori for Web, this setup ensures you're always working with the latest standards.

Thanks for being part of the journey. We’re already preparing for the next update. We can’t wait to see what you create with the SAP Fiori for Web UI Kit!

Feel free to check out our other kits in the SAP Figma Community.

Authors: Siyana Dicheva (UX Designer, SAP Core Design Team) and Janina Fichtner (UX Designer, SAP Core Design Team)

SAP SEGW vs RAP vs CAP: Making the most of Function Imports, Actions and Functions (Part 1)

2025-05-08T09:35:18.963000+02:00

After working on several SAP projects, I have noticed a common trend consisting in a plethora of SEGW projects full of function imports that are generally misused or unnecessary. With my experience—and after delving into the SAP documentation—I have decided to write this blog to shed some light on function imports. I will explain what they are, what they are used for, when to use them and when to avoid using them, and will do so not only for SAP SEGW projects, but also for their equivalents within the more recent SAP RAP and CAP frameworks—since I am actively diving into these modern development approaches and working on business projects that leverage them. To make this more concrete, I’ll walk through a practical example, which I’ve made available on GitHub.

Let's clear up the confusion together. So, grab your coffee, and let’s dive in !

Part 1. SEGW Context
Part 2. SAP RAP and SAP CAP + github project

SAP SEGW Context

A function import in OData is a way to define and call custom operations in one’s service that goes beyond the standard data handling actions—like creating, reading, updating, or deleting records (CRUD). These standard actions are typically handled through the HTTP methods POST, GET, PUT/MERGE, and DELETE.

However, if you need to perform a more specialized task that does not neatly fit into the standard CRUD operations, you can create a function import in your data model using Service Builder. These custom operations can then be triggered using either the GET or POST HTTP methods.

But first, a small word of caution: these specific function imports are only to be used for actions that cannot be done with standard traditional CRUD operations. If the task can be handled through regular create, read, update, or delete, then a function import is not required.

Let’s look at an example to understand.

Example : Flight management system with CRUD and custom operations

Core CRUD operations :

These operations cover the basic data management needs for flight records

Create: Add new flight (e.g., POST /flight with origin, destination, departure, arrival..).
Read: Retrieve existing flight (e.g., GET /flight/{id}).
Update: Modify flight (e.g., PUT /flight/{id} to adjust departure time).
Delete: Remove canceled flight (e.g., DELETE /flight/{id}).

Custom operations :

These are business-specific operations that go beyond standard CRUD

Print details: Generate and print comprehensive flight information (e.g., schedule, aircraft, and seating).
Generate report: Create operational or statistical reports for flights over a specified date range.
…

Custom operations are separated from CRUD because they encapsulate domain-specific behavior that cannot be addressed by simple data manipulation alone. While CRUD operations focus on creating, reading, updating, or deleting records, custom actions often perform calculations, trigger workflows, or apply business rules across multiple entities.

This distinction supports a cleaner and more maintainable architecture—where CRUD handles core data persistence, and custom operations handle the more nuanced logic of the application domain.

Implementation example

Below is an implementation example of how to call a function import defined in SEGW.

On the front-end, the function import is triggered via an OData request using callFunction(), for example: /sap/opu/odata/SERVICE_NAME/FunctionImportName(...).

On the back-end, it is handled by redefining the EXECUTE_ACTION method in the *_DPC_EXT class. Inside this method, the iv_action_name parameter is used to identify the specific function being called. Input parameters are accessed through the it_parameter table, and the corresponding backend logic is implemented accordingly.

Front-end code:

let oModel = this.getView().getModel();
let mParameters = {
  FlightID: "12345"
};

oModel.callFunction("/PrintFlightDetails", {
  method: "POST",
  urlParameters: mParameters,
  success: function(oData, response) {
    MessageToast.show(oData.Message);
  },
  error: function(oError) {
    MessageToast.show("Error printing flight details");
  }
});

Back-end code : (Assuming we have previously defined the function import in the SEGW project and an ABAP OO class to manage the business object Flight)

METHOD execute_action.
  
  " Check if the action name is 'PrintFlightDetails'
  IF iv_action_name = 'PrintFlightDetails'.
    " Retrieve input parameter
    READ TABLE it_parameter INTO DATA(ls_parameter) WITH KEY name = 'FlightID'.
    IF sy-subrc = 0.
      DATA(lv_flightid) = ls_parameter-value.
    ELSE.
      " Manage error
    ENDIF.

    " Instantiate the flight manager class
    DATA(lo_flight) = NEW zcl_flight( lv_flightid ).

    " Call the method to update the flight status
    DATA(lv_message) = lo_flight->print_flight_details( ).

    ...

  ENDIF.
ENDMETHOD.

Conclusion

Function imports are a powerful tool, but like any tool, they must be used wisely. In SEGW, it is best to reserve them for operations that do not fit naturally into the CRUD. Misuse can lead to bloated, unclear services and unnecessary complexity.

In the next part of this series, I'll explore how similar use cases are handled in RAP and CAP - with a GitHub project to illustrate it all in action.

Stay tuned!

SAP SEGW vs RAP vs CAP: Making the most of Function Imports, Actions and Functions (Part 2)

2025-05-08T09:36:59.881000+02:00

Let's clear up the confusion together. So, grab your coffee, and let’s dive in !

Part 1. SEGW Context
Part 2. SAP RAP and SAP CAP + github project

SAP’s new frameworks

SAP RAP (RESTful ABAP Programming Model) and SAP CAP (Cloud Application Programming Model) are the two modern frameworks from SAP designed for building applications.

Both frameworks support extending standard CRUD operations by allowing developers to define custom logic—commonly known as actions or functions. In RAP, these are introduced in behavior definitions, while in CAP, they're modeled in the service layer. This functional similarity makes it natural to discuss them together.

As a quick note for context: this blog won’t delve into the differences between static and instance-based implementations, bound and unbound actions and functions.. as those topics are beyond the scope of this post — although they might be the subject of a future blog post.

SAP RAP Context

SAP RAP is SAP’s modern framework for developing OData services and business applications using ABAP. It serves the same core purpose as SAP SEGW (Service Gateway), which is to expose data and operations from SAP systems via OData.

Unlike SEGW, which relies heavily on manual coding and separate models, RAP uses a streamlined, model-driven approach with better integration into the ABAP RESTful environment, leveraging CDS (Core Data Services) to define and manage the data models in a more declarative way.

SAP CAP Context

SAP CAP is SAP’s modern development framework for building services and applications, particularly optimized for the SAP Business Technology Platform (BTP). It provides a streamlined, full-stack development experience with built-in support for defining data models, service APIs, and custom logic using a combination of Core Data Services (CDS), Node.js, or Java.

While SAP RAP is more ABAP-centric and suited for on-premise or S/4HANA systems, CAP is cloud-native and ideal for developing applications in the BTP environment.

Unlike traditional approaches like SEGW or even ABAP RAP, which are deeply rooted in the ABAP stack, CAP is open and service-oriented by design. It promotes strong integration with SAP HANA, SAP Fiori, and external services through open standards like OData and REST.

Standard vs Non-Standard Operations in RAP and CAP

Both SAP RAP and SAP CAP distinguish between standard and non-standard OData operations. Standard operations refer to the CRUD functionalities, which are automatically handled by the frameworks. In addition to CRUD, both frameworks also manage transactional behavior, draft handling, validation, and persistence with minimal configuration.

Non-standard operations, on the other hand, are used to implement custom business logic beyond CRUD, following the same conceptual model as Function Imports in the classical SEGW approach.

Actions and Functions in RAP and CAP

In both RAP and CAP, Actions and Functions represent non-standard operations that integrate custom logic into the application. Actions are used for logic that may change data or cause side effects while Functions are read-only operations that return data.

In RAP, these are defined in the behavior definition and implemented in the behavior pool class, ensuring proper transactional and authorization handling.

In CAP, they are defined in the CDS service definition, and the implementation resides in service handlers (Node.js or Java).

Both frameworks ensure these operations are fully OData V4-compliant and seamlessly consumable by Fiori Elements or other OData clients.

Fundamental difference between SEGW and SAP RAP/CAP

SAP SEGW (SAP Gateway Service Builder) is based on a flexible approach for managing CRUD operations. When creating or updating a service, the framework generates standard methods such as CREATE_ENTITY, UPDATE_ENTITY, DELETE_ENTITY, etc., which developers can redefine to incorporate more complex business logic tailored to functional requirements.

When a batch call is made from the front end, for example via a SubmitChanges operation, the grouped operations (creating entry C, updating entry A, deleting entry B, etc.) are dispatched individually in the backend. In other words, each operation is handled separately by the corresponding method (CREATE_ENTITY, UPDATE_ENTITY, etc.).

However, this approach introduces certain limitations, particularly in error handling within batch processing. Since each operation is processed independently, managing scenarios involving partial rollbacks or consistent error propagation across the batch becomes more complex.

SAP RAP and SAP CAP adopt a structured, model-based approach for managing data and business logic. Both rely on OData v4 and Core Data Services (CDS) to define entities, their relationships, and their behaviors.

CRUD operations such as CREATE and UPDATE are defined at the entity level and are designed to be handled individually, meaning they are executed on a single instance at a time. To manage more complex processing or scenarios involving multiple entities, RAP and CAP recommend the use of actions or functions, which allow business logic to be encapsulated without being directly embedded in the standard operations.

However, if no specific logic is required, it is still possible to perform batch processing (bulk update) using standard CRUD operations. That said, this approach is not recommended, as CRUD operations are intended for single-record processing, with validations, lifecycle hooks (such as before, after, check, etc.), and line-by-line error handling. Using batch processing via CRUD can lead to inconsistent behavior, difficult-to-control partial rollbacks, and a loss of control over overall business and transactional logic.

In addition, using actions offers many other advantages, such as:

Automatic interface generation: Actions are automatically exposed as buttons or menu items in Fiori Elements interfaces. They can be triggered on multiple selections (multi-select) with consistent UX behavior, and they allow for explicit naming of specific business processes (e.g., "Validate All", "Send Invoices").
Precise control over business logic: An action encapsulates business logic clearly, separate from generic CRUD operations. You can easily include custom validations, complex rules, calls to other services, and more.
Robust transaction and error handling: Actions enable centralized exception management, the return of structured user messages, and support for global rollbacks when needed.
...

A core principle in RAP and CAP is the clear separation between basic CRUD operations and business logic. This distinction enhances data consistency, code readability, and, most importantly, long-term maintainability of applications. Each action represents a clear business intent, integrated within a well-defined service structure.

In summary, SAP SEGW offers greater implementation freedom, which can be suitable for simple use cases with minimal business logic. However, it lacks a structured framework for handling complex scenarios or bulk processing. In contrast, SAP RAP and CAP enforce a more rigorous architecture, ensuring more reliable and scalable application management—both on the backend and frontend.

Now that we've covered the theory, let's explore some practical examples to see how this approach is implemented in these modern frameworks.

RAP implementation example

Below is an implementation example of how to call an action and a static function defined in SAP RAP.

In the front-end (e.g., Fiori Elements), the action setStatusToCanceled is triggered via the UI using the OData POST call to /EntitySet(...)/setStatusToCanceled. This is handled in the back-end by redefining the setStatusToCanceled method in the behavior implementation class (lhc_ZFM_C_FLIGHTS), where the logic modifies the entity’s status.

For the static function GetNumberOfDelayedFlights, it is triggered by a GET call like /EntitySet/GetNumberOfDelayedFlights, and its logic is implemented in the getnumberofdelayedflights method, returning a result structure with the computed data.

Flight Root Entity CDS View

define root view entity ZFM_C_FLIGHTS as select from ZFM_I_FLIGHTS
{
   key Flight,
   Origin,
   Destination,
   Departure,
   Arrival,
   Delay,
  
   .lineItem: [{ position: 70 }, { type: #FOR_ACTION, dataAction: 'setStatusToCanceled' , label: 'Cancel flight'}]
   Status
}

Behavior Definition

managed implementation in class zbp_fm_c_flights unique;
strict ( 2 );
define behavior for ZFM_C_FLIGHTS
persistent table zfm_flights
lock master
authorization master ( instance )
{
 create;
 update;
 delete;


 field ( numbering : managed, readonly ) Flight;


 action setStatusToCanceled result [1] $self;
 static function GetNumberOfDelayedFlights result [1] ZD_GETDELAYEDFLIGHTS_RESULT;


 mapping for zfm_flights {
     Flight = flight_id;
     Origin = origin_code;
     Destination = destination_code;
     Departure = departure;
     Arrival = arrival;
     Delay = delay;
     Status = status_code;
 }
}

Behavior Projection

projection;
strict ( 2 );
define behavior for ZFM_P_FLIGHTS
{
 use create;
 use update;
 use delete;
 use action setStatusToCanceled;
 use function GetNumberOfDelayedFlights;
}

Behavior Implementation Class (ABAP)

CLASS lhc_ZFM_C_FLIGHTS DEFINITION INHERITING FROM cl_abap_behavior_handler.
 PRIVATE SECTION.
   METHODS get_instance_authorizations FOR INSTANCE AUTHORIZATION
     IMPORTING keys REQUEST requested_authorizations FOR zfm_c_flights RESULT result.
   METHODS setstatustocanceled FOR MODIFY
     IMPORTING keys FOR ACTION zfm_c_flights~setstatustocanceled RESULT result.
   METHODS getnumberofdelayedflights FOR READ
     IMPORTING keys FOR FUNCTION zfm_c_flights~getnumberofdelayedflights RESULT result.
ENDCLASS.
CLASS lhc_ZFM_C_FLIGHTS IMPLEMENTATION.
 METHOD get_instance_authorizations.
 ENDMETHOD.
 METHOD setStatusToCanceled.
   MODIFY ENTITIES OF zfm_c_flights IN LOCAL MODE
          ENTITY zfm_c_flights
             UPDATE FROM VALUE #( FOR key IN keys
             ( Flight = key-Flight
               Status = 'CAN' " Cancelled
               %control-Status = if_abap_behv=>mk-on ) )
             FAILED failed
             REPORTED reported.
       "Read changed data for action result
       READ ENTITIES OF zfm_c_flights IN LOCAL MODE
         ENTITY zfm_c_flights
         ALL FIELDS WITH
         CORRESPONDING #( keys )
         RESULT DATA(flights).
       result = VALUE #( FOR flight IN flights
                ( %tky   = flight-%tky
                  %param = flight ) ).
 ENDMETHOD.
 METHOD getNumberOfDelayedFlights.
       DATA: ls_delayedflights TYPE zd_getdelayedflights_result.
       " Read all flights where status_code = 'CAN'
       SELECT COUNT( * ) FROM zfm_flights
                       WHERE delay > 0
                       INTO _delayedflights .
     " Count how many were found
        APPEND VALUE #( %param = CORRESPONDING #( ls_delayedflights  ) ) TO result.
 ENDMETHOD.
ENDCLASS.

CAP implementation example

If you’ve made it this far, it means you’re really interested in the topic — great!

To illustrate the fundamental differences between SEGW and CAP/RAP, I have implemented a more comprehensive CAP project. In this implementation, the use of an action instead of a batch update clearly proves its value through its seamless integration with Fiori Elements, as well as its ability to encapsulate business logic and handle errors effectively during mass processing.

To make things a bit more fun, here are three example use cases that I implemented in the following CAP example. Try to guess for each one whether it should be handled with a function or an action. The detailed answers are provided just below the implementation — but give it a try first!

Add delay to a flight – This updates the flight's delay and adjusts the arrival and/or departure time depending on the flight status.
Add delay to a list of flights – Same rules apply, but now you're looping through several flights, recalculating times, updating them, and optionally showing success or warning messages.
Retrieve the number of delayed flights – returns how many flights are currently delayed.

CDS Service Definition (srv/service.cds)

using { flightManagement as fm } from '../db/schema'; 

service FlightsService @(path: '/flights') {

    .draft.enabled
    entity Flights as projection on fm.Flights actions {
        action addDelay(
            delay: Integer 
            @label: '{i18n>addDelayAction_delayParameter}'          ) returns Flights;     };

        function getNbOfDelayedFlights() returns Integer;
}

Service Implementation (srv/service.js)

const cds = require('@sap/cds');
const TextBundle = require('@sap/textbundle').TextBundle;

module.exports = cds.service.impl(srv => {

    const { Flights } = srv.entities;

    // Validate and adjust flight data before update
    srv.before('UPDATE', 'Flights.drafts', async (req) => {
 
        // Recalculate departure/arrival if delay is updated
        if ('delay' in req.data) {
            try {
                let { departure, arrival } = await this._recalculate_departure_arrival(req.data.ID, req.data.delay);
                if (departure === undefined && arrival === undefined) {
                    req.reject(400, 'ERR_UPDATING_CAN_OR_LAN', 'delay');    
                }
                req.data.departure = departure;
                req.data.arrival = arrival;
            } catch (error) {
                req.reject(400, 'ERR_UPDATING_DELAY', 'delay');
            }
        }
    });

srv.on('addDelay', async (req) => {
        const locale = req.locale;
        const bundle = new TextBundle('./i18n/i18n', locale);

        // Loop through all flights
        for (let flight of req.params) {
            let { departure, arrival } = await this._recalculate_departure_arrival(flight.ID, req.data.delay);
            
            if (departure === undefined && arrival === undefined) {
                // If calculation failed, send a failure notification for this flight
                req.warn({
                    message: bundle.getText('WARNING_UPDATING_DELAY_CAN_OR_LAN', [flight.ID])
                })
                continue; // Skip updating this flight
            }
            
            // Update the flight with the new delay, departure, and arrival times
            const result = await UPDATE(Flights) .where({ ID: flight.ID }) .set({ delay: req.data.delay, departure, arrival });
            
            if (result === 1) {
                // Success: 1 row was affected
                req.notify({
                    code: 1,
                    message: bundle.getText('SUCCESS_UPDATING_DELAY', [flight.ID, req.data.delay, departure, arrival])
                });
            } else {
                // Failure: no rows were updated
                req.error({
                    message: bundle.getText('FAILURE_UPDATING_DELAY', [flight.ID])
                });
            }
        }
    });    

    // Function: Return the number of delayed flights
    srv.on('getNbOfDelayedFlights', async () => {
        const result = await SELECT `count(*) as count` .from(Flights) .where `delay > 0`;
        return (Array.isArray(result) && result.length > 0) ? result[0].count : 0;
    });
};

You’ve probably already figured out the answers by looking at the implementation, but let me walk you through the reasoning behind each choice:

For the first use case, “Add delay to a flight”, this one was a bit of a trick — it can be neatly handled within a before UPDATE hook, making it a natural candidate for standard CRUD logic.

In contrast, the action “Add delay to a list of flights” introduces more complexity. Since it involves applying business logic across multiple records as well as front-end integration, it is best implemented as a custom action. This approach also enables the generation of a button directly in the table header, along with an input popup, improved error handling, and, at the end of the process, a summary popup listing the operations that were processed in the user interface.

It is possible to enable standard bulk deletion management in Fiori Elements, handled by the framework. This is because it can be sent in batch without any business logic, as in the application I developed. We can also see the ease of integrating the action into a Fiori Elements through annotations. Finally, with the business complexity and error handling, we get feedback regardless of whether it's a success or failure, something that would have been complicated with a batch send. This example illustrates why these new frameworks recommend actions for such cases.

Lastly, the most straightforward case, “Retrieve the number of delayed flights”, simply returns data with no side effects. This makes it a perfect fit for a function.

The complete project is available on my GitHub repository => https://github.com/ValentinCadart/FlightManagement.

Conclusion

In a nutshell, Function Imports, Actions, and Functions are key components across SAP SEGW, RAP, and CAP that enable you to implement custom business logic, transcending basic CRUD functionality. While each platform offers its unique features and methods of defining and invoking these operations, understanding when and how to use them is essential for building efficient, scalable SAP applications.

Sooo.. one more misuse of function imports, actions or functions and I’m calling Basis to revoke your service deployment privileges. You’ve been warned !

User Experience Overviews at SAP Sapphire Orlando & Madrid

2025-05-13T18:29:01.995000+02:00

Join us in Orlando May 20-21 or Madrid May 27-28 to get an overview of the latest user experience innovations along with an outlook on what is planned.

Figure 1: Alt Text: Image of Arin Bhowmick, Chief Design Officer, SAP, with the title and ID of his talk, along with date and location for Orlando.

Listen to Arin Bhowmick, our Chief Design Officer:

Title: SAP's user-experience strategy to achieve better outcomes

Orlando: PUX2821, May 20, 2025 3:30 – 3:50 PM EDT

Madrid: PUX1497, May 27, 2025, 1:30 – 1:50 PM CEST

Abstract: Understand how SAP is leading the way to help business users get work done easily and with better outcomes. Our strategy provides a consistent and integrated suite-first experience, infuses AI nearly everywhere, makes it easier for our customers and partners to design and build great UX, and leverages our user research framework to meet your needs.

Figure 2: Alt Text: Image of Thomas Reiss, VP of SAP User Experience Product Management, with the title and ID of his talk, along with date and location for Orlando.

Join me for my road map talk:

Title: User experience innovations in our products: For today and tomorrow

Orlando: PUX2826, May 20, 2025 4:30 – 4:50 PM EDT

Madrid: PUX1498, May 28, 2025, 9:00 – 9:20 AM CEST

Abstract: Have a look at the latest UX innovations across our suite of applications, along with cool innovations coming soon. Examine SAP S/4HANA Cloud and SAP S/4HANA, as well as cloud products such as SAP SuccessFactors and SAP Ariba solutions. Also, check out selected highlights from UI technologies.

Orlando: Further UX Talks

Let me call out these additional UX specific talks:

Suite-first experience: Seamless, consistent, and integrated
PUX2825 Tuesday, 1:00 pm
Creating a great UX for your own applications with SAP Design System PUX2827 Tuesday, 1:30 pm
AI on the go: Run your business with SAP Mobile Start and Joule
PUX2818 Tuesday, 2:00 pm
From insights to impact: Elevating product success through your feedback PUX2822 Tuesday, 3:00 pm
AI-first user experience: What's in it for you?
PUX2824 Wednesday, 11:00 am
An overview of our AI-fueled mobile products across SAP Business Suite PUX2819 Wednesday, 11:30 am
Our mobile experiences empowering today’s and tomorrow’s business users PUX3224 Wednesday, 1:00 pm

Find out more in the session catalog for Sapphire Orlando, May 19-21: Product and User Experience Track.

Beyond that, there are a number of interesting UX-related talks in other tracks, have a look here for a nice summary by Peter Spielvogel:

UX, AI, SAP S/4HANA transformation sessions at SAP Sapphire and ASUG Annual Conference 2025.

Madrid: Further UX Talks

Creating a great UX for your own applications with SAP Design System PUX1499 Wednesday, 11:30 pm
From insights to impact: Elevating product success through your feedback PUX1495 Tuesday, 11:00 am
An overview of our AI-fueled mobile products across SAP Business Suite PUX1494 Wednesday, 3:30 pm

Find out more in the session catalog for Sapphire Madrid, May 26-28: Product and User Experience Track (6 talks).

More Information

I hope to see you either in Orlando or Madrid – feel free to approach me and ask questions!

In case you missed my recent series of blog posts about our recent UX innovations, do have a look, it starts with this one, which contains links to all the other six posts in the series:

SAP User Experience Q1/2025 Update – Part 1: Many New Innovations Available (AI, Joule and More).

SAPUI5 is Leading the Way in Accessibility with WCAG 2.2

2025-05-15T13:47:07.239000+02:00

The WCAG 2.2 Standard

Accessibility is key to using SAP's business solutions. Adopting the latest standards gives applications a true cutting edge, ensuring that solutions are inclusive and meet the diverse needs of users globally. For meeting the latest Web Content Accessibility Guidelines (WCAG), the UI5 team, designers, and SAP's accessibility experts met the challenge to give us that edge with customers.

The latest version WCAG 2.2 introduced new criteria which need to be implemented on both, the UI technology side as well as application side. Some of the new requirements are targeting application logic, e.g. to avoid asking the user for redundant data, to use a consistent navigation, or to offer alternatives for drag and drop. Application developers follow updated guidelines, the UI5 recommendations and the UI5 Accessibility guide. A big portion of the requirements was handled by the central UI technology SAPUI5.

See two typical new requirements to understand the WCAG benefits:

1) The standard describes the minimum target size of 24x24 px for an interactive element, so that users doesn't accidentally activate a different element:

Visualization of the target size of a UI element

2) Each operation which can be performed by dragging can also be performed by using one pointer actions without dragging:

Context menu with option to maximize a section

WCAG 2.2 and SAPUI5 / UI5 Web Components

SAPUI5 1.136 and UI5 Web Components 2.9.0 adjusted their implementation towards the latest WCAG 2.2 standard. This milestone reflects the unwavering commitment to accessibility and ensures that applications built with UI5 can meet the latest industry standards and customer expectations. Accessibility is a key requirement not only for public sector clients but many other customers. Offering implementations towards WCAG 2.2 fulfills customer expectations and strengthens the competitive position of SAP products.

This is one step in the continuous journey to enhance the user experience and accessibility of SAP solutions. The UI5 team remains dedicated to advancing accessibility features that empower all users.

The ARIA 1.2 Standard

Supporting WCAG, the Accessible Rich Internet Applications (ARIA) standard is used to make Web applications more accessible: It especially helps with dynamic content and advanced UI controls. ARIA adds role, property, and state information to dynamic Web applications to make UI elements recognizable by assistive technologies such as screen readers.

SAPUI5 1.136 and UI5 Web Components 2.9.0 are now implemented towards the latest ARIA 1.2 specification. The UI5 team has worked to ensure these enhancements reflect the best practices for accessible design, thereby helping to improve the overall user experience of consuming applications. This advancement shows how UI5 continues to meet modern standards for accessible user interfaces.

Reference Test Environment

In this context the UI5 team also updated the reference test environment. This ensures compatibility with new technologies and allows making use of the latest innovations. For details see SAP Note 2564165.

References

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

2025-05-22T18:57:29.433000+02:00

Good news for creators! The SAP Fiori design guidelines site is now the SAP Design System portal. The new portal is your one-stop-shop to find everything about the design system. And that’s not all: we have released comprehensive new UI Kits for designers in Figma, the tool used by designers around the world.

SAP Design System Portal

The new SAP Design System portal brings together the product design guidelines SAP Fiori for web, SAP Fiori for iOS, and SAP Fiori for Android, as well as to the new digital design system guidelines. Bringing these all together is not the only improvement we’ve made, we have also:

Enhanced usability: easier to navigate and find what you need.
Improved performance: much faster page load times.
Simplified versioning: the 50+ guideline versions of the past for SAP Fiori for web have now been consolidated into six versions, corresponding to the six versions of SAPUI5 which are in long-term maintenance.
Product specific content: in addition to content which is applicable everywhere, we now also make it clear when content applies only to specific products, for example due to dependencies to product-specific technologies. At the moment we have one such section in the portal, for SAP S/4HANA (which also covers SAP Cloud ERP and SAP Cloud ERP Private).
Feedback button: you can now give us direct feedback on the content, via the feedback button available on the bottom right of each page (as you can see in Figure 1).

SAP’s digital design system reflects our evolved brand and is aligned to our product design system. It serves as a reference for all who contribute content to our public-facing web sites.

Figure 1: The SAP Design System portal start page. Alt Text: Image with header saying “SAP Design System”, with a “See what’s new” button below it, and then four subsections in a horizontal row: SAP Fiori for Web, SAP Fiori for Android, SAP Fiori for iOS and SAP’s Digitial Design System. A “Feedback” button is on the bottom right.

Have a look at this 45 second video to get an overview:

UI Kits for Designers

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

In addition, we give you design resources for designing for accessibility and for performance.

Figure 2: SAP’s UI Kits for Designers in Figma. Alt-Text: The image shows two rows of three cards representing UI Kits: SAP Fiori for Android, SAP Fiori for Web, Designing for Performance, SAP Fiori for iOS, SAP Fiori for watchOS, and SAP Fiori for Wear OS. On the very left of the image information about SAP is listed, with links to resources such as www.sap.com/design-system.

Get an overview and see how easy it is for designers to put together a new UI in this 43 second video:

User Experience in SAP Community

I’m looking forward to seeing how you like the new SAP Design System portal and the new UI Kits for Designers. Do use the SAP Community to exchange your ideas and best practices by using the “User Experience” tag.

Here is a link to the latest posts for User Experience.

For an overview of design at SAP, check out www.sap.com/design.

Developing a UI5 App with Value Help from CSV, Charts with VizFrame, and Excel Upload/Download

2025-05-23T08:54:36.478000+02:00

SAPUI5 (SAP User Interface for HTML5) is a JavaScript-based UI framework developed by SAP. It is used for building responsive, cross-platform web applications that run in desktop and mobile browsers. SAPUI5 is the foundation of SAP Fiori, which is SAP’s design language and user experience strategy.

Key Features:

MVC Architecture: Supports the Model-View-Controller pattern for clean code separation.
Rich UI Controls: Includes a comprehensive set of UI controls optimized for business applications.
Data Binding: Supports multiple data models (JSON, XML, OData) for dynamic content rendering.
Responsive Design: Adapts to different screen sizes and devices automatically.
Theming and Customization: Allows theming via the SAP Theme Designer.

What is BAS (Business Application Studio)?

SAP Business Application Studio (BAS) is a modern development environment provided by SAP. It's designed for building business applications, especially those based on SAP technologies like SAPUI5, SAP Fiori, CAP (Cloud Application Programming model), and more.

Think of BAS as SAP's version of Visual Studio Code — but hosted in the cloud and optimized for enterprise application development.

A Dev Space in SAP Business Application Studio (BAS) is a pre-configured, isolated development environment tailored for specific types of SAP development — like SAPUI5, CAP, or Fiori.

What this app does – simplified scenarios:

Show a page titled "Dummy App" with a clean, centered header.
Collect user input using a form with the following fields:
- Name input field with a value help dialog (e.g., a search or selection help).
- Age input field, also with value help.
- Company input field, again with value help.
Let users submit the form by clicking the "Submit" button, which likely stores or processes the entered data.
Display a small bar chart:
- Shows the number of entries (Count) grouped by Age.
- Useful for visualizing how many users fall into each age group.
Provide a results table that displays the submitted data:
- Each row shows a person's Name, Age, and Company.
- Table grows dynamically to show more entries as needed.
Allow data export and import:
- "Download" button lets users export the table data (likely to Excel).
- "Upload" button lets users import data from a file (probably Excel or CSV).

View1.view.xml :

<mvc:View
    controllerName="com.sap.btp.project1.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns="sap.m"
    xmlns:viz="sap.viz.ui5.controls"
    xmlns:viz.data="sap.viz.ui5.data"
    xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
    xmlns:export="sap.ui.export">

    <!-- Wrap Page inside App to enable scrolling properly -->
    <App>
        <Page id="page" showHeader="false">
            <ScrollContainer height="100%" vertical="true" focusable="true">
                <VBox class="sapUiMediumMargin">

                    <!-- App Header -->
                    <VBox class="appHeader sapUiMediumMargin" alignItems="Center">
                        <Text text="Dummy App" textAlign="Center" class="appTitle" />
                    </VBox>

                    <!-- Main Layout -->
                    <HBox wrap="Wrap">

                        <!-- Form with Value Help Inputs -->
<VBox class="formContainer sapUiSmallMarginEnd">

    <!-- Name Input with Value Help -->
<HBox class="sapUiTinyMarginBottom" alignItems="Center">
    <Label text="Name :" width="100px"/>
    <Input id="nameInput"
           width="300px"
           showValueHelp="true"
           value="{/name}"
           valueHelpRequest="onNameValueHelp" />
</HBox>


   <!-- Age -->
<HBox class="sapUiTinyMarginBottom" alignItems="Center">
    <Label text="Age :" width="100px"/>
    <Input id="ageInput"
           width="300px"
           showValueHelp="true"
           value="{/age}"
           valueHelpRequest="onAgeValueHelp" />
</HBox>

<!-- Company -->
<HBox class="sapUiTinyMarginBottom" alignItems="Center">
    <Label text="Company :" width="100px"/>
    <Input id="companyInput"
           width="300px"
           showValueHelp="true"
           value="{/company}"
           valueHelpRequest="onCompanyValueHelp" />
</HBox>


    <Button text="Submit" press="onSubmit" type="Emphasized" class="sapUiSmallMarginTop" />
</VBox>


                        <!-- Smaller Chart -->
                        <VBox>
                            <viz:VizFrame id="ageChart"
                                          height="250px"
                                          width="400px"
                                          uiConfig="{applicationSet:'fiori'}"
                                          vizType="column">
                                <viz:dataset>
                                    <viz.data:FlattenedDataset data="{/ageChartData}">
                                        <viz.data:dimensions>
                                            <viz.data:DimensionDefinition name="Age" value="{age}" />
                                        </viz.data:dimensions>
                                        <viz.data:measures>
                                            <viz.data:MeasureDefinition name="Count" value="{count}" />
                                        </viz.data:measures>
                                    </viz.data:FlattenedDataset>
                                </viz:dataset>
                                <viz:feeds>
                                    <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Count"/>
                                    <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Age"/>
                                </viz:feeds>
                            </viz:VizFrame>
                        </VBox>
                    </HBox>

                    <!-- Table & Buttons -->
                    <VBox class="sapUiLargeMarginTop sapUiResponsiveMargin">
                        <HBox justifyContent="End">
                            <Button text="Download"
                                    press="onDownloadExcel"
                                    type="Emphasized"
                                    class="sapUiMediumMarginTop sapUiSmallMarginEnd"/>

                            <Button text="Upload"
                                    press="onUploadFile"
                                    type="Emphasized"
                                    class="sapUiMediumMarginTop"/>
                        </HBox>

                        <Table id="resultTable" items="{/submittedData}" width="100%" growing="true" growingThreshold="20">
                            <columns>
                                <Column><Text text="Name" /></Column>
                                <Column><Text text="Age" /></Column>
                                <Column><Text text="Company" /></Column>
                            </columns>
                            <items>
                                <ColumnListItem>
                                    <cells>
                                        <Text text="{name}" />
                                        <Text text="{age}" />
                                        <Text text="{company}" />
                                    </cells>
                                </ColumnListItem>
                            </items>
                        </Table>
                    </VBox>

                </VBox>
            </ScrollContainer>
        </Page>
    </App>
</mvc:View>

XML Namespaces (in SAPUI5, they are often referred to as "UI5 Namespaces").

In an XML-based SAPUI5 view (like View.xml), XML namespaces define which library or module each tag or control belongs to. They prevent naming conflicts and allow the use of multiple libraries in one file

xmlns:mvc="sap.ui.core.mvc"
Enables use of MVC tags like <mvc:View> for defining views and controllers.
xmlns:core="sap.ui.core"
Provides access to core UI5 controls and features like event handling, formatting, etc.
xmlns="sap.m"
Default namespace for mobile-ready UI controls like Button, Input, VBox, etc.
xmlns:viz="sap.viz.ui5.controls"
Gives access to VizFrame chart controls for data visualization.
xmlns:viz.data="sap.viz.ui5.data"
Used to define datasets, dimensions, and measures for VizFrame charts.
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
Maps data to chart axes (e.g. valueAxis, categoryAxis) in VizFrame.
xmlns:export="sap.ui.export"
Provides access to export utilities like Spreadsheet for downloading Excel files.

Brief Summary of the SAPUI5 View

This SAPUI5 XML View defines a simple Fiori-style web app UI that includes:

Header: Displays the title “Dummy App” at the top.
Form Section: Allows the user to enter Name, Age, and Company using input fields with value help dialogs (for selection support).
Chart: Shows a column chart that visualizes Age-wise count data, using sap.viz.ui5.controls.VizFrame.
Data Table: Displays submitted form entries (Name, Age, Company) in a growing table.
Buttons:
- "Submit" to send form data.
- "Download" to export the table (e.g., to Excel).
- "Upload" to import data (e.g., from a file).

View1.controller.js:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox",
    "sap/viz/ui5/controls/VizFrame",
    "sap/viz/ui5/data/FlattenedDataset",
    "sap/viz/ui5/data/DimensionDefinition",
    "sap/viz/ui5/data/MeasureDefinition",
    "sap/ui/model/json/JSONModel",
    "sap/ui/export/Spreadsheet",
    "sap/m/MessageToast",
    "sap/m/SelectDialog",
    "sap/m/StandardListItem",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function (
    Controller,
    MessageBox,
    VizFrame,
    FlattenedDataset,
    DimensionDefinition,
    MeasureDefinition,
    JSONModel,
    Spreadsheet,
    MessageToast,
    SelectDialog,
    StandardListItem,
    Filter,
    FilterOperator
) {
    "use strict";

    return Controller.extend("com.sap.btp.project1.controller.View1", {
        onInit: function () {
            var oView = this.getView();
    var oModel = new JSONModel({
        name: "",
        age: "",
        company: "",
        dropdownData: {
            names: [],
            ages: [],
            companies: []
        },
        submittedData: [],
        ageChartData: []
    });
    oView.setModel(oModel);

            var sCSVPath = jQuery.sap.getModulePath("com.sap.btp.project1", "/model/dropdown_master.csv");

            jQuery.ajax({
                url: sCSVPath,
                dataType: "text",
                success: function (data) {
                    var lines = data.split("\n").filter(Boolean);
                    var names = [], ages = [], companies = [];
                    var ageCountMap = {};

                    for (var i = 1; i < lines.length; i++) {
                        var values = lines[i].split(",");
                        if (values.length < 3) continue;

                        var nameVal = values[0].trim();
                        var ageVal = values[1].trim();
                        var companyVal = values[2].trim();

                        names.push({ key: nameVal, text: nameVal });
                        ages.push({ key: ageVal, text: ageVal });
                        companies.push({ key: companyVal, text: companyVal });

                        if (ageVal) {
                            ageCountMap[ageVal] = (ageCountMap[ageVal] || 0) + 1;
                        }
                    }

                    var ageChartData = Object.keys(ageCountMap).map(function (age) {
                        return {
                            age: age,
                            count: ageCountMap[age]
                        };
                    });

                    oModel.setProperty("/dropdownData/names", names);
                    oModel.setProperty("/dropdownData/ages", ages);
                    oModel.setProperty("/dropdownData/companies", companies);
                    oModel.setProperty("/ageChartData", ageChartData);
                },
                error: function () {
                    MessageToast.show("Failed to load dropdown CSV data.");
                }
            });
        },

        // Value Help for Name
        onNameValueHelp: function () {
            var oModel = this.getView().getModel();
            var aNames = oModel.getProperty("/dropdownData/names");

            var oDialog = new SelectDialog({
                title: "Select Name",
                items: aNames.map(function (item) {
                    return new StandardListItem({ title: item.text });
                }),
                liveChange: function (oEvent) {
                    var sValue = oEvent.getParameter("value");
                    var oFilter = new Filter("title", FilterOperator.Contains, sValue);
                    oDialog.getBinding("items").filter([oFilter]);
                },
                confirm: function (oEvent) {
                    var selected = oEvent.getParameter("selectedItem");
                    if (selected) {
                        this.getView().byId("nameInput").setValue(selected.getTitle());
                    }
                }.bind(this)
            });

            oDialog.open();
        },

        // Value Help for Age
        onAgeValueHelp: function () {
            var oModel = this.getView().getModel();
            var aAges = oModel.getProperty("/dropdownData/ages");

            var oDialog = new SelectDialog({
                title: "Select Age",
                items: aAges.map(function (item) {
                    return new StandardListItem({ title: item.text });
                }),
                liveChange: function (oEvent) {
                    var sValue = oEvent.getParameter("value");
                    var oFilter = new Filter("title", FilterOperator.Contains, sValue);
                    oDialog.getBinding("items").filter([oFilter]);
                },
                confirm: function (oEvent) {
                    var selected = oEvent.getParameter("selectedItem");
                    if (selected) {
                        this.getView().byId("ageInput").setValue(selected.getTitle());
                    }
                }.bind(this)
            });

            oDialog.open();
        },

        // Value Help for Company
        onCompanyValueHelp: function () {
            var oModel = this.getView().getModel();
            var aCompanies = oModel.getProperty("/dropdownData/companies");

            var oDialog = new SelectDialog({
                title: "Select Company",
                items: aCompanies.map(function (item) {
                    return new StandardListItem({ title: item.text });
                }),
                liveChange: function (oEvent) {
                    var sValue = oEvent.getParameter("value");
                    var oFilter = new Filter("title", FilterOperator.Contains, sValue);
                    oDialog.getBinding("items").filter([oFilter]);
                },
                confirm: function (oEvent) {
                    var selected = oEvent.getParameter("selectedItem");
                    if (selected) {
                        this.getView().byId("companyInput").setValue(selected.getTitle());
                    }
                }.bind(this)
            });

            oDialog.open();
        },

        onSubmit: function () {
            var oView = this.getView();
            var name = oView.byId("nameInput").getValue();
            var age = oView.byId("ageInput").getValue();
            var company = oView.byId("companyInput").getValue();
       
            var oModel = oView.getModel();
           
            // Make sure these values are set to the model
            oModel.setProperty("/name", name);
            oModel.setProperty("/age", age);
            oModel.setProperty("/company", company);
       
            var validAges = oModel.getProperty("/dropdownData/ages").map(a => a.text);
            var validCompanies = oModel.getProperty("/dropdownData/companies").map(c => c.text);
       
            if (!age || !validAges.includes(age)) {
                MessageBox.error("Please select a valid Age.");
                return;
            }
            if (!company || !validCompanies.includes(company)) {
                MessageBox.error("Please select a valid Company.");
                return;
            }
       
            var message = `Name: ${name}\nAge: ${age}\nCompany: ${company}`;
            MessageBox.information(message, { title: "Submitted Details" });
        },
       

       
        onDownloadExcel: function () {
            var oModel = this.getView().getModel();
            var aData = oModel.getProperty("/submittedData");

            var oExportData = aData.map(function (item) {
                return {
                    "Name": item.name,
                    "Age": item.age,
                    "Company": item.company
                };
            });

            var oSpreadsheet = new Spreadsheet({
                workbook: {
                    columns: [
                        { label: 'Name', property: 'Name' },
                        { label: 'Age', property: 'Age' },
                        { label: 'Company', property: 'Company' }
                    ]
                },
                dataSource: oExportData,
                fileName: "table_data.xlsx"
            });

            oSpreadsheet.build().then(function () {
                MessageToast.show("Excel file has been downloaded!");
            });
        },

        onUploadFile: function () {
            var oInputFile = document.createElement("input");
            oInputFile.type = "file";
            oInputFile.accept = ".xlsx, .xls";
            oInputFile.onchange = this._onFileSelected.bind(this);
            oInputFile.click();
        },

        _onFileSelected: function (oEvent) {
            var oFile = oEvent.target.files[0];

            if (!oFile) {
                MessageToast.show("No file selected.");
                return;
            }

            var loadXLSX = function () {
                return new Promise(function (resolve, reject) {
                    if (typeof XLSX !== "undefined") {
                        resolve();
                        return;
                    }

                    var script = document.createElement("script");
                    script.src=jQuery.sap.getModulePath("com.sap.btp.project1") + "/libs/xlsx.full.min.js";
                    script.onload = resolve;
                    script.onerror = function () {
                        reject(new Error("Failed to load XLSX library."));
                    };
                    document.head.appendChild(script);
                });
            };

            loadXLSX().then(function () {
                var reader = new FileReader();

                reader.onload = function (e) {
                    try {
                        var data = new Uint8Array(e.target.result);
                        var workbook = XLSX.read(data, { type: 'array' });

                        var firstSheetName = workbook.SheetNames[0];
                        var worksheet = workbook.Sheets[firstSheetName];

                        var jsonData = XLSX.utils.sheet_to_json(worksheet);
                        var cleanedData = jsonData.map(function (item) {
                            return {
                                name: item.Name || "",
                                age: item.Age || "",
                                company: item.Company || ""
                            };
                        });

                        var oModel = this.getView().getModel();
                        oModel.setProperty("/submittedData", cleanedData);

                        MessageToast.show("Excel data loaded successfully.");
                    } catch (err) {
                        console.error("Excel parsing error:", err);
                        MessageToast.show("Failed to read Excel file.");
                    }
                }.bind(this);

                reader.readAsArrayBuffer(oFile);
            }.bind(this)).catch(function (err) {
                console.error(err);
                MessageToast.show("Could not load XLSX library.");
            });
        }
    });
});

SAPUI5 Module Imports & Their Purpose

"sap/ui/core/mvc/Controller"

Base class for all controllers. Used to define your custom controller logic.

"sap/m/MessageBox"

Used to show popup dialog boxes (e.g., for errors, confirmations, info messages).

"sap/viz/ui5/controls/VizFrame"

Core control for rendering charts (bar, pie, line, etc.) in SAPUI5 apps.

"sap/viz/ui5/data/FlattenedDataset"

🔹Defines the data format for charts, mapping flat JSON data to visual elements.

"sap/viz/ui5/data/DimensionDefinition"

Specifies dimensions (e.g., Age) used on the x-axis or category axis of the chart.

"sap/viz/ui5/data/MeasureDefinition"

Specifies measures (e.g., Count) used on the y-axis or value axis of the chart.

"sap/ui/model/json/JSONModel"

Provides a client-side data model using JSON, used to bind data to the UI.

"sap/ui/export/Spreadsheet"

Used for exporting table data to Excel (.xlsx) format.

"sap/m/MessageToast"

Displays temporary messages (toasts) at the bottom of the screen (e.g., “Excel downloaded!”).

"sap/m/SelectDialog"

A searchable dialog used in value help (dropdown) selections.

"sap/m/StandardListItem"

UI element representing a standard item in a list, used inside SelectDialog.

"sap/ui/model/Filter"

Enables filtering of items (e.g., in the value help dialog based on user input).

"sap/ui/model/FilterOperator"

Provides filter operations like Contains, EQ, etc., for filtering logic.

Key Functionalities Explained Briefly:

onInit() – Load CSV Data:
- Loads dropdown_master.csv from the model folder.
- Extracts Name, Age, and Company options.
- Stores the values in a JSON model under /dropdownData.
- Also generates chart data (/ageChartData) based on age counts.
Value Help (SelectDialog) for Each Field:
- onNameValueHelp(), onAgeValueHelp(), onCompanyValueHelp() open a dialog with search.
- Items are fetched from the loaded CSV data (/dropdownData).
- The selected item is set in the respective input field.
onSubmit() – Handle Form Submission:
- Validates that Age and Company are from valid lists.
- Shows a message box with the entered Name, Age, and Company.
onDownloadExcel() – Export to Excel:
- Downloads the /submittedData model (form entries) as an Excel .xlsx file.
onUploadFile() – Upload Excel File:
- Lets the user upload an Excel file.
- Reads and parses it using the XLSX library.
- Updates /submittedData in the model, populating the table in the UI.

The data shown in the value help comes from a CSV file named dropdown_master.csv, which is located in the model folder inside the webapp directory. This CSV file is loaded as a model and used to populate the dropdown options in the value help dialog.

In the app, when you click on the value help icon, a popup dialog opens displaying a list of selectable options. These options—for Name, Age, and Company—are all loaded from a CSV file (dropdown_master.csv) located in the model folder. The same logic applies to each input field.

I’ve included a GIF in the demo to visually showcase how the app functions.

Learning Materials:

https://learning.sap.com/learning-journeys/develop-sapui5-applications

Learning SAPUI5 for Beginners - SAP Community

Demo Kit - SAPUI5 SDK

SAP Tutorial Navigator | Tutorials for SAP Developer

Introducing SAPUI5 Version Preview in SAP Build Work Zone

2025-06-03T16:02:55.953000+02:00

SAPUI5 is a cornerstone of SAP's user interface technology, providing a robust framework for building responsive and enterprise-ready web applications. Regular updates to SAPUI5 bring innovative features and critical bug fixes, ensuring that applications remain modern and efficient. Until now, the latest SAPUI5 versions were automatically adopted in production environments, which limited opportunities for early evaluation ahead of deployment.

Recognizing the need for controlled testing of SAPUI5 updates, we have introduced a new feature that allows administrators to preview upcoming SAPUI5 versions in non-productive environments within SAP Build Work Zone. This capability was developed in response to customer feedback, aiming to provide a controlled environment for evaluating SAPUI5 updates in SAP Build Work Zone, thereby avoiding immediate changes in production environments.

What's New: SAPUI5 Version Preview Feature in SAP Build Work Zone

The new "Preview SAPUI5 Latest Version" feature empowers administrators to test upcoming SAPUI5 versions in designated non-productive environments within SAP Build Work Zone. This proactive approach allows customers to explore upcoming updates in a controlled setting, supporting a smoother and more predictable transition to production environments.

This feature is available in SAP Build Work Zone, advanced and standard edition and SAP SuccessFactors Work Zone.

Key Benefits:

This feature offers several advantages. Administrators can gain early access to the Release to Customer (RTC) version of SAPUI5. They have two weeks before its general availability, allowing ample time for testing. By enabling the preview setting on specific non-productive sites, they can assess compatibility and performance with the upcoming version. This controlled testing environment helps identify and address potential issues, reducing the likelihood of disruptions in production. After the two-week preview period, the RTC version becomes the default, aligning all sites with the latest stable release.

How it works – step by step

1. Enable Preview:

In the site editor, administrators can activate the "Preview SAPUI5 Latest Version" setting for selected non-productive sites.

Toggle turned off in site settings

Toggle turned on in site settings

Warning message while saving the changes

Site preview on and further information

Site directory with a site where preview is turned on

2. Testing Period

The designated sites will consume the RTC version of SAPUI5 for a two-week period, during which thorough testing and validation can be conducted.

To enable this in SAP Build Work Zone, standard edition, customers can create a dedicated site in their existing PROD or PRE-PROD sub-accounts (or QA, if preferred), there is no need to create a new sub-account. The relevant content can be transported to this test site, where the preview option for SAPUI5 can then be enabled. In SAP Build Work Zone, advanced edition, customer must setup a new sub-account (pre-prod) to use the UI5 preview feature.

3. Adjustment Option

If needed during the preview period, administrators can turn off the preview setting to revert the site back to the previously active version.

4. Automatic Update

After the two-week period, the RTC version becomes the default version for all sites, ensuring consistency across environments.

SAPUI5 versions

SAPUI5 provides new versions regularly to deliver innovative features and also to provide patches with bug fixes. See What's New in SAPUI5 and the SAPUI5 What's New Viewer to learn about the new features and Versioning and Maintenance of SAPUI5 to understand the versioning concept. A new version is consumed by default by SAP BTP services like SAP Build Work Zone to have a solid basis for new capabilities and an up-to-date user experience.

Approximately 2 weeks before a new version is consumed by SAP cloud solutions, it is released to customers (RTC). In this timeframe you may now test a new version with SAP Build Work Zone. Learn about the planned SAPUI5 versions with their planned RTC date in SAP Note 3504933.

Learn More!

Important references:

See the planned SAPUI5 versions with their planned release date in SAP Note 3504933.
See the released SAPUI5 versions in SAPUI5 Versions Maintenance Status.

For more insights into SAPUI5 and SAP Build Work Zone:

Explore the SAPUI5: What's New and When Is It Coming? blog post on the SAP Community
SAP Build Work Zone on: sap.com / SAP Community
SAP Application Development and Automation Community Group

Unsafe-eval error in SAP Build Work Zone: Understanding and fixing a CSP blockage

2025-06-10T07:00:00.028000+02:00

While developing a SAP Fiori application in SAP Business Application Studio (BAS), I embedded an external component within a custom SAPUI5 component. The application worked perfectly in the local development environment, but once deployed into SAP Build Work Zone (BWZ), it no longer loaded as expected.

The browser console revealed an error related to the Content Security Policy (CSP), specifically due to the indirect use of eval(). This blog post summarizes my learnings about CSP and how I resolved the issue.

What is the Content Security Policy (CSP)?

CSP is a web security standard defined by the W3C and enforced by web browsers. It allows developers to control which resources (scripts, images, styles, etc.) a browser is allowed to load and execute, helping to prevent Cross-Site Scripting (XSS) attacks and malicious script injections.

For example, the following directive means that only scripts from the same origin as the application are permitted.

Content-Security-Policy: script-src 'self'

Other common directives include:

style-src: Specifies allowed sources for stylesheets.
img-src: Limits where images can be loaded from.
connect-src: Defines allowed sources for fetching resources like APIs.
default-src: Specifies a fallback for all resource types if not otherwise defined.
frame-ancestors: Controls which sources can embed the page in an iframe.
…

To learn more about CSP, refer to the official documentation on MDN: https://developer.mozilla.org/fr/docs/Web/HTTP/CSP

Problem context

The application was developed in SAP Business Application Studio and contained an external web component wrapped inside a custom SAPUI5 component.

Once deployed to SAP Build Work Zone, the interface no longer displayed at all. The browser console then showed the following error:

Unsafe-eval error (CSP Compliant)
Uncaught (in promise) EvalError:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script
in the following Content Security Policy directive: "script-src * data: blob:".

Error Meaning

In CSP, dynamic functions like eval() or new Function() are blocked by default because they can introduce serious security risks. These functions allow JavaScript code to be generated and executed at runtime, which can be exploited to inject and run malicious scripts—commonly associated with XSS attacks.

To protect the application's security, dynamic code execution is blocked by default in the Content Security Policy (CSP). Allowing it would require the inclusion of the unsafe-eval directive in the CSP, but this weakens security and should be avoided in production environments.

Root cause analysis

In the external component I used, I was generating an HTML element returned as a string (this is where I messed up). This HTML was then dynamically injected into the component’s DOM. However, the external component was interpreting this string using new Function(), violating CSP rules.

This behavior went unnoticed locally in Business Application Studio because CSP policies are often disabled or applied more leniently in development environments. However, in SAP Build Work Zone, a strict CSP is enforced, blocking dynamic code evaluation like this.

Implemented solution

By consulting the official documentation of the component, I found that I could provide a JavaScript function directly instead of passing a returned string containing HTML. This approach enables the component to use a safe rendering function, avoiding reliance on blocked mechanisms like eval() or new Function().

Here is an example of the new CSP-compliant code:

const generateDropdown = (aOptions) => {
  // Create the select element
  const oSelectElement = document.createElement('select');
  oSelectElement.classList.add('myCustomSelectClass');

  // Loop through the options array and create option elements
  aOptions.forEach(oOption => {
    const oOptionElement = document.createElement('option');
    oOptionElement.value = oOption.value;
    oOptionElement.textContent = oOption.label;

    // Append the option to the select
    oSelectElement.appendChild(oOptionElement); 
  });

  return oSelectElement;
};

// Example usage with an array of options
const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' }
];

// Generate the dropdown dynamically
generateDropdown(options);

Lessons learned

An application that works correctly in BAS may encounter critical errors in BWZ if it does not comply with the CSP. It is essential to prioritize the use of real JavaScript functions over injecting HTML or JavaScript code as strings. Often, the documentation for external components provides alternative solutions that are CSP-compliant, and these should be carefully considered.

Conclusion

The Content Security Policy is an essential tool for securing web applications against XSS attacks and the execution of uncontrolled code. In environments like SAP Build Work Zone, CSP is strictly enforced, which can lead to unexpected errors.

By adapting our implementation to comply with CSP rules, we not only ensure the compatibility of our applications but also enhance their security. I hope this feedback will be useful to you.

Blog series on my CPI + Camel learning journey - Interlude2 APIM debugging

2025-06-15T22:59:37.197000+02:00

Motivation

Well, as with MPL you have to start doing some real life debugging to figure out the tools you are provided with "have some space for improvement", to put it mildly.

And this is what happened to me when I had a weird case for one of my api proxies.

A little bit about Apigee and debug session structure

Not a secret that under the hood APIM has apigee platform (that google bought)

So, it turns out it was not SAP to blame for this "debug session" logic, but still the app they made is something special I have to say..

What bothers us is this stuff https://cloud.google.com/apigee/docs/api-platform/debug/trace

And particularly the structure of session/transactions https://cloud.google.com/apigee/docs/api-platform/debug/trace#download-structure

Without going into details (after all this blog does not aim to provide the full schema details) let's see what could be of our most interest here.

First, the whole session is an array of entries (we will call it transactions which are api calls)

Below we would see "point" array - kinda Steps of flow execution each having an array of "results" in turn.

[
    {
        "completed": true,
        "point": [
            {
                "id": "Paused|Resumed|StateChange|FlowInfo|Condition|Execution|Error",
                "results": [
                    {
                        "ActionResult": "DebugInfo|RequestMessage|ResponseMessage|ErrorMessage|VariableAccess"
                    }
                ]
            }
        ]
    }
]

These results contain some more details (which we see in the standard app as lists/forms) of key-value pairs

What is different is just name of "aggregation" - path in json to those arrays (eg "properties/property" or "headers" or "accessList")

{
    "ActionResult": "DebugInfo",
    "properties": {
        "property": [ { "name": "<PROP_NAME>", "value": "<PROP_VALUE>" } ]
    },
    "timestamp": "04-06-25 13:28:52:904" // yes, not a proper iso8601 timestamp ;(
}

{
    "ActionResult": "RequestMessage",
    "content": "<REQUEST_BODY_IF_PRESENT>",
    "headers": [ { "name": "<HEADER_NAME>", "value": "<HEADER_VALUE>" } ],
    "uRI": "<URI>",
    "verb": "<VERB>"
}

{
    "ActionResult": "ResponseMessage",
    "content": "<RESPONSE_BODY_TRIMMED>.....",
    "headers": [ { "name": "<HEADER_NAME>", "value": "<HEADER_VALUE>" } ],
    "reasonPhrase": "<STATUS_PHRASE>",
    "statusCode": "<STATUS_CODE>"
}

{
    "ActionResult": "ErrorMessage",
    "content": "<APIM_ERR_BODY>",
    "headers": [ { "name": "<HEADER_NAME>", "value": "<HEADER_VALUE>" } ],
    "reasonPhrase": "<STATUS_PHRASE>",
    "statusCode": "<STATUS_CODE>"
}

{
    "ActionResult": "VariableAccess",
    "accessList": [
        {
            "Get": { "name": "<VAR>", "value": "<VALUE_IF_GOT>" }
        },
        {
            "Set": { "name": "<VAR>", "success": true, "value": "<VALUE>" }
        }
    ]
}

Api Proxy debug viewer app

But most important thing is that we DO HAVE Request and Response (and Error) Method, Url, Content and Status!!

And so I decided to make a really simple frontend-only ui5 app based on Flexible Column Layout (which is hidden behind the intent #apim-dbg in capic launchpad)

For this I just had to figure out the structure of the session and then apply some transformations to display it nicely.

And while the original app tries to follow "visual approach" apigee had in their app (you could see it following the link above) - using lots of pictograms/icons while doing its best to hide essential information from us like target endpoint http code/status or request/response body - I decided to display our stuff via lists and forms, cuz as a developer I LOVE TEXT (which can even be searchable).

This image from apigee documentation illustrates it well https://docs.apigee.com/api-platform/fundamentals/what-are-flows (not 100% percent sure I am right regarding mapping of stages, but it somewhat makes sense to me)

Basically, the app displays our debugging session in the following way (kinda 5 levels):

Master - 1 Transactions (api calls) as Items // with objectstatus stuff
Detail - 2 Stages (list grouping) + 3 points (steps) as Items // also with some color coding
Detail-Detail - 4 ActionResults (form container) + 5 results params as form elements

Some other things to point out here (at Detail screen):

StateChange typically has RequestMessage|ResponseMessage|ErrorMessage ActionResult object appearing

It comes first in group and it is marked with blue highlight (also from this guy I calculated groups for detail list)

Error has some error information that doesn't help much but is a place in flow where error occured - marked red
Execution - is an interesting step, basically, this is where our policies run - it is marked amber

Properties of DebugInfo action here contain "type" or "stepDefinition-type" which is policy type (not 100% sure) and "

stepDefinition-name" or "stepDefinition-displayName" which is actual policy name as we created it.

I use it as a name for step instead of just "Execution" (this is why you don't see it in UI)

Here are the screenshots of a simple debugging session that hopefully will immediately make sense to you

Some JS magic

Ok, this might even look good (or at least better than the original), but how to get the data?

Well, it turns out, SAP did a great job exposing some global methods (and even oapiproxyData object ) in their app (yes it seems to be a really, really old one), so we can just programmatically create us a session and then fetch data into clipboard.

And for that I used super old trick: javascript favourites snippets (even had to google they were called "bookmarklets")

So, to start session you might want to use something like this:

sap.apimgmt.commons.ajaxHandler({
  data: JSON.stringify({"name": oapiproxyData.name, "version": oapiproxyData.version, "session_id":"pwn3d"}),
  headers: {"Content-Type": "application/json", "Accept": 'application/json', "operation": "start"},
  url: APIMGMT.TRACE_WORKSPACE_ROOT,
  type: APIMGMT.HTTP_METHODS.POST,
  success: console.log, error: console.log
})

And to fetch data into your browser clipboard (and I was surprised I did not need a focusable element when using the bookmarkelt to write to it) you would do this:

sap.apimgmt.commons.ajaxHandler({
  data: JSON.stringify({"name": oapiproxyData.name, "version": oapiproxyData.version, "session_id":"pwn3d"}),
  headers: {"Content-Type": "application/json", "Accept": 'application/json', "operation": "get"},
  url: APIMGMT.TRACE_WORKSPACE_ROOT,
  type: APIMGMT.HTTP_METHODS.POST,
  success: function(data){ navigator.clipboard.writeText(JSON.stringify(data))}, error: console.log
})

And I am not going to teach you how to add that stuff into bookmarks but wiki probably could.

Demo

In this demo we are going to reproduce the session from screenshots above.

For this purpose we use simplest api proxy possible - to anonymous Northwind service https://services.odata.org/V2/Northwind/Northwind.svc/ and protect it with apikey, so you can easily try it yourself in like 10 mins.

00:00 Intro and motivation

01:39 Northwind api proxy and debug with standard app (2 positive and 2 negative responses)

03:45 Try interpreting the results

04:58 But actual session data json contains more data and that is what we cover in blog (kind of)

06:06 A little bit about apigee stuff and json structure and corresponding app screens

08:34 How to obtain session data json (other than by copying from network requests)

10:08 Repeat same api test/debug routine with bookmarklets magic

11:36 Fetch session json data to finally see the new app in action (and try to interpret data there)

15:15 Confirm that AnalyticsPublisher policy/step indeed contains response message.status.code, request.path and request.verb as vars (but not body though)

16:10 "And we do see that we do have body which is very nice" (in proper place)

17:07 Final words about app screens and features and outro

P.S Disclaimer and feature requests/fixes

This is the simplest and mot naive implementation of this app made out offrustration, so if for some reason you might want to test it there can (or must) be scenarios it does not support (haven't tried using scripts, conditional flows etc).

Please feel free to comment here regarding errors/features you might need, but DON'T paste session info here as it contains sensitive information about your apim instance.