SAP Community - SAPUI5

Instruction of implement-test-deploy flow for SAPUI5 plus CAP integrated with another services

2024-03-16T02:40:33.612000+01:00

Introduction

In my previous blog: Extend Upload Set to Fiori Elements and utilize Document Management Service, I introduced a sample program for SAP BTP that manages both text and file information. Previous blog is explaining about completed artifacts, and I think someone (including myself) would like to know how to build this artifacts. It is more difficult to describe dynamic workflow in document, but I would like to focus on important findings that are not yet documented from my perspective.

This document is useful for you when you are new to implement / test / deploy Fiori Elements (including SAPUI5 extension) and CAP OData services integrated with another services like SAP Document Management service (SDM).

Prerequisites

You already tried to implement and deploy application with "Full-Stack Application Using Productivity Tools" dev space in Business Application Studio (BAS). For example, follow Develop Full-Stack App Using the High Productivity Tools of SAP Business Application Studio and Create a CAP Service with BAS Productivity Tools tutorials.

From now I use "Full-Stack Cloud Application" dev space in BAS to align with your environment. Usually, I am using local VSCode environment, that is just my preference to prevent annoying disconnection in BAS. So, you can choose your preferred one.

Implement CAP OData service

First step is CAP OData service from scratch. I think it is convenient to use command to generate template code by running `cds init` in prompt.

I can start writing db/schema.cds file for database entity `TemplateRequests` and file entity `Attachments`. I need to add SDM specific annotation to `Attachments` entity and properties (refer to sap-cap-sdm-plugin). Then I write srv/user-service.cds to expose above entities as service.

I feel it is not difficult to manually write these CDS files, compared with Fiori Elements application. If you feel difficulty, instead you can open Storyboard from command pallet then generate CDS files via GUI data modeler.

After two files are written, I need to create .cdsrc.json file to connect to SDM service (refer to sap-cap-sdm-plugin too). This file is similar meaning with `cds` part of package.json as reference mentioned.

Let's test what I created.

First, I need `npm i sap-cap-sdm-plugin` command to add this plugin and install all required packages.

Run `cds watch` command and go to http://localhost:4004 (or equivalent URL in case of BAS). You can see Service Endpoint `/odata/v4/user` and two entities I created. After mocked authentication (alice/123 is enough), `TemplateRequests` is working well (just see zero record), but `Attachments` failed with error `[cds] - Error: Could not find service binding of type 'destination'.`.

This error mentioned that we need destination to access to SDM. It is happened when we need to access to another cloud services. Next step is to setup to connect to SDM.

Deploy CAP OData service temporarily

As mentioned in previous section, we need destination to test my CAP OData service. Destination service, with help of XSUAA (Authorization and Trust Management) service, will be deployed to Cloud Foundry environment. These services are required for both local (hybrid) testing and production, so I will create deployment file `mta.yaml` for production purpose, and utilize associated destination service for testing.

Run `cds add hana,xsuaa,destination,mta` to generate `mta.yaml` file for XSUAA / destination services (and HANA database for production).

Follow `Setup sample application` section of my previous blog, except for cloning sample code to deploy your current application with services. In my environment, I need to delete `-${org}-${space}` from `xsappname` in `mta.yaml` to process deployment.

After deployment has done, I do not use application (OData service) in Cloud Foundry, but use XSUAA / destination for next step.

Hybrid test CAP OData service

Now I am ready to test in local environment. Local test using Cloud Foundry service is called hybrid testing. I use `cds bind` command to bind to XSUAA and destination service instances (if you want to persist testing data to HANA Cloud, you will bind to HDI container service too).

After binding to service instances, you can find `.cdsrc-private.json` file, that is generated by above command. That file is only used for hybrid testing, and when we keep binding part of this file, it is fine to change the rest for my convenience. I changed authentication from XSUAA auth to mocked auth and in-memory (SQLite) db .

From:
  "requires": {
    "[hybrid]": {
      "auth": {
        "kind": "xsuaa-auth",

To:
  "requires": {
    "[hybrid]": {
      "db":{
        "kind": "sql"
      },
      "auth": {
        "kind": "mocked", 
        "users": {"alice": {"roles":[]}},

Now I start `cds watch --profile hybrid` command to use binding services above. Open http://localhost:4004 again and this time I can process `Attachments` entity successfully as below.

GET result of Attachments entity

It is fine to test GET request of OData in this way, but I would like to test POST/PATCH/DELETE requests too. To do this, I will use test/test.http file that is utilizing REST Client as below screen. REST Client is more convenient way to test OData service, for example I can collect multiple requests to file and pass one response value (generated ID e.g.) to variable and extract it at next request.

When OData service is fully tested, I will move to Fiori Elements. Please keep in mind that hybrid testing is effective for testing Fiori Elements (and other SAPUI5 app) too.

Test OData service using REST Client

Generate Fiori Elements

Next step is to implement Fiori Elements application. You may be surprised at many files inside app directory in my repository. No worry 😌, most of files are generated by Application Generator in SAP Fiori tools and no need to change manually.

I can open Command Pallete to type `Fiori: Open Application Generator` in it. Then you can choose configurations below.

Template Selection
- Template: List Report Page
Data Source and Service Selection
- Data Source: Use a Local CAP Project
- Your CAP project: automatically selected one
- OData service: automatically selected one
Entity Selection
- Main entity: automatically selected one
- Navigation entity: None
- Others: default value
Project attributes
- Module Name: set your app name (not changed later)
- Application Title: default value is fine (can be changed later)
- Application namespace: blank is fine
- Description: default value is fine (can be changed later)
- Minimum SAPUI5 version: default value is fine
- Add deployment configuration to MTA project: Yes
- Add FLP configuration: No for the moment (setup later)
- Configure advanced option: Yes
- UI5 theme: default value is fine
- Add code assist libraries to your project: No is fine
- Skip generation of associated annotations.cds file: No is fine
- Enable TypeScript: Yes (required)
Deployment Configuration
- Please choose the target: Cloud Foundry
- Destination name: set any destination (change from None) is fine (change later).

Configure Fiori Elements

After app files are generated, you can start Page Map to modify default Fiori Elements (if you cannot open Page Map, you will reload browser and try again). Changing configuration in this GUI tool is affected to generated files, like annotations.cds and manifest.json.

In most of cases it is enough to use Page Map for configuring Fiori Elements, but there are some cases to manually append annotations (for example `UI.UpdateHidden` annotation is disappearing Edit button). Below references are helpful.

OData Annotations is the basis of annotation.
SAP Fiori elements for OData V4 Feature Showcase is good code samples.
Search Results for "annotation" in UI5 Demo Kit is annotation relevant articles from SAPUI5 perspective.

When some configuration changed, I can check what is happened using local (hybrid) testing. Run `cds watch --profile hybrid` command and go to http://localhost:4004, now I can see UI5 applications at Web Applications part (first one is for production purpose, and the rest of three are for automation testing that I do not mention today).

Thanks to mocked authentication I setup before, I can access to UI5 application with binding to destination service. (If you are interested, please revert back to `xsuaa-auth` in `.cdsrc-private.json` and check if what is happened, you are not possible to authenticate from here.)

In this app, I setup Flexible Column Layout in Page Map to resolve UploadSet issue.

Flexible Column Layout in Page Map

Extend Custom Section to Fiori Elements Object Page

Next step is extending custom section for handling SDM files. From Page Map, I will go to Object Page and click `+` button in Sections, then select Custom Section. In the popup, I will select to create New Fragment and Generate Event Handler (Controller). Those are ones I will modify later for my requirement.

Extend custom section in Object Page

After click Add button, you can find `Attachments.fragment.xml` and `Attachments.ts` files in ext/fragment directory. Run `cds watch --profile hybrid` command and go to http://localhost:4004 and UI5 app, now I can see Attachments section and one button at the last section. It is derived from default XML fragment and controller.

Implement XML fragment

I will start my implementation from Sample code of UploadSet. First, I will copy `Page.view.xml` to paste to my `Attachments.fragment.xml`. Sample code is for View and not fit to my Fragment, so you should copy `<upload:UploadSet> part only. Also to recognize `upload` namespace, you will copy `xmlns:upload="sap.m.upload"` in the FragmentDefinition tag.

Run `cds watch --profile hybrid` command and go to http://localhost:4004 and UI5 app, and I can see UploadSet component (not working yet, will modify).

Copy sample UploadSet to XML fragment

Next, let's remove buttons to simplify implementation. I will remove `<upload:toolbar>` part and check again. Hmm 🤔, no change happened to browser 😓. At that time, you will go to development tools in the browser (Microsoft Edge in my case), go to Application, then clear site data. Then reload BAS to authenticate again and try again, now updated XML view is applied and removed buttons 😀.

Clear site data in developer tools

From now, I will read UploadSet and UploadSetItem API reference to understand each property and events. Then finally completed Attachments.fragment.xml coding.

Implement controller TypeScript file

Even XML fragment is possible to some part of requirements (e.g. list up files in directory), I know I need to modify standard logic to align with CAP OData service, so I will start modifying `Attachments.ts` TypeScript file.

First, TypeScript is easier for me compared with JavaScript in two perspective, first TypeScript syntax is similar to my previously learned language, second TypeScript is checking syntax error at coding (before testing). I recommend to select TypeScript when selecting which language is used when generating Fiori Elements.

Going back to Sample code of UploadSet to find `Page.controller.js` file. This is JavaScript code, and I am not familiar with this syntax (first few lines especially). Now we have convenient tool, Generative AI to convert to TypeScript. I used Bing Copilot to do this task (convert below Javascript code to TypeScript <<sample code>>).

Converting sample JavaScript to TypeScript

Converted code is better for me to understand code structure. We need to import some UI5 classes at first, and implement action against each event. Actually I do not use sample code for my case, but it is useful for reference.

Event name described in XML fragment is linked with function name in TypeScript. To find controller logic correctly, I need to write `core:require="{ handler: 'kaztakata/templaterequests/ext/fragment/Attachments'}"` in XML fragment. That handler path is written in the generated dummy button at the beginning, so move this part to UploadSet tag.

After that, I will read UploadSet and UploadSetItem API reference again and iterate writing code and testing it. Below list is my workflow.

Write controller logic line by line and start hybrid testing. In the browser development tools, go to Source, then you can find your controller `ts` files. Click the left side of each line to set debug point. Then you can stop program in local environment.
Check OData service result. In the browser development tools, go to Network, then you can find OData service requests. Normally you can see header tab to confirm path, but in case of $batch request you will click payload tab to confirm path. You can see response in preview tab in both successful and error case.
Check unknown error or just blank screen etc. In the browser development tools, go to Console, then you can find (red color) errors. You can initially check error code, for example 401 error is relevant to user authentication/authorization, 404 error is relevant to incorrect URL path configuration.

Finally completed Attachments.ts coding.

Deploy Fiori Elements

Deploying Fiori Elements (and SAPUI5) needs some preparation.

I will add Approuter configuration from now. Approuter is mandatory parts for publishing SAPUI5 apps to Cloud Foundry. There are two types, one is stand alone type that is deployed by myself, the other is managed type that is used from Work Zone, standard edition etc (see SAP Tech Bytes: FAQ Managed Approuter vs. Standalone Approuter for detail). I will simply use managed Approuter in Work Zone, standard edition.

Read Set Up Your Development Environment then update below points (Check following documents in detail of each topic). I will provide my files (link) for your reference.

manifest.json: add `sap.cloud` part to your file (value is matched with destination content in item 4).
xs-security.json: add `Token_Exchange` role to role-templates.
mta.yaml: change `HTML5Runtime_enabled` value to `true` in destination service config.
mta.yaml: add module of destination content (if you follow my instruction, just replace `sap-sample-fiori-elements-uploadset` to your project).
xs-app.json: modify your destination name pointing to CAP OData service determined in mta.yaml.
manifest.json: add `crossNavigation` part manually, or open Application Info from command pallet, then click `Add Fiori Launchpad Config`. Then enter configuration like below.

Add Fiori Launchpad (Work Zone) Config

After setup has done, run `mbt build` and `cf deploy your_mta_file` to deploy your app and surrounding services.

Test Fiori Elements in Cloud Foundry environment

Everything is deployed to Cloud Foundry environment. I can go to HTML5 applications menu in SAP BTP Cockpit to find my Fiori Elements. Click app and I will authenticate by Approuter, then go to Fiori Elements successfully. I can test creating entry and uploading/downloading document, same as local (hybrid) testing.

Conglaturation ㊗️. That is all of my instruction.

I will skip setting of Work Zone, but you can check Integrating Business Content for detail.

HTML5 Application in Cloud Foundry environment

Conclusion

I am creating this blog for my follower to catch up development skill quickly, and to summarize my acquired knowledge for myself. So if you have any question and feedback, please response to this blog or raise issue to GitHub repository, that is helpful for me.

I am happy if you will implement your application with this workflow 😊.

Interplay between Vite and SAP Approuter

2024-03-20T19:31:02.413000+01:00

Hi there folks,

not too long ago we wanted to utilize the UI5 Web Components in React . In their documentation they recommend to use Vite—a relatively new frontend-tooling framework—to create an initial app as a starting point based on one of its templates.

At the same time, we commonly use the SAP Approuter during development to require authorization, authentication—also locally. So, we wanted to use both in combination. After some research and exploring the possible configuration options of Vite, we came up with a setup that has been working quite well for us so far. Therefore, I want to share it here.

First, I will link to the respective git repository which showcases this setup, in case you want to jump there immediately.

Now, Vite is a tooling which is used for frontend development. It focuses on speed and developer happiness and for that it leverages the fact that the latest stable versions of browsers support Native ES Modules out of the box. Think of them as normal JavaScript Modules for simplicity. This eliminates the need for a large part of bundling. Interestingly, during development, Vite does not seem to create a dist folder or any bundled files at all—unlike many other tooling.

As for the Approuter, it is what's called a reverse-proxy server. It acts as the central entry point to the app, meaning it is the first thing the client's browser makes contact with. Here it forwards any incoming requests coming from the browser, the client, to the respective service in the backend. Later on, it returns the responses
of those services back to the browser of the client.

More importantly for our scenario, it ensures you as a developer also need to authenticate and be authorized to access the app—even when developing locally. This is useful if you need to access some data in the backend which requires authorization anyway.

The other main benefit is that the structure of the app and the authentication flow locally is basically the same as for the deployed version of the app later on. Just imagine a scenario in which you want to have a standalone Approuter and later on deploy your app to Business Technology Platform (BTP) on the Cloud-Foundry environment. Lastly, you can still benefit from the speed and Hot Module Replacement (HMR) of Vite's development server (dev server).

To be fair, the Approuter of course does not handle authentication/authorization completely alone, but rather makes use of the XSUAA service (extended services for UAA, where the latter stands for User Account and Authentication) for that. I won't go into the details of the XSUAA, but you should by now have a basic idea as to why we wanted to use the Approuter during local development as well.

Let's get now to the details of the setup. The following is going to be the folder structure. The ui/ folder containing the UI was generated with the help of the frontend-tooling Vite and its react-ts template for React and Typescript. The router/ folder is intended for everything related to the Approuter.

Folder structure

Approuter Configuration

The configuration for the Approuter used locally is stored separately in the router/dev folder. Firstly, define a dummy destination for local use in router/dev/default-env.json that points to the locally running Vite dev server. In the same way, you can define one for any backend web server, e.g., a server for the Cloud Application Programming Model (CAP), that requires authentication to access it.

{
    "destinations": [
        {
            "name": "api",
            "url": "http://localhost:4004",
            "forwardAuthToken": true
        },
        {
            "name": "vite-dev-server",
            "url": "http://localhost:5173"
        }
    ]
}

Next, tell the Approuter to forward any incoming requests to one of the two destinations. This is done in the router/dev/xs-app.json.

{
    "welcomeFile": "/index.html",
    "routes": [
        {
            "source": "^/api(.*)$",
            "target": "$1",
            "destination": "api",
            "csrfProtection": false
        },
        {
            "source": "^/(.*)$",
            "target": "/$1",
            "destination": "vite-dev-server",
            "authenticationType": "none"
        }
    ]
}

This configuration is only used locally. When it comes time to deploy the app later on to BTP on Cloud Foundry you can ignore it. To do that, add the line ignore: [./dev] to the build-parameters section of your module definition inside the respective mta.yaml descriptor file (say you deploy your app to BTP later on).

Vite Configuration

As for Vite you only need to change the port of Vite's web socket used for Hot Module Replacement (HMR) (i.e., to 5174 in our case). This way the web socket runs on its own separate port. You do this inside the ui/vite.config.ts.

For production, you can create a build as usual with the build command. Here you configure Vite to store the build output in router/dist/. This way, the Approuter can point to the created build in a productive scenario (see router/xs-app.json for that).

export default defineConfig({
  plugins: [react()],
  server: {
    hmr: {
      port: 5174,
    },
  },
  build: {
    outDir: "../router/dist",
    emptyOutDir: true,
  },
});

Requirements

For this setup Node version 18 was used, but any newer Node LTS version should work as well.

Installation and Startup

If you do not already have TypeScript support installed, install ts-node and typescript globally with:

npm install --global typescript ts-node

Next, install all packages which are required locally by running the following—while being in the root project folder:

npm run setup

Then you can start both the Vite dev server and the Approuter by running in the same folder:

npm run start

You should now be able to open up the application at http://localhost:5000 and see the UI there.

Initial page of the app

And that's it. To conclude, you now should have a working setup for local development to develop your UI with the UI5 Webcomponents in React. At the same time, you already account for authentication/authorization to limit access from your UI to any data in the backend. Lastly, one can easily extend the setup with a separate service, e.g., one that uses CAP and provides endpoints to access the data.

Cheers,
Julian

Unlocking Efficiency and Simplicity: A Look into the New Features of SAP Fiori Elements for OData V4

2024-03-21T10:22:53.408000+01:00

In the ever-evolving landscape of enterprise software, staying ahead of the curve is not just an advantage, it's a necessity. As we look at SAP Fiori elements, exciting developments help you to strive, particularly with the features from SAPUI5 Version 1.121 and SAP Fiori elements for OData V4. This latest iteration promises to enhance the capabilities of Fiori elements even further, offering a host of new functionalities and improvements.

Here's a look into some of the latest features for SAP Fiori elements for OData V4:

Recently Entered Values: Have you ever wished for a quicker way to access recently entered values in a field? Well, your wish is granted! We've introduced a handy feature that allows you to view the history of the most recently entered values right within the filter bar.

By simply moving your cursor back to the field, you can enable this time-saving function. While it's automatically activated for controls where it is relevant, like multi-input fields, it might not be enabled for others such as drop-down lists.

With this enhancement, navigating through your data becomes even more efficient, putting valuable information at the top. For more information, see History of Recently Entered Values.

Open Object Page in Edit Mode: One of the standout features in this update is the introduction of the 'openInEditMode' manifest setting. This addition empowers developers by allowing them to open an object page directly in edit mode. Gone are the days of navigating through multiple screens to make a simple edit; now, users can seamlessly transition to edit mode with just a click. For more information, see Navigating to an Object Page in Edit Mode.

Merged Section and Subsection Title: The section or subsection title is now merged with the table or chart title if the section or subsection only has one table or chart control. That way, redundant information is omitted. For more information, see Defining and Adapting Sections.

For all changes, see the What’s New in SAPUI5 1.121 section ‘SAP Fiori elements for OData V4’

SAP Fiori development newsletter March 2024 (issue #27)

2024-03-21T21:44:49.447000+01:00

The 2024 leap year gives us an extra day to get things done. I hope you will use some of that time to learn what our development teams have been rolling out to make it easier to create SAP Fiori apps, using the same tools and technologies that SAP uses to build apps for SAP S/4HANA. Make sure to check out the two new SAPUI5 adaptation tutorials, listed in the Developer Training section below.

If you want to meet with fellow developers and the SAP engineers who build our professional development tools, I encourage you to join our monthly SAP Fiori elements and SAP Fiori tools roundtable group.

Our next meeting is April 10, 2024.

Learn about the group at https://blogs.sap.com/2021/07/31/peer-to-peer-learning-at-the-sap-fiori-elements-and-sap-fiori-tools-roundtable/
You can also email me if you would like an invitation.

Was this forwarded to you? Subscribe to the SAP Fiori development newsletter.

Your editorial team,
Peter, Oliver, and Raz

Development News

Extending SAP Fiori elements the right way using standard processes

There are many ways to extend SAP apps, including using the flexible programming model in SAP Fiori elements for OData v4. This post shows several examples of bad coding practices, explains why they are wrong, and gives you the right way to implement these features instead.
https://community.sap.com/t5/technology-blogs-by-sap/extending-sap-fiori-elements-the-right-way-using-standard-processes/ba-p/13588502

Building resilient applications using SAP Cloud Application Programming Model (CAP)

In this post, you will learn what a resilient app is, why this is important to your end users, and how to build one using SAP’s Cloud Application Programming Model.
https://community.sap.com/t5/technology-blogs-by-sap/building-resilient-applications-using-sap-cloud-application-programming/ba-p/13628647

Creating tree tables with OData V4 on SAP BTP ABAP environment

If you want to implement hierarchies in the SAP BTP ABAP environment, here is an end-to-end guide on how to create tree tables.
https://community.sap.com/t5/enterprise-resource-planning-blogs-by-members/creating-tree-tables-with-odata-v4-on-sap-btp-abap-environment/ba-p/13605160

Introducing UI5 linter

A linter is a static code analysis tool used to find programming bugs, stylistic errors, and suspicious constructs. The UI5 linter identifies problematic code that does not follow UI5 best practices.
https://community.sap.com/t5/technology-blogs-by-sap/introducing-ui5-linter/ba-p/13633898

UI5 walkthrough tutorial with TypeScript

In this new tutorial, the UI5 team introduces all development paradigms of UI5 and demonstrates the benefits of TypeScript with UI5.
https://ui5.sap.com/#/topic/dad1905a07f849ce9c509721317d38d8

Extend an upload set to SAP Fiori elements and utilize document management service

If you are new to BTP, this post explores several utilities to help you come up to speed with programming and integration tasks.
https://community.sap.com/t5/technology-blogs-by-members/extend-upload-set-to-fiori-elements-and-utilize-document-management-service/ba-p/13613911

Exposing an OData Service from SAP S/4HANA Cloud Public Edition to SAP BTP

This blog post explains how to expose a CDS view as an API using developer extensibility in SAP S/4HANA Cloud Public Edition to be consumed in the SAP Business Technology Platform.
https://community.sap.com/t5/technology-blogs-by-sap/exposing-an-odata-service-from-sap-s-4hana-cloud-public-edition-to-the-sap/ba-p/13628248

Product updates for SAP Business Application Studio - February 2024 edition

SAP Business Application Studio continues to evolve. This post shows some of the recent upgrades. In the next issue, there will be much more to share, as some big new functionality will be coming through Joule in SAP Build Code.
https://community.sap.com/t5/technology-blogs-by-sap/product-updates-for-sap-business-application-studio-february-2024-edition/ba-p/13623478

Our latest roadmaps are available

SAPUI5 roadmap
SAP Fiori elements roadmap
SAP Business Application Studio roadmap
SAP Fiori tools roadmap

New Tutorials

Learn how Key User Adaptation for SAPUI5 works with a hands-on approach using demo apps

Learn how Key User Adaptation for SAPUI5 works with a hands-on approach using demo apps.
https://community.sap.com/t5/technology-blogs-by-sap/new-tutorial-mission-key-user-adaptation-for-sapui5-applications/ba-p/13639694

Tutorial: SAPUI5 Adaptation Projects for SAP S/4HANA Cloud

SAPUI5 Adaptation Projects in SAP Business Application Studio are not new. But what is new is the support for SAP S/HANA Cloud. This enables developers to enhance SAPUI5 applications in SAP S/4HANA Cloud with comprehensive features that were previously exclusive to on-premise customers. See this blog post linking to an extensive, end-to-end tutorial:
https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/extending-sap-s-4hana-cloud-public-edition-using-sapui5-adaptation-projects/ba-p/13607813

Developer Events

SAP Fiori Innovation Day in Dublin summary

Our first-ever SAP Fiori Innovation Day was a great success. Read Ian's summary to see what you missed. If the topic excites you, we will be having one in Chicago in June and Paris in October. Stay tuned for more info.
https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-innovation-day-in-dublin-demos-implementation-tips-and-lots-of-ai/ba-p/13618951

SAP Fiori elements and Lufthansa @ DSAG Technology Day 2024 summary

At the DSAG Technologietage 2024 event (German SAP user group), Sebastian Werner gave a talk alongside Lufthansa on how they use SAP Fiori elements & tools.
https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-elements-and-lufthansa-dsag-technologietage-2024/ba-p/13629434

Mark your calendar for UI5con and reCAP

The community conferences around UI5 and CAP are coming back in 2024, see the announcements on UI5con and reCAP.

https://openui5.org/ui5con/germany2024/
https://recap-conf.dev/
https://abapconf.org/

These three events together form CodeConnect 2024, which starts the week of June 3.
https://code-connect.dev/

More Resources

Visit our community pages
SAPUI5
SAP Fiori elements
SAP Business Application Studio
SAP Fiori tools

Ask a question in the community
SAPUI5
ask.sapfiorielements.com
SAP Business Application Studio
ask.sapfioritools.com

Back issues from the past year

SAP Fiori development newsletter #26 (January 2023)

SAP Fiori development newsletter #25 (November 2023)

SAP Fiori development newsletter #24 (September 2023)

SAP Fiori development newsletter #23 (July 2023)

SAP Fiori development newsletter #22 (May 2023)

Start extending SAP S/4HANA Cloud Public Edition with SAPUI5 adaptation projects

2024-03-22T18:40:55.511000+01:00

See the simple and effective changes you'll learn how to make to your application variant:

https://sapvideo.cfapps.eu10-004.hana.ondemand.com/?entry_id=1_5r7r5h0n

Start extending with SAPUI5 adaptation projects:

For more information, see Extending an SAP Fiori Application for SAP S/4HANA Cloud Public Edition

See my earlier post for more details: https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/learn-how-to-work-with-sapui5-adaptation-projects-to-extend-sap-s-4hana/ba-p/13607922

Product Updates for SAP Business Application Studio - March 2024 Edition

2024-03-26T08:39:28.924000+01:00

Dear community,

Welcome to our detailed exploration of some recent enhancements within the SAP Business Application Studio. This post will guide you through key updates, including our streamlined Storyboard, a newly designed 'Welcome' page, the introduction of SAPUI5 adaptation projects, a comprehensive SAPUI5 Walkthrough Tutorial with TypeScript, and the new feature – release of the powerful UI5 linter. Each feature mentioned contributes to overall user productivity, designed to improve your working experience with us.

Enhancing Productivity with our Updated Storyboard

SAP Business Application Studio now provides a streamlined storyboard. The improved interface allows you to readily view which service actions and functions your application includes. This overview aids in the comprehension and management of your tools, ensuring you are using your resources to their full potential.

We've also added the option to trigger the creation of unbound actions and functions directly. This eliminates the need for extra steps and consolidates key tasks in one location, reducing the time required for task navigation and management.

The described enhancements improve the experience in two major ways: by having a more complete, clearer visualization of your app's functions and by simplifying the creation and editing process.

Have a look at some sample of our updated storyboard below:

Updated Storyboard of SAP Business Application Studio

New Welcome Page for SAP HANA Applications

Our new 'Welcome' page, designed with your needs in mind, serves as an efficient gateway to interact with SAP HANA-related features within SAP Business Application Studio. This hub offers enriched documentation, insightful blogs, and direct access to various integral aspects that can facilitate and speed up your SAP HANA development journey.

SAP HANA Welcome Page in SAP Business Application Studio

As soon as you start your SAP Business Application Studio instance for SAP HANA Native Applications, you will find this new page. Some of the hyperlinks point to guides within SAP Business Application Studio, others to outside of it, including blogs on community.sap.com and material on help.sap.com.

The information is segmented into five structured sections. The 'Start' segment provides straightforward access to SAP HANA project creation, while the 'Development' section enlists tools to accelerate initiating a project or service.

The 'Blog posts' segment serves as a crucial knowledge base, offering valuable insights into SAP HANA development, including vital components like calculation view modeling and best practices. For those aspiring to refine their skills, the 'Get Started with SAP HANA' section presents comprehensive learning materials related to SAP HANA development, facilitating continuous skill improvement.

Lastly, the 'Help' section plays the role of an informative guide, providing exhaustive documentation pertaining to SAP HANA development topics. In essence, our 'Welcome' page aims to be a comprehensive, easy-to-navigate resource, dedicated to refining your SAP HANA developmental experience, right from the outset.

SAPUI5 Adaptation Projects for SAP S/4HANA Cloud Public Edition

SAP Business Application Studio now enables a significant feature for enhancing SAP S/4HANA Cloud Public Edition - the ability to employ SAPUI5 adaptation projects. These projects enable the creation of application variants tailored to fulfill the specific business requirements of diverse business roles, organizational units, and countries. They offer the ability to design efficient processes by concealing unnecessary fields, representing data in chart formats, or alternation between responsive and grid tables for enhanced data comprehension.

Creation of an SAPUI5 Adaptation Project

The primary advantage of an adaptation project lies in allowing you to leverage the original SAP Fiori application, its OData service, and application logic, to exclusively govern modifications specific to the application variant. Upon deployment, the source application and the derived application variant co-exist under distinct titles, accessible to corresponding business users via uniquely named application tiles in ‘My Home’, the new SAP S/4HANA Cloud Public Edition’s starting point.

See this blog post from Elisabeth Riemann linking to an extensive, end-2-end tutorial.

Did you know that adaptation projects are a part of ‘SAPUI5 flexibility’? Everything you want to know about this toolset is described in our Help Portal.

SAPUI5 Walkthrough Tutorial with TypeScript

Our UI5 team has created this tutorial to introduce all development paradigms of SAPUI5 and also demonstrate the benefits of TypeScript with SAPUI5.

This tutorial provides extensive guidance on key SAPUI5 development principles and data binding concepts through creating an application from scratch. After this, the tutorial guides you through enhancing the app with advanced features like navigation, control extension, responsiveness, and exploring built-in support tools.

Introducing UI5 linter

We have introduced UI5 linter, a static code analysis tool that enhances code quality, readability, security, and efficiency. Its initial features focus on validating compliance with the Best Practices for UI5 Developers, reporting areas of concern like deprecated APIs, synchronous loading mechanisms, and global variables usage. The UI5 linter can be easily installed and used via .npm package manager and is instrumental in preparing your project for future versions of UI5.

Use the UI5 linter to identify problematic code that does not follow UI5 best practices.

Learn more about UI5 linter in a blog post from Oliver Graeff.

That brings us to the end of this update. We hope you found this insight into our recent enhancements beneficial. As we continue to enhance SAP Business Application Studio, we encourage you to explore and leverage these new features to increase your productivity. Thank you for your ongoing commitment to our products, and we ensure that we remain dedicated to improving your user experience. Stay connected for our next round of updates!

Happy coding!

Announcing General Availability of SAP Build Code: Speed up development with generative AI

2024-03-27T03:00:00.041000+01:00

SAP is dedicated to increasing developer productivity enabling rapid extension of SAP S/4HANA and other enterprise applications. To support this mission, we announced SAP Build Code at TechEd 2023 and today, I’m excited to announce that it is generally available to all developers. Get started with the Test Drive tutorial!

What is SAP Build Code?

SAP Build Code provides AI-based code generation with Joule copilot, optimized for Java and JavaScript application development. It is a comprehensive, turn-key solution for coding, testing, integrations, and application lifecycle management. You can leverage Joule to efficiently generate application logic, data models, and test scripts. As an end-to-end integrated solution, SAP Build Code enhances the entire development process, from design time to runtime, significantly boosting your productivity.

Picture 1: Joule-powered code generation and visual representation of the code in SAP Build Code

SAP Build Code is tailored for SAP development, allowing you to utilize your favorite SAP programming models and frameworks and enabling you to connect seamlessly to S/4HANA and other applications with prebuilt integrations. It provides you with a guided development experience following best practices from SAP. The Service Center in SAP Build Code provides direct access to discovery and consumption of SAP APIs Including OData and Business Events from SAP and third-party systems. As an integral part of SAP Business Technology Platform (BTP), SAP Build inherits all the robust security and integration capabilities of BTP. This not only enhances security but also simplifies the development of extensions and applications for SAP S/4HANA and other enterprise applications following SAPs clean core strategy.

Picture 2: Direct access to SAP applications and data in SAP Build Code through the Service Center

But there's more – SAP Build Code encourages fusion development, an approach that uses a mix of traditional coding and low-code development. This is thanks to its support for app composability and the reuse of project components across SAP Build low-code solutions and ABAP environments. SAP Build Code makes your development process faster, more collaborative, and more integrated with the SAP ecosystem, perfect for those looking to streamline their development projects.

What developers are saying about SAP Build Code

Since announcing the solution, we’ve had 450 developers use SAP Build Code in our preview program. Here are a couple of my favorite quotes from the developers who have used SAP Build Code to build full-stack SAP Fiori applications so far:

"SAP Build Code is yet another great offering within the SAP BTP ecosystem. I'm impressed by its maturity and developer-friendly features that quickly get you up and running. Gone are the days of wrestling with your application logic and data models. With a thoughtful prompt, Joule can get your application logic and data models created and fully functioning in just a few clicks."
– Mark Smith, Senior Full-Stack Developer, Mindset Consulting

“SAP Build Code will enable rapid development and has all the features we require to build a full stack solution powered with generative AI, including pre-configured runtime and design time capabilities, enabling shorter lead time to market.”
– Nilesh Mhatre, CIO Americas, IMEA and Global Technology Center, Henkel

Try it yourself – take SAP Build Code for a Test Drive!

You can experience SAP Build Code with the Test Drive tutorial. This unique opportunity allows you to explore the full capabilities of SAP Build Code, including Joule-powered AI-based code generation, in the SAP BTP Trial, guided by the expertise of SAP Developer Advocates and the vibrant SAP Community.

By participating, you will not only gain hands-on experience with SAP Build Code but also have the chance to earn an SAP Community badge, recognizing your efforts and learning. This is an excellent way to enhance your skills, connect with fellow developers, and get a head start with SAP Build Code.

Don’t miss out – our free AI offer for early adopters

We are offering a limited quantity of Joule generative AI within the trial version of SAP Build Code. This allows you to experience the power of AI-assisted code development for free. Furthermore, if you move to the SAP Build Code, standard plan, there is a significant increase in the amount of free AI quantity you will receive from now until September 1, 2024.

➡️ Just another reason to get started early, so take the Test Drive and have fun!

SAP Build Code is now on SAP BTP Trial

2024-03-27T03:10:00.027000+01:00

Try SAP Build Code and Elevate Your Development Experience

We are excited to announce that SAP Build Code is now generally available and with that also available on the SAP Business Technology Platform (BTP) Trial. This offers you the opportunity to try out our AI-powered development experience with Joule, designed to meet the needs of today's SAP developers while paving the way for the future of coding.

SAP Build Code introduces an end-to-end integrated solution from design time to runtime where SAP technologies and AI converge, offering a unique experience that enhances productivity and innovation.

SAP Build Code on SAP BTP Trial

Extended Test Duration: With a generous 90-day test duration, you have ample time to explore, experiment, and evaluate the full spectrum of features and capabilities offered by SAP Build Code.
Simplified Onboarding Experience: Getting started with SAP Build Code is easier than ever. We've streamlined the onboarding process with a new Trial Booster to ensure that you can dive into your projects without unnecessary delays.
No Financial Information required: In line with our commitment to accessibility and ease of use, the SAP BTP Trial for SAP Build Code does not require any payment method or financial information to get started.

Picture 1: Screenshot of SAP BTP Trial Cockpit and SAP Build Code Booster

The trial version of SAP Build Code is an invitation to try out this innovative development experience firsthand. No strings attached. Whether you're building applications, integrating services, or creating extensions, SAP Build Code, powered by Joule co-pilot, is designed to elevate the way you work.

While the trial offers a glimpse into the potential of SAP Build Code, it's important to note that there are limitations to the use of AI tokens. To enjoy the full experience of SAP Build Code, we encourage you to become SAP Build Code customers. For early adopters that move to the SAP Build Code standard plan, there is a significant increase in the amount of free AI quota you will receive from now until September 1, 2024. You can easily export your project from SAP BTP Trial and import it in the productive landscape when you make the switch.

For more information and to get started and activate SAP Build Code in SAP BTP Trial, check out our short tutorial on how to set up SAP Build Code on SAP BTP Trial.

Start your journey with SAP Build Code on SAP BTP Trial today and take it for a Test Drive! 🏎

__________________

Note: If you were already using SAP Business Application Studio, you can continue to access your previous projects by clicking on the SAP Business Application Studio link on the homepage or in Instances and Subscriptions. Previously created projects will not show up in the SAP Build Code Lobby.

Edit: SAP Build Code for the SAP BTP Free Plan will be added at a later point.

🤓Follow SAP Build Code in the SAP Community
📼 Watch the demo video

SAP Fiori tools 2403 introduces Gen AI capability and more

2024-03-27T18:43:58.112000+01:00

In the ever-evolving landscape of app development, agility and efficiency are critical. SAP Fiori tools continues to be at the forefront of empowering developers with tools that streamline the creation of SAP Fiori applications. The latest enhancements in SAP Fiori tools introduce many exciting features aimed at revolutionizing the development process and fostering greater collaboration across teams. I am most excited that we have added new generative AI capabilities to create SAP Fiori element apps directly from a business requirement . This release also includes:

Semantic buttons in the page editor
Improvements to the annotation LSP code completion
More open source
More AI on the horizon

Redefining development with Gen AI

A groundbreaking addition to SAP Fiori tools is the introduction of Gen AI, marking a significant leap forward in intelligent development of SAP Fiori apps. For the first time, developers can leverage AI to generate CAP projects and SAP Fiori element apps directly from business requirement documents. This innovative feature stems from our collaboration with an SAP partner who highlighted the challenges faced in translating client needs into functional applications swiftly. With Gen AI, the gap between designers, business analysts, and developers is bridged, leading to accelerated development cycles and enhanced collaboration.

Launch Joule for SAP Fiori tools with command "Fiori tools AI: Show Fiori tools Joule"

I am also excited to announce that in addition to using Gen AI to create SAP Fiori elements, you will also find Joule for freestyle SAPUI5 in this release to help you write freestyle SAPUI5 code. These capabilities are delivered as part of the Guided Development extension in SAP Fiori tools. The initial release is available in SAP Business Application Studio as part of SAP Build Code. You can expect the capability to be introduced to other dev spaces such as SAP Fiori dev space in and Visual Studio Code in coming months. In order to use the AI functionality, you will need an SAP Build Code license. Refer to our help portal documentation for more information on how to get started.

While this is surely exciting, note that Joule, like any other Gen AI tool, may not always return the result you are expecting. It may takes some tries and experimentation to fine tune your prompts.

Elevating user experience with simplification

In our commitment to simplifying development processes, SAP Fiori tools introduces several enhancements to make the development experience better. Developers can now define semantic buttons in the Page Editor, making the task easier. Furthermore, we added improvements to the annotation LSP code completion for both XML and CDS to present only relevant terms and reduce clutter. Additionally, direct links to documentation from the property panel within the Page Editor streamline access to relevant information, empowering developers with comprehensive insights.

Finding the term made easier in annotation code completion

Accelerate development with integrated development experience and better tooling

Continuing our tradition of innovation, SAP Fiori tools now supports SAPUI5 libraries without a manifest file, offering greater flexibility to developers. This enhancement underscores our dedication to providing a seamless development experience, regardless of project configurations.

Integrating the development experience, SAP Fiori tools is working closely with ABAP Development Tools (ADT) team to enable seamless navigation from the ABAP Development Tools (ADT) to SAP Fiori tools in both SAP Business Application Studio and Visual Studio Code. Our first step is enabling developers to go from ADT to SAP Fiori tools Application Generator when service development is ready to create the UI. Stay tuned for more on this in the coming months.

Open-source journey continues: embracing collaboration

Embracing the premise of collaboration, SAP Fiori tools further solidifies its commitment to open-source initiatives. All middleware modules are now open source, fostering a vibrant ecosystem of community contributions. Additionally, the internationalization (i18n) support module has been open-sourced, promoting transparency and inclusivity. As we progress, our objective for the coming months remains clear: to open source all dependent modules, with the goal of creating an open-source SAP Fiori generator that will be used to standardize UX experience and project structure for all SAP Fiori relevant projects.

Coming soon: a glimpse into future innovations

Looking ahead, SAP Fiori tools is planning to introduce even more AI capabilities designed to streamline development further. Expect AI-guided development to provide tailored assistance through a combination of documentation and guides. Additionally, a manifest editor is on the horizon, simplifying project configuration and minimizing errors.

In conclusion, the latest enhancements in SAP Fiori tools signify a significant advancement in empowering developers to realize their SAP Fiori app development goals. With Gen AI, Simplification, Continuous Enhancements, Integrated Development Experience, and our ongoing Open-Source Journey, SAP Fiori tools remains at the forefront of innovation, poised to redefine Fiori app development. Stay tuned as we continue to unlock new possibilities and pave the way for a future of unparalleled efficiency in app development.

Now AI Helps You Developing SAPUI5 Applications

2024-03-27T18:52:57.706000+01:00

As announced in this blog post by Oliver Graeff, the UI5 team is delighted to release its first foray into the world of Generative AI, a contribution to Joule in SAP Business Application Studio which helps with freestyle SAPUI5 development.

In this blog post, we explore how this SAP Build Code feature works and how you can benefit most from it. At the end, let’s not forget getting a glimpse of related AI features and prototypes.

Get Help from Joule

As a user of SAP Build Code, you get Joule as assistant in SAP Business Application Studio, accessible via this “Joule jewel” as I like to call it:

One important thing to note is that in the initial release, Joule is only available in dev spaces of type “Full-Stack Application Using Productivity Tools”. If you e.g. create a dev space of type “SAP Fiori”, you will not see it. The availability in more dev space types

The panel content is context sensitive. This means that for a random file in a random project, it may just tell you that it is not available, but when you open e.g. a UI5 view or controller or most other file types inside a UI5 application project, then it will greet you with all its violet-purple AI glory and ask for your requests:

The Joule Panel

Simply enter your request in the chat window – adding, editing, replacing code… anything goes! – and Joule will respond with code and explanations.

Each code block in the response has a header with a “” and an “Accept” button. “Accept” transfers the code to the respective file, replacing its content. An answer can provide content for different files. If the file to which a code block belongs is currently not open or active, it will automatically be opened when you click “Accept”.

In case this “Accept” button is missing or you want to edit the suggested code first, you can use the ”Copy” button to get the code into the clipboard and paste it manually. This is also useful in the (rare) cases when only a code snippet is provided instead of the entire file, or parts of the previously existing code are omitted.

Think BIG for Biggest Benefit

Actually, those suggested samples in the Joule panel are just simple ones. We really recommend trying bigger steps! Don’t waste time (and AI tokens) by requesting a simple button. Try increments like:

Adding a new View with some content and setting up routing
Creating a new model with sample data and adding a table displaying certain properties as columns
Making all (hardcoded) texts within a view translatable and providing translations

Things like these seem like the sweet spot where Joule speeds up application development most. Taking bigger steps is also a good approach when the AI response times appear a little long. Performance varies, and Joule has no influence on this – most of the time is spent waiting for the response.

You know Generative AI has limits. Requests like the above typically work well, but of course the response can contain issues or be not exactly what you had in mind. Tweaking the result will usually still get you to your goal much faster than typing everything by hand. You can also use the pencil button to edit a request and try again.

Joule is a conversational chat assistant that keeps context. This means it “knows” what you have requested before and you can refer to this knowledge in further requests. Still, we recommend pressing the “Reset Conversation” button at the top once you request something different:

This frees the conversation from previous ballast, keeps the AI focused and not least makes responses faster.

Keep in Mind How to Get Joule

As mentioned, the Joule assistant for freestyle UI5 development is active when it seems like you are working on UI5 resources. The actual logic behind that is longer than would fit this blog post, but when Joule’s suddenly not there and you need it, simply open a UI5 view or controller, or work below a directory with ui5.yaml file in it and you should see it again. This behavior, by the way, could change soon, as Joule is still growing up into its role of an always-available assistant with multiple capabilities.

How Does it Work?

There’s a lot of stuff going on behind the scenes.

For example, there is AI-powered logic to select the files which are likely needed to be modified – or maybe just known – to fulfill your request. Of course, it would be too much to send all the code of your entire project along with every AI request.

Above you read that Joule keeps context and remembers the previous conversation. Yes, it has to, in order to reasonably converse with you. Otherwise, it would not be able to make sense of a request that is logically connected to what you did before. Still, it does not need to remember every single bit and byte for that! Hence, we condense the history to reduce the context size consumed by that.

Possibly there is some similarity to other AI tools you have seen recently, and this market is definitely a very agile and vivid one, but what differentiates this tool is its knowledge of UI5 and increasingly the knowledge how to support typical steps best which you are likely to do in any freestyle UI5 project.

Much of it is still evolving and being enhanced as you read this.

More Joule Goodness: Create an Application from Business Requirements

A related Joule feature provided by the Fiori tools team allows you to create an entire SAP Fiori elements list report application, including the respective CAP project, directly from your business requirements. Look here for more details.

This gets you started with a pretty complete app – and with our Joule feature for freestyle UI5 development, you can continue from there, e.g. when using custom pages. So both of these Joule features nicely complement each other.

Even More AI

It’s only the beginning. We have been experimenting for quite some time with how Generative AI could benefit not only UI5 application developers, but also end-users.

One such prototype, internally dubbed “ChatUI5”, aims to help end-users to interact with UI5 applications in natural language. It will be presented in the upcoming “UI5ers live” webcast on April 11th. Others look at how setting complex filters in applications could be simplified or how the UI5 documentation could be made more helpful.

To make it very clear: that’s all prototypes and we can’t tell whether any of them will ever see the light of being productized. But we’re looking further into the topic for sure.

Joule for freestyle SAPUI5 development in SAP Build Code

2024-03-27T18:53:12.396000+01:00

Joule is SAP's AI co-pilot that truly understands your business. Joule also helps you writing freestyle SAPUI5 code in SAP Build Code. Ask Joule by typing code-related requests, in natural language, into Joule's chat window. For example, you could ask Joule to insert a control to a view, add an event handler to a controller, introduce a full new view with routing and much more. You don't need to have the respective file open in the editor, you just need to make sure that your request is sufficiently clear. Requested changes may span across several files. For example, you could ask Joule to define a new model in the manifest.json and use the model in a control in the view.

Each file for which Joule suggests changes, will appear in a code block within Joule's chat window. On top of each code block you'll see options to

'Copy', to copy the code to your clipboard for further usage, and
'Accept', to open the respective file and add the code directly at the correct place.

Joule in SAP Business Application Studio

Joule, your SAPUI5 assistant can handle both, any freestyle SAPUI5 application as well as custom pages following the SAP Fiori flexible programming model.

Joule is not only useful for writing code, it also helps you to understand the existing code or to find issues with it. You may ask questions about entire files, or you can select a block of code and then ask a question specifically about the selected code snippet. Beyond this, the implementation is not restricted to specific scenarios. Go ahead, explore, and try to find the limits…

Just note that Joule, like any other GenAI tool, may not always deliver 100% correct results. It is always a good practice to closely review the generated code. Still, Joule, your SAPUI5 assistant, will make you a more efficient SAPUI5 developer.

How to use Joule for freestyle SAPUI5

Launch SAP Business Application Studio in SAP Build Code.
Open a project containing freestyle SAPUI5 code and open a *.view.xml or *.controller.js / *.controller.ts file.
Launch Joule from the activity bar on the left and start asking Joule.

A first guide is available via the 'Guide Center' in the activity bar on the left: Open the guide 'Generative AI-Powered Development' -> SAP Fiori UI -> SAP Fiori Elements Custom Page and Freestyle SAPUI5. Read more details:

Embrace the Future: Transform and Standardize Operations with Chatbot

2024-04-08T17:14:07.028000+02:00

In below blog series, It is all about Benefits and usecases of custom Chatbot that I have built.

Blog 1 : Why Chatbots in SAP ? ( This blog )
Blog 2 : How Chatbot can help Vendors?
Blog 3 : How Chatbot can help Customers?

Introduction

Maintaining a competitive edge in today’s fast-paced business landscape is paramount to achieving success. One technology that has experienced remarkable growth in recent times is chatbots. With their capacity to enhance efficiency and automate a range of tasks, chatbots have emerged as indispensable assets for businesses operating in diverse sectors. In this blog series, we will investigate the immense potential of chatbots and their ability to revolutionize operational processes within your organization. In this first blog of my chatbots series, we will delve into the transformative capabilities of chatbots and their pivotal role in standardizing operations.

The evolution of chatbots

The journey of chatbots began with the need that arose with growing global businesses and its need to connect partners. Since then, it has been truly noteworthy, revolutionizing the way businesses engage with customers, streamlining processes, and boosting operational efficiency. Starting from rudimentary rule-based bots, chatbots have evolved into intelligent conversational agents, delivering seamless and personalized user experiences.

Within the SAP ecosystem, chatbot has been widely embraced and integrated, empowering organizations to harness its potential for their operations. Various industries, including Pharmaceuticals, Automobiles, Energy, Logistics, Telecommunications, Banking, and Insurance, are increasingly adopting chatbots to handle the high volume of repetitive customer inquiries they receive. The advantages of utilizing chatbots for enhancing customer experience are immense. These include round-the-clock availability, rapid response times, tailored interactions, self-service capabilities, scalability, and continuous improvement.

Streamlining operations with chatbots

Chatbots play a crucial role in automating repetitive tasks within an organization, effectively identifying and streamlining processes that can be automated by the relevant teams. Furthermore, chatbots have the ability to gather valuable data through user conversations, providing insights on pending tasks and enabling informed decision-making.

Natural Language Processing (NLP) enables seamless user interactions by mapping numerous queries to user intentions.

It is a platform that simplifies scenario development and conversation flow customization. It requires minimal effort, as data flows through the same frontend and OData channel, while the execution of actions differs based on the scenario.

Standardizing processes through chatbots

Pre-defined flows in chatbots significantly reduce errors and enforce standard operating procedures (SOPs) consistently. In case a chatbot cannot answer a query, it can either log a ticket or redirect the user to experts.

This Chatbot offering provides a unique way of answering user queries, providing suggestions, and allowing users to take actions based on SAP roles/authorizations. Actions refer to executing bots within the Auto-Bot framework, where developers can develop bots with permitted activities for users.

For example, a vendor can track the status of quotations or invoice booking, while an employee can check their leave balance or download pay slips in PDF format.

Enhancing customer service and support

Chatbots are the preferred choice for Q&A queries, as they provide quick and diverse responses. This capability can be leveraged to offer personalized features to users.

Unlike humans, chatbots are available 24/7, provide fast responses, and eliminate the need to reserve repetitive tasks and train.

This chatbot is capable of handling both Q&A queries from a knowledge base and queries that require actions to be performed from the Bot ( OO Class method or FM )

Empowering customers and partners with self-service

Chatbots eliminate the need for customers and partners to access information from multiple portals and shared folders. They can simply ask the chatbot for information such as invoices and quotations.

For instance, in an organization, chatbots enable employees to file complaints or log tickets for travel reimbursement by having a conversation and providing precise and concise language for efficient communication.

Overcoming challenges and ensuring success

This platform leverages a unified UI, connectivity channel, and backend framework for Auto-Bots. This approach provides flexibility and context to identify scenarios and execute relevant Auto-Bots using NLP, fuzzy logic, and native coding. High scalability comes with the flexibility of provision to add as many scenarios as possible.

Unlike the standard offering from SAP known as Conversation AI, a unique approach combines a fixed UI and connectivity channel with flexible backend development, resulting in less developmental effort and a robust execution pattern.

We also aim to develop a resilient architecture that intelligently identifies common user problems and maps them to existing solutions.

Looking ahead: The future of chatbots

The future of chatbots includes innovations such as omnichannel conversations and AI/ML-driven human-like experiences, including behaviour analysis and generative suggestions.

Conclusion

Chatbot has the potential to transform and standardize operations in your organization. By streamlining processes, enhancing customer service, and empowering employees, chatbots can drive efficiency, productivity, and customer satisfaction. Embrace the future and unlock the full potential of chatbots in your organization’s operations.

Stay tuned for the next blog in this series, where we will dive deeper into the technical aspects of building and deploying chatbots in the SAP field.

Note : This blog was earlier posted on here

Empowering Vendors: The Transformative Impact of SAP Chatbot

2024-04-09T08:07:03.073000+02:00

In below blog series, It is all about Benefits and usecases of custom Chatbot that I have built.

Blog 1 : Why Chatbots in SAP?
Blog 2 : How Chatbot can help Vendors? ( This Blog )
Blog 3 : How Chatbot can help Customers?

Problem Statement

Why reserve an expensive workforce for repetitive and non-technical vendor queries? Why not automate using a custom-built chatbot? Vendors often ask the following questions as part of their frequently asked questions.

How do I register as a vendor?
What is all the info required to register as a vendor?
What are the criteria and duration needed to qualify?
Where can I see all the open purchase requisitions/Orders?
Where can I submit the product offer price (product catalogue and offer price)?
How do I submit a quotation?
How do I know vendor shortlisting and its criteria?
What is your notification procedure for releasing the orders, or how do you issue the order?
What is the status of my goods delivered?
What is the quality status of the goods delivered, along with rejection reasons, if any?
What is the invoice status and bank transaction status if paid?
How do I change my account number?
How do I change my PAN number?

Enhancing collaboration, process efficiency and productivity

Introduction

In today’s fast-paced business environment, seamless collaboration and efficient processes are essential for vendors to thrive. SAP custom Chatbot, an innovative solution powered by Natural Language Processing (NLP), offers a unique opportunity for vendors to enhance their interaction with SAP ERP systems and streamline their operations. This blog will explore real-world scenarios where vendors can benefit from a chatbot, revolutionizing their engagement with SAP and improving their overall experience.

The main concern of all organizations is security regarding digitalization and modernization. We ensure both authorization and authentication of vendors using OTP verification and SAP Standard Roles to enforce granular control over business-critical data.

Check out the below scenarios where vendors can be benefitted from a chatbot.

Scenario 1: Simplified purchase order and purchase requisition-related inquiry

Vendors often need real-time updates on the status of their purchase orders. With chatbot, vendors can converse with the bot to inquire about the quality of their demands. By providing the necessary information, such as the purchase order number or vendor code, the chatbot retrieves the latest updates from the SAP system and promptly responds with accurate information. This scenario eliminates the need for vendors to navigate complex systems/apps or wait for manual updates, resulting in improved transparency and proactive order management.

Scenario 2: Efficient invoice submission and tracking

Submitting and tracking invoices can be a time-consuming process for vendors. Chatbot streamlines this workflow by providing a user-friendly interface for invoice submission. Vendors can interact with the chatbot and upload their invoices, from which the chatbot extracts relevant details such as invoice number, amount, due date and others using IDP/OCR. The chatbot validates the information, performs necessary checks, and seamlessly integrates with the SAP system for invoice processing. Vendors can also inquire about the status of their invoices, enabling real-time tracking and proactive follow-ups.

Scenario 3: Vendor master data management

Maintaining accurate and up-to-date vendor master data is crucial for smooth business operations. Fiori-based Chatbot offers vendors a convenient way to manage their master data. Vendors can interact with the chatbot to update their contact information, banking details, or tax identification numbers. The chatbot validates the changes, ensures data integrity, and synchronizes the updated information with the SAP system. This scenario empowers vendors to take control of their master data, reducing administrative efforts and ensuring accurate information in the system. UI Adaptive cards in the chatbot allow vendors to register themselves.

Scenario 4: Timely payment status and remittance advice

Cash flow management is vital for vendors, and timely payment information is essential for financial planning. A Chatbot lets vendors inquire about payment statuses and receive remittance advice electronically. Vendors can interact with the chatbot, provide invoice details or payment references, and instantly access information on payment status, payment dates, and remittance details. This real-time visibility enhances financial transparency, enables proactive cash flow management, and improves vendor-customer relationships.

Conclusion

SAP Chatbot offers vendors a transformative platform to enhance collaboration, streamline processes, and improve efficiency in their interactions with SAP systems. By leveraging the capabilities of a chatbot, vendors can benefit from simplified purchase order status inquiries, efficient invoice submission and tracking, streamlined vendor master data management, and timely payment status updates. This technology-driven Solution empowers vendors to optimize operations, reduce manual efforts, and strengthen their partnership with SAP.

50% – 70% of employee and vendor satisfaction could be observed, and employees are better utilized for strategic and more meaningful initiatives in procurement functions.

Note : This blog was earlier posted here

Embracing TypeScript in SAPUI5 Development

2024-04-22T11:05:53.164000+02:00

Throughout 11 years of SAP development, I've seen the evolution of SAP's vision for its ERP, particularly with the introduction of FIORI, marking a significant shift towards user-experience-centered innovation. Developers have also been considered with tools like UI5, BAS, and more recently SAP BUILD Code. Now, I will focus on the introduction of TypeScript (TS) into SAPUI5, sharing my experience and observations while developing Fiori applications in TS for a specific project.

Understanding TypeScript: A Brief Introduction

TypeScript (TS), developed by Microsoft, extends JavaScript (JS) by incorporating features like static typing, interfaces, and classes: commonly found in object-oriented programming. The compilation of TypeScript into JavaScript before execution enables the detection of programming errors during development, fostering code quality and robustness.

If you'd like to delve deeper:
TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)

SAP & TypeScript: A Not-So-New Collaboration

SAP's journey with TypeScript began in 2021 as part of a "beta experimental" phase, paving the way for developers to explore this new avenue in application development. In 2023, during UI5con, SAP officially announced TypeScript support for UI5 starting from version 1.116.0.

For further details:
TypeScript for UI5: “Yay, it’s official!” – and a ... - SAP Community

Feedback and Experience Sharing

Today, rather than a tutorial on TypeScript development (perhaps in another blog 🙂), I aim to share my personal experience and insights, motivating those who are curious yet hesitant to take the plunge.

Advantages of TypeScript Integration

Static Typing:

The first error you'll encounter when starting with TypeScript is compilation errors due to missing typings! However, this very aspect underscores one of TypeScript's greatest strengths…

example of static typing for a structure

By explicitly specifying data types, TypeScript detects typing errors during compilation, fostering code reliability and reducing the risk of runtime errors. At the beginning of your project, you might see a lot of errors flagged in red, but it will quickly become a natural part of the development process.

example of TS error for missing types

It prevents errors that might otherwise require tedious debugging later on. And a big plus, it makes understanding the code easier, especially when dealing with a developer who isn't generous with comments 😅. This investment proves to be profitable in the long term for application maintenance, as it helps reduce errors introduced during future modifications.

To find the correct type when using a method, I refer to the API Reference - Demo Kit - SAPUI5 SDK website. Alternatively, we can use BAS; if we hover the mouse over the method, a pop-up appears and provides the types that can be used.

example of documentation included in BAS

Interfaces and Inheritance:

Drawing from object-oriented principles, TypeScript empowers developers with the creation of classes, interfaces, and inheritances. Interfaces offer great convenience as they allow us to precisely define the structure of objects, specifying the necessary properties along with their associated data types. They are truly a "must-have" as they ensure code consistency, making it easier to maintain and evolve. Moreover, the ability to reuse these interfaces throughout the application contributes to a modular and efficient design.

example of interface definition

ES6 Features:

Another aspect I particularly appreciated was the ES6 features. Although not specific to TypeScript, it was my experience with this language that led me to these features. They allow for writing more elegant and clear code, while ensuring application logic with fewer lines, greatly simplifying maintenance.

Challenges Faced and Overcome

Library Integration:

Despite its advantages, integrating TypeScript with SAP libraries sometimes presented challenges. For example, I needed to use the "sap/ushell/Container" libraries into a project extension: my project refused to compile because TypeScript didn't know "sap/ushell/Container".

Issue raised on GitHub :
`sap.ushell.Container` removed in 1.100? · Issue #347 · SAP/ui5-typescript · GitHub

So developers may encounter issues such as missing typings or compatibility issues, requiring workarounds until resolved by SAP through updates.

Learning Curve:

Transitioning from JavaScript to TypeScript may involve a learning curve for developers unfamiliar with static typing and TypeScript-specific syntax. While the initial investment in learning TypeScript pays off in the long run, it may temporarily impact development velocity.

Conclusion

While at first I complained about having to give up my good old JavaScript for TypeScript (like a good Frenchman 😅), I finally got the taste for TypeScript and wouldn't go back for anything in the world. From enhanced development comfort to improved code maintenance and readability, TypeScript has become an indispensable tool in my SAPUI5 arsenal.
With trust in SAP's commitment to resolving library-related issues, my journey with TypeScript continues to evolve, promising a future of enriched development experiences!

credit: Chicken Thoughts (@ChickyThoughts) / X (twitter.com)

Improving Time Management in SAP S/4HANA Cloud: A GenAI Solution

2024-04-22T11:08:14.435000+02:00

Preface/Introduction - Solving Timesheet Management Problem for Beyond Technologies and AlixPartners

Collaborating closely with two distinguished firms, Beyond Technologies and AlixPartners, to streamline their time management practices has presented a considerable endeavor. Both firms are recognized for their contribution to the services industry, wherein they are often required to engage with SAP S/4HANA Cloud for project time management. Despite the advanced features this system offers, they found themselves struggling with the management of their timesheet tasks.

We developed a GenAI-powered SAP BTP application for real-time tracking of project tasks, seamlessly integrating with SAP S/4HANA Cloud, public edition, for automated timesheet entries and billing. This system allows users to immediately log tasks upon completion, which are then processed in natural language and drafted into their timesheet via SAP S/4HANA Cloud APIs and the GenAI Hub on SAP BTP. Our application operates independently alongside any SAP S/4HANA timesheet app, ensuring compatibility with custom apps as well as existing and future standard versions. Users can easily submit their time records for approval within their company's timesheet application.

Business Scenario/Challenge – Addressing Timesheet Record Management in SAP S/4HANA Cloud

The critical problem both companies faced was associated with their timesheet record task in the SAP S/4HANA Cloud system. Delayed and after-the-fact time entries resulting from manual user operation led to inaccurate entries. It was time-consuming and negatively impacted work efficiency, delaying billing and payment processes as well. It was crucial to resolve this challenge as it directly linked with their business' operational efficiency, and therefore, profitability.

Co-Innovation/Solution – Creating an GenAI powered application with SAP AI Core

Generative AI significantly enables our solution by empowering users to log their project time effortlessly in their own words, without strict syntax. It intelligently interprets natural language inputs, crafting accurate payloads for S/4HANA system API calls. This flexibility ensures users can continue their varied task tracking practices across multiple languages, maintaining efficiency without the need for predefined structures. Generative AI thus enables an easy way to track consultant’s own time and adding it to the S/4HANA system already. It preserves the intuitiveness and accessibility of our task tracking, transforming user experience and data entry reliability.

Understanding the customers' need for efficient time management and with the power of Generative AI, we set out to create an application powered by the robust capabilities of SAP Cloud Application Programming Model (CAP) and SAP UI5. This application integrates seamlessly with the SAP Generative AI Hub in SAP AI Core via Destination Service and embeds with CAP LLM plugin(A free and open-source tool created by our team. Click on below drop-down for more information). Meanwhile all conversation data is managed by SAP HANA Cloud.

Spoiler

Introducing the CAP LLM Plugin:

An indispensable solution empowering developers with the essential tools to effortlessly craft robust AI-driven CAP applications. Seamlessly integrating the LLM capabilities of SAP Generative AI Hub with the vector engine and anonymization features of SAP HANA Cloud, this plugin revolutionizes the development journey.

The CAP LLM Plugin is a powerful tool that empowers developers to craft customized Generative AI-based CAP applications seamlessly. It ensures that sensitive data remains confidential by utilizing SAP HANA Cloud Data Anonymization, thereby safeguarding privacy while leveraging the capabilities of LLM. With this plugin, developers can confidently create innovative applications without compromising data security or integrity.

https://github.com/SAP-samples/cap-llm-plugin-samples/blob/main/README.md

https://community.sap.com/t5/technology-blogs-by-sap/cap-llm-plugin-empowering-developers-for-rapid-gen-ai-cap-app-development/ba-p/13667606

Introducing the CAP LLM Plugin: An indispensable solution empowering developers with the essential tools to effortlessly craft robust AI-driven CAP applications. Seamlessly integrating the LLM capabilities of SAP Generative AI Hub with the vector engine and anonymization features of SAP HANA Cloud, this plugin revolutionizes the development journey. The CAP LLM Plugin is a powerful tool that empowers developers to craft customized Generative AI-based CAP applications seamlessly. It ensures that sensitive data remains confidential by utilizing SAP HANA Cloud Data Anonymization, thereby safeguarding privacy while leveraging the capabilities of LLM. With this plugin, developers can confidently create innovative applications without compromising data security or integrity.https://github.com/SAP-samples/cap-llm-plugin-samples/blob/main/README.md https://community.sap.com/t5/technology-blogs-by-sap/cap-llm-plugin-empowering-developers-for-rapid-gen-ai-cap-app-development/ba-p/13667606

As soon as a user logs in, the application collects all the projects to which the user is staffed. Then the user can simply report his or her time on those projects via natural language. The application will process the user’s input, returning a valid JSON payload. This payload is then used to post a time record in the SAP S/4HANA Cloud system effectively bypassing the manual input.

Main features of the application:

Embedded analytics that display the completeness of the recorded hours for the day and week
User can view the history of time recording conversations, including their status. If any time recordings are incomplete, you can complete them in the chat or in the S/4HANA timesheet.
You will see a main window where you can provide all the necessary information for time-recording by typing or using natural language. The required information includes the project, the work package (in case of multiple assignments within one project), the date of service, and the hours worked.

An example interaction between user and application.

User clicks on the project name button for one of the projects the user is staffed on.
User inputs their intention for booking time for the project with natural language.
Interact with application to ensure all necessary information is provided.
The application creates the time record on SAP S/4HANA Cloud via API.

Conclusion/Summary - Efficient Time Management Achieved Through Co-Innovation

By creating a natural language interface application to do time management in SAP S/4HANA Cloud system, we have enabled Beyond Technologies and AlixPartners to manage their timesheet tasks more efficiently. The application delivers accurate time records through a simplified and quick process, significantly reducing the time spent on manual data entry.

I welcome more inquiries on this solution and the benefits it can bring to your business operations. Feel free to reach out to paa@SAP.com for further information or any questions.

Show Loading indicator while the Ui5 App loads!

2024-04-26T13:51:45.152000+02:00

Hi everyone,

I'd like to discuss an approach I had been able to use to improve user experience during initial App Load in our complex standalone UI5 application.

The initial load time of our complex Ui5 Application was longer than ideal due to the need to fetch numerous components and libraries during startup. This resulted in a long wait for users before anything rendered on the screen.

Furthermore, the browser's loading indicator stops while these resources are fetched in the background. This proved to be misleading for users, as users reported that the blank screen that followed looked like a failed application launch. (screenshot below)

To address this, I've implemented an initial loading indicator within the app. This indicator appears as soon as the index.html file loads, providing immediate visual confirmation that the app is starting up in the background.

I'd like to share the code behind this simple approach, which I believe could be a helpful workaround for anyone facing a similar issue with long initial load times in their standalone UI5 application. The code utilizes CSS and requires only a few lines to implement. Here's a step-by-step guide:

Step 1
Add a class named "loading" to the body tag of the index.html file.

Step 2
Include the following CSS code within a <style> tag placed inside the <head> section of index.html file.

body.loading::before {
    content: "Loading...";
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    align-items: center;
    justify-content: center;
    background: white;
    color:darkslategray;
}

/* Following CSS is for dark theme.
 * Replace theme name (sap_horizon_dark, sap_horizon_hcb)
 * with your application's dark theme name repectivly
*/
.sapUiTheme-sap_horizon_dark body.loading::before,
.sapUiTheme-sap_horizon_hcb body.loading::before
{
    background: darkslategray;
    color: white;
}

Important Note:
While UI5 offers the option to include custom CSS files through manifest.json, a more effective approach for this specific scenario is to directly embed the CSS code within a <style> tag placed inside the <head> section of index.html file. This ensures that the CSS styles are applied as soon as the index.html file is loaded. If we were to use a separate CSS file managed by manifest.json, there's a possibility that the styles might not be loaded until UI5 components are fully ready, which would defeat the purpose of providing immediate visual feedback during the initial application load.

Step 3
Adding above CSS as well as "loading" class to the body will result in "Loading..." text to appear in the middle of the blank page. The final step is to make sure that this "Loading..." text is hidden as soon as loading of Ui5 app is finished.

To achieve this, add the following JavaScript code to the onBeforeRendering method of the root view controller.

document.body.classList.remove('loading');

The above code removes the "loading" class from the body element, which in turn hides the "Loading..." text appearing in the middle of the blank page. As an alternative, you can add above JavaScript code to the onBeforeRendering method of UIComponent as well.

And that's it! Following these 3 simple steps should result in a "Loading..." text to appear during initial loading stage of the app.

I hope this guide was informative! Feel free to leave any comments or suggestions for improvement.

Thank you 🙂

Sajid Khan

Integrating Smart contracts with SAPUI5

2024-04-26T14:09:00.227000+02:00

Introduction :

Integrating smart contracts with SAPUI5 represents an exciting intersection between blockchain technology and business development. SAPUI5 is a powerful framework for web development that uses SAP's Fiori architecture; Smart contracts, on the other hand, are self-signed contracts in which the agreement between the buyer and the seller is written directly into the rules.

In this article, we explore how we can combine these technologies to create new and secure applications.

To Integrate Ethereum smart contract with SAPUI5 first you need to deploy the smart contract on the blockchain network. After the deployment you will get the ABI (Application Binary Interface) and Address of the smart contract, next step is to consume it into our SAPUI5 application.

Now lets start the journey of Integrating the smart contract with SAPUI5 in which you will able to access the functions from the smart contract and will be able to send and receive the ETH.

In order to access the smart contract first you have to add the 'web3.js' Library in to index.html file to provide access to Ethereum functionality.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.2.7-rc.0/web3.min.js"></script>

Before Accessing smart contract make sure you have installed the Metamask wallet, after that add below function into your controller file to fetch the ethereum account details from the Metamask.

onAccessMetaMask: async function () {
                let account;    
                if (window.ethereum !== "undefined") {
                    try {
                        const accounts = await ethereum.request({ method: "eth_requestAccounts" });
                        account = accounts[0];
                    } catch (error) {
                        console.error("Error accessing MetaMask:", error);
                    }
                } else {
                    console.error("MetaMask is not available.");
                }
            },

Once you have successfully got the account details next step is to access the smart contract, for that you will need the ABI and Address of the deployed Smart contract. then add the below function into the controller.

accessToContract: async function () {
                try {
                    const ABI = ; // Your contract ABI
                    const Address = '0xC09C83cEE7ed3206557b5D5d2b4F8bD69E29Ed12'; // Your contract address
    
                    // Initialize Web3
                    const web3 = new Web3(window.ethereum);
    
                    // Initialize the contract
                    window.contract = new web3.eth.Contract(ABI, Address);
    
                    // Display a message
                    this.getView().byId("text2").setText("Connected to smart contract");
                } catch (error) {
                    console.error("Error initializing contract:", error);
                }
            },

After completing above steps you will be able to see the data into our SAPUI5 Application. Once it is done you can call any required function from smart contract.

Output :

Conclusion :

I hope this Blog contains the process and configuration needed for Integrating Smart contracts with SAP UI5 using Business Application Studio which will help to customize different application.

Thanks and Regards,

Bhushan Khade

Error handling with UI5 Upload Set before SAPUI5 1.98

2024-05-02T07:30:00.024000+02:00

Problem

Uploading files can fail and this needs to be handled. When using the UploadSet or UploadCollection, this can be done in the event UploadeComplete:

Unfortunately, this is only available from version 1.98 for the UploadSet and in the meanwhile UploadCollection is being deprecated from version 1.88. You could still consider using UploadCollection as long as you are below 1.88. When you upgrade to a newer version this requires you to change your app to use the UploadSet instead of the UploadCollection. Preferably, you use UploadSet anyway despite the version you’re on. Of course, you want to handle errors when uploading files, even in a version below 1.98. Exactly the problem described here: https://community.sap.com/t5/technology-q-a/error-handling-sap-ui5-control-uploadset/qaq-p/12498541

Although the answer on this question (in the url above) is the best way to move forward. Nevertheless, you could have good reasons upgrading to a higher UI5 version is not immediately possible. Therefore, I found a workaround to use the UploadSet and catch the errors even in versions below 1.98.

Solution

Start by adding the UploadSet to your view as you would do normally and configure it to your needs. Here you have an example on how I did it for the OData service ZWL_UPLOAD and entity AttachmentSet with property ID as key for uploading PDF files:

Source code in case you want to copy/paste it:

<upload:UploadSet id="UploadSet" instantUpload="true"
fileTypes="pdf"  mediaTypes="application/pdf"
items="{path: 'AttachmentSet', templateShareable: false}"
uploadCompleted="onUploadCompleted"
uploadUrl="/sap/opu/odata/sap/ZWL_UPLOAD/AttachmentSet">
    <upload:items>
        <upload:UploadSetItem
        fileName="{FileName}" mediaType="{MimeType}"
        url="/sap/opu/odata/sap/ZWL_UPLOAD/AttachmentSet(id='{ID}')/$value">
        </upload:UploadSetItem>
    </upload:items>
</upload:UploadSet>

Now, to know if the upload was successful or not, we use the onUploadCompleted event handler. Here we can get the result by getting the active uploader from the UploadSet control. In here, you’ll find all the requests sent for every item. Based on the item id of the file that has been completed, we find back the request. Inside the request we have the response headers including error messages:

Source code in case you want to copy/paste it:

public onUploadCompleted(event: Event): void {
              const uploader = (this.byId("UploadSet") as UploadSet);
              // @TS-ignore
              const activeUploader = uploader._getActiveUploader();
              const sapMessage = activeUploader._mRequestHandlers[event.getParameter("item").getId()].xhr.getResponseHeader("Sap-Message");
              if (sapMessage) {
                             const xmlModel = new XMLModel(undefined);
                             xmlModel.setXML(sapMessage);
                             xmlModel.getProperty("/message") && MessageBox.error(xmlModel.getProperty("/message"));
              }
}

I know, I’m using private functions which is not recommended… But what’s the alternative? Using something deprecated? Anyway, as soon as you are on the right version, change this using the response parameter in the event.

Hope it helps!

Kr, Wouter

AppRouter path mapping – Custom Domain

2024-05-06T06:00:00.016000+02:00

Problem

As a follow up on my experience with custom domains, I started applying more custom domains to my applications running on BTP. Feel free to read more about the setup of a custom domain here: https://community.sap.com/t5/technology-blogs-by-members/custom-domains-for-btp-cloudfoundry-applications/ba-p/13647389

One of these applications is a CAP application with a UI5 app on top of it and an approuter to access it, the app is published on my GitHub account here: https://github.com/lemaiwo/ReCAPBTPServiceOverview/tree/main

After applying my custom domain to this particular application the approuter added a path behind the url. When I navigated to: https://btp-services.lemaire.tech/ (where “lemaire.tech” is the custom domain with “btp-services” as hostname),

It forwarded me to: https://btp-services.lemaire.tech/recapcapadvancedprogrammingmodelbtpservices/index.html

Most of the configuration behind this, was provided by the generators in BAS. In the xs-app.json of the UI5 app the following config was provided:

https://github.com/lemaiwo/ReCAPBTPServiceOverview/blob/main/app/recap.capadvancedprogrammingmodel.btpservices/xs-app.json

In the approuter there were no mappings but it did had a welcomeFile:

https://github.com/lemaiwo/ReCAPBTPServiceOverview/blob/main/approuter/xs-app.json

Because of this config, the approuter automatically adds the path of the welcomeFile to the url:

This path is based on the name of the application and it is needed for the approuter to forward the user to the right application. In this specific example, I only have one html5 app so that’s why it’s put in the welcomeFile. How this path is generated and accessible by the approuter is very well explaned in this blog post:

https://community.sap.com/t5/technology-blogs-by-sap/sap-application-router/ba-p/13393550

Especially the part for html5 app integration is important:

Integration with HTML5 App Repo service:

The application router supports seamless integration with the HTML5 Application Repository service. When the application router interacts with HTML5 Application Repository to serve HTML5 Applications, all static content and routes (xs-app.json) are retrieved from HTML5 Application Repository. In case application router needs to route to non HTML5 Applications, it is possible to model that in the xs-app.json of the application router.

To integrate HTML5 Application Repository to an application router based it is required to create an instance of html5-apps-repo service of plan app-runtime and bind it to the application. xs-app.json routes that are used to retrieve static content from HTML5 Application Repository may be modeled in the following format:

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

A valid request to application router that uses HTML5 Application Repository must have the following format:

https://<tenantId>.<appRouterHost>.<domain>/<bsPrefix>.<appName-appVersion>/<resourcePath>;

bsPrefix (business service prefix) - Optional

It should be used in case the application is provided by a business service bound to this approuter

appName (application name) - Mandatory

Used to uniquely identify the application in HTML5 Application Repository persistence
Must not contain dots or special characters

appVersion (application version) - Optional

Used to uniquely identify a specific application version in HTML5 Application Repository persistence
If no version provided, default application version will be used

resourcePath (path to file)

The path to the file as it was stored in HTML5 Application Repository persistence

For more details please refer to the following Blog:

Programming applications in Sap Cloud Platform

More details in this one: https://community.sap.com/t5/technology-blogs-by-sap/fiori-application-programming-model-for-cloud-foundry-and-abap-cloud/ba-p/13388142

Solution

As a solution to have a clean url to the application, I applied the following changes to the xs-app.json of the approuter:

1) Changed the welcomeFile to “/index.html”
2) Add a route for the OData service. As I added a route for the app (see next point) which will forward all requests on the root path to the html5 app repo, I also need to add a route before the one of the app specially for the OData. Otherwise all OData requests will be forwarded to the html5 app repository and not the destination.
3) Add a route for the root path directly to the path of the html5 app repository

https://github.com/lemaiwo/ReCAPBTPServiceOverview/blob/main/approuter/xs-app.json

Make sure the html5 app repository runtime and destination service are bound to the approuter:

In case it is not done yet, add the route in the mta.yaml config:

Result

A clean url with a forward that changes the path: https://btp-services.lemaire.tech/index.html

Full repo: https://github.com/lemaiwo/ReCAPBTPServiceOverview/tree/main

Sidenote: some of the screenshots may still contain a different domain. I recently changed the domain from Wouter.lemaire.tech to Lemaire.tech.

Kr, Wouter

Enhancing the SAPUI5/OpenUI5 Demo Kit Together: A Look into Our Feedback Loop

2024-05-08T08:12:05.723000+02:00

Greetings, developers!

At SAPUI5/OpenUI5, exchanging ideas within the developer community has always been a big thing. We're all about building a community-driven, developer-friendly ecosystem. We're committed to fostering a collaborative environment where your feedback shapes the evolution of our framework. Your insights, suggestions, and criticisms are immensely valuable, driving us toward continuous improvement. Let's take a closer look at how we capture and act upon your feedback across various channels.

Survey Insights: Your Voice Matters

Our permanent UI5 Demo Kit survey serves as a crucial avenue for gathering your thoughts. This is where you get to tell us how we're doing, what's working like a charm (yes, we want to hear that, too!), and where we might be missing the mark. The main target of this survey is the Demo Kit, including the documentation, APIs, controls, etc. We've got questions about user satisfaction, but more importantly, we've got an open field where you can spill your thoughts freely. Every quarter, we run a more extensive survey for a couple of weeks with more questions to get more insights. By way: This long survey is currently running for Q2 until May 21, so feel free to use this opportunity (see the helpful links section below).

These comments are anonymous, but they don’t just disappear into the digital abyss. On the contrary: Your submissions are meticulously catalogued within our internal GitHub repository where our development teams assess and prioritize them. Some issues are like low-hanging fruit – easy fixes we can implement immediately. Others need a bit more consideration before we can decide whether they find their way into our backlog.

Documentation Dialogue: Collaborating for Clarity

Ever spotted an error or envisioned an enhancement in our documentation on the UI5 Demo Kit? Our Edit on GitHub button in the lets you to initiate changes directly. What sets this process apart is that it’s not a one-way street but also an opportunity to discuss your ideas with you. We welcome your input and value the opportunity to discuss proposed changes to our developer documentation. We've already had some significant contributions from the community in this realm, and we extend our gratitude to those who've contributed to refining our documentation.

Engaging with Our Community

But our feedback loop doesn't stop there. We're not just sitting back waiting for feedback to land in our laps. We actively engage with you through various community touchpoints. Whether it's at events like UI5con, in our open UI5ers live webcast, at customer workshops, or on online platforms such as X, StackOverflow, and Slack: Actively seeking out your opinions and ideas makes us better. See our link list at the bottom of this post.

Many projects and ideas that started out as community ideas for SAPUI5/OpenUI5 projects. Just one example: The transform-modules-ui5 Babel plugin was developed by an individual developer in the community a couple of years ago. It has since become an integral part of our TypeScript toolchain. That’s the spirit! So it’s really important to us to engage with you wherever you come up with your ideas.

And as you know: OpenUI5 is open source, so you can actively improve the core framework itself!

A Big Thank You!

Before we wrap up, we just want to extend a massive thank you to each and every one of you. Whether you've dropped a line in our survey, submitted a PR on GitHub, or had a chat with us at an event, your contribution matters more than you know.

Your feedback isn't just welcomed; it's actively sought after. We encourage you to continue sharing your thoughts and ideas. Open the UI5 Demo Kit today and enter the feedback you always wanted to send us! Or use any other channels we mentioned here. Whether you want us to fix an annoying typo, tell us what we're doing right, or let us know about an idea that you have: Together, we'll continue making SAPUI5/OpenUI5 better.

Until next time, happy coding!

------------------------------

Some Helpful Links:

SAPUI5 Demo Kit / OpenUI5 Demo Kit:
- Feedback Survey at the top-right corner (if you have feedback on a certain page, go to that page first before you start the survey; then you can indicate that your feedback refers to the page you’re currently on)
- Edit on GitHub link on every page under Documentation
Contributing to OpenUI5: You want to contribute to OpenUI5? Please do this here!
StackOverflow: Ask questions and receive answers from the community
OpenUI5 on Slack: Another community-based communication channel
UI5con: Our main community event
UI5ers live: Our interactive webcast where anyone can showcase their UI5-related work
Follow us on: