SAP Community - SAPUI5

UI5 Spreadsheet Importer Release v1.0.0

2024-06-02T20:15:39.827000+02:00

I can finally announce the Version 1.0 release of the UI5 Spreadsheet Importer 🚀

I would like to start by thanking everyone who has helped me get to this level. Many things were not only new to me, but also to UI5 and how UI5 components are used. That's why @pmuessig is definitely the first person I have to thank here. But also everyone who has contributed with pull requests, creating issues, writing an e-mail or contacting me directly.

Only with their great help could we manage the complexity of supporting the different UI5 versions, platforms and OData services.

The high traffic on our documentation and numerous npm package downloads suggest that many find our tool reliable for their needs. If you're interested in showcasing your logo on our homepage, please contact me at marian@marianzeis.de. We’d love to feature our valued users!

Landing Page: https://spreadsheet-importer.com/
GitHub Repo: https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter

Key Features:

For those who do not yet know the component, here are the main features:

Use everywhere: BTP, S/4 On-Premise, S/4 Public Cloud, S/4 Private Cloud, ECC
With any OData Service: Use with V2 and V4, no change in backend necessary
With any UI5 version: Use any UI5 Version currently in Long-term Maintenance
Plug and Play: Simple Integration with zero config
Custom Configuration: Many settings and extension points

Live Demo

I'm offering a live demo so that you can try it out straight away. The demo is automatically up to date with the github repo.

Visit the Live Demo Page here: https://livedemo.spreadsheet-importer.com/launchpad.html#Shell-home

The last major changes

These are the latest changes in the last three months:

Drag&Drop support has been added: You can now simply drag a file onto the upload dialog
Overwrite i18n texts: All translated texts can now simply be overwritten with your own i18n model (see documentation).
Breaking Change: Two essential configuration parameters have been changed (see documentation)
Only centralized deployment recommended: it became more and more clear that packaged deployment creates errors, especially in the ABAP stack. Central deployment is now recommended. A new concept has been developed for better deployment (see documentation)

For all changes have a look at the changelog.

You can also follow the dedicated LinkedIn Page

The journey is not over yet: it is still being developed further and more features are on the way.

abap2UI5 - Host your Apps on SAP Fiori Launchpad

2024-06-04T14:34:47.695000+02:00

Running abap2UI5 in an on-premise system and want to host your apps on the SAP Fiori Launchpad? This post briefly shows how to set up your ABAP system and launchpad for this scenario.

Connector for SAP Fiori Launchpad

Besides abap2UI5, which should already be on your system, we will install the project abap2UI5 - Connector SAP Fiori Launchpad (On-Stack) with abapGit and configure launchpad tiles for abap2UI5 apps:

abap2UI5 Apps hosted on SAP Fiori Launchpad

The connector works as follows:

abap2UI5 running with the Connector for SAP Fiori Launchpad (On-Stack)

For more details, check out the following blog post.

SAP Fiori tools May 2024 release adds closer integration with ABAP Development Tools

2024-06-04T17:54:57.191000+02:00

SAP Fiori tools May 2024 release adds closer integration with ABAP Development Tools

With the 2405 client release of ABAP Development Tools (ADT), combined with the latest SAP Fiori tools release, users can now have a more integrated experience when working between ADT at the backend and SAP Fiori tools for front-end development. No longer does the developer need to manually switch between the tooling environments and remember which system and entity they wish to use. Instead, with one button click in ADT, users can seamlessly switch from ABAP to SAP Fiori development.

As mentioned in our SAP Fiori tools March update, SAP Fiori tools now enables users to launch the Application Generator directly from ADT and skip having to select a data source and entity in the generator if they already have the SAP system and entity chosen in ADT. With the 2405 client release of ADT, the development work has been completed and the feature is available to our cloud customers.

Setting up ADT integration with SAP Fiori tools

You can choose to either launch the Application Generator from SAP Fiori tools in SAP Business Application Studio (BAS) in your browser or directly launch Visual Studio Code locally if that is your preferred integrated development environment (IDE).

The first step is to configure the integration between ADT and SAP Fiori tools. This is a one-time setup within ADT for each system you want to integrate.

Choose the system you want to integrate, right-click on it and select ‘Properties’. From here, choose ‘ABAP Development -> IDE Configuration’.
Enable the `Configure the target IDE` checkbox and decide whether you wish to launch SAP Business Application Studio or Visual Studio Code.

Below I’ll detail how you can get started in either scenario.

Integrating with SAP Business Application Studio

When working with SAP Business Application Studio, you will need the following items:

URL: The URL of your Business Application Studio landscape.
Development Space ID: The ID development space in Business Application Studio that you have already created. The development space must include SAP Fiori tools as an installed SAP extension.

The following development spaces will have SAP Fiori tools pre-installed:

SAP Fiori
Full-Stack Application Using Productivity Tools
Full Stack Cloud Application

Destination Name: In order for the ABAP system to be available in SAP Business Application Studio, it must be configured as a destination in your SAP BTP cockpit. Once the destination has been created, enter the destination name in this box.

The system settings for SAP Fiori tools integration in ADT

Integrating with Visual Studio Code

If you wish to work with Visual Studio Code, you only need to check the relevant checkbox in system settings. However, you will then need to ensure the following are installed:

Visual Studio Code: You will need the Visual Studio Code editor installed locally. If not available, you will see an error message when attempting to launch SAP Fiori tools from ADT.
SAP Fiori tools: SAP Fiori tools should be installed from the Visual Studio Code marketplace. If the tools are not installed, then Visual Studio Code will ask you if you want to install them when you try and launch from ADT.
Saved SAP System: You must have an SAP Saved System stored in Visual Studio Code that refers to your ABAP system. This will ensure that the Application Generator can automatically launch and connect to the system within Visual Studio Code. For more details on SAP Saved Systems, please see here.

Creating your SAP Fiori project

Once configured, you will see a new button alongside the service details in ADT. “Create Fiori Project” will launch your IDE environment and automatically start the SAP Fiori generator with these system details.

“Create Fiori Project” button to launch the SAP Fiori Generator

Once the SAP Fiori generator launches, the data source selection step will be skipped (you’ve already selected your data source in ADT), and the main entity for your template will be pre-selected with the entity chosen in ADT.

More integrations with ADT coming soon

There are other enhancements planned between the development environments to make life easier for developers when working between ADT and SAP Fiori tools. Standby for more information in the coming months.

Let me finish by summarizing the power of both tools and why integrating between them is something we are focused on. ADT provides a dedicated ABAP development perspective within the Eclipse IDE which makes it easier for developers to navigate and work with ABAP code. Developers can efficiently build and maintain backend logic, business logic, and data models using ADT's comprehensive suite of tools. On the other hand, SAP Fiori tools offer a rich set of UI controls, templates, and design principles for creating modern and intuitive user interfaces.

This integration empowers developers to effortlessly navigate from ADT to SAP Fiori tools, streamlining their workflow, enhancing productivity, and ultimately enabling developers to deliver high-quality applications more rapidly and effectively.

SAPUI5 Tables: Maximizing efficiency through advanced Copy & Paste

2024-06-06T14:37:45.850000+02:00

SAP Fiori provides a modern, intelligent, and consistent user experience for SAP solutions. The technologies & tools of SAP Fiori, such as SAPUI5 and SAP Fiori elements, offer extensive capabilities for building, extending and running SAP's business applications. When using SAP Fiori, you'll tap into a whole world of generic features of SAP's technologies, that make your life easier. From Joule, SAP’s AI Copilot down to clever copy & paste capabilities, you'll be amazed at how you survived without them.

Advanced Copy & Paste and cell selection

SAPUI5 1.124 improves copy & paste operations in tables, letting business users work even more in a natural way with improved productivity. See these common scenarios:

1. Copy data from a table
Copy data from a table by selecting rows or a group of cells ('lasso select') and paste to a MS Excel sheet or other applications. Play with the sample application Table - CellSelector, CopyProvider.

Picture 1: Row selection

Picture 2: Cell selection

2. Paste data to a table
Paste tabular data from some source to a table in an SAPUI5 application. This typically initiates a handling of new entries, depending on the application. Use the sample application Cell Selection, Copy & Paste to test. In this context see Streamlining data entry: Exploring the new 'Paste' feature in Fiori Elements V4 tables.

3. Copy a set of values from a table to another field such as a filter field
Use sample app Smart (Responsive) Table with Criticality to try this.

Picture 3: Copy from a cell selection

Picture 4: Paste copied cells

4. Handling split cells with multiple values
In the pictures above you see a column with combined product name and its ID. To handle this, the MS Excel export offers a 'Split cells with multiple values' option. You can achieve a similar behavior for copying data by using 'Paste Special… -> As Unicode Text' when pasting into MS Excel. (See details in Copying and Pasting from External Applications to Tables and CopyProvider.extractDataHandler.)

Picture 5: Paste Special in MS Excel

For application developers

To enable the Copy and Cell Selection features for a table in your custom application, see the details in:

Please note: While these features are built into the Smart Table as well as the Responsive Table and Grid Table control, the availability in individual applications might depend on whether the application enabled the feature. This is the case for applications based on SAP Fiori elements and many other SAPUI5 apps.

In this context, please see details on the Spreadsheet Export. Also note that the Responsive Table received a comprehensive update of its keyboard handling.

Designing UI5 Apps for SAP Launchpad Service – Part 4

2024-06-07T16:42:42.017000+02:00

Content Navigation

Part 1: A simple UI5 app that runs in the SAP Launchpad Service

Part 2: Multiple Apps with a Shared Reuse Library

Part 3: Splitting bigger projects

Part 4: Splitting the Destination Service instance (Current page)

Splitting the Destination Service instance

Current State

In the last posts you have learned how to split multiple apps into multiple app-hosts and xsuaa instances which are deployed by multiple MTAs. This setup allows app developers to work independently and even define their own authorization models.

However, they still share the same instance of the destination service, and all destinations are created there.

This instance still acts as a common context for all apps. For example, the URLs to access these apps contain the instance GUID, which is the same for all (this has been explained in part 2 of this blog).

Reasons for the split

In most cases, this setup works just fine. But there's a potential for conflicts, and that's when you need to split into multiple destination service instances.
One such conflict can arise from multiple instances of the same business services:

Let us assume there is a service with an OData endpoint that allows us to store documents.
Every instance of this service has its own isolated area where the documents are stored and only provides access to them. These documents are protected by the credentials in the service key of the instance.

The clientId and clientsecret are specific for this instance and are used by the service to separate the stored data.

Here is an excerpt of how the service key could look like:

{
    "endpoints": {
        "api": "https://<URL>/api"
    },
    "grant_type": "user_token",
    "sap.cloud.service": "btp.samples.consumed.service",
    "uaa": {
        "clientid": "<...>",
        "clientsecret": "<...>",
        "url": "<...>",
        "serviceInstanceId": "<...>"
    }
}

This key will then be converted into a destination on the destination service instance to make it available to the managed app router.

To connect to the OData endpoint of the service, the app adds a routing configuration to its xs-app.json:

{
      "source": "^/api/documents/info$",
      "target": "info",
      "authenticationType": "xsuaa",
      "service": "btp.samples.consumed.service",
      "endpoint": "api"
},

As you can see, the routing refers to the service key by specifying the service name that appears in the service credentials as sap.cloud.service and then chooses a service endpoint.
The contained credentials are then used to get an access token and call the service.

Now let us further assume that app1 and app2 both have their own instance of the document service.
You must ensure that both apps access their dedicated content by using the credentials of their instance, i.e., they must access the services within their context.
Without splitting the destination service instance, both destinations for the document service would be created on the shared instance.

Unfortunately, this is now causing conflicts because both destinations have the same sap.cloud.service specified and the resolution of the service keys to use is ambiguous. I.e., the destination service instance defines only one context under which the service can be accessed.

This is the moment where you must split the destination service instance to get multiple contexts to access the service (one for app1 and one for app2).

How to split

After the split, you no longer have a shared destination service instance. Instead, each context gets its own. The destinations related to the apps are moved to these instances and the destinations for the shared library are now duplicated and appear on both instances. Additionally, there are destinations for the consumed service instances.

Let us see how the MTAs have changed [Shared, App1, App2].

Here the resource for the destination instance has been removed from the library MTA and switched to managed instances in the app MTAs. Additionally, the app MTAs now refer to the library app-host and xsuaa as existing service.
Each of them contains the destinations of their app-host and xsuaa instances as well as for the shared app-host and xsuaa.
Also, there are now the resources for the consumed service and the destination definition.

In our sample, the consumed service offers a very simple endpoint that just returns information about the access token used.
The apps have an additional datasource and model defined in their manifest.json to read this, and the clientId is now bound to the custom control in the master.view.xml to be shown on the UI.

Access at runtime

Because you’ve split the destination instance, the runtime access URLs change. Now, each app URL includes the GUID of its destination instance.
This way the resolution of sap.cloud.service names is uniquely resolved via the correct destination to use the correct credentials.

When running the apps they display the used clientid. You can verify that both apps show a different one, which reflects the instance GUID of the consumed service.

Well done, now we have achieved a complete separation of the two apps.

Adapt your app to SAPUI5 2.x - Make an impact by joining our CEI project

2024-06-10T08:00:49.636000+02:00

SAP Customer Engagement Initiatives (CEI) on https://influence.sap.com allow you, as an SAP customer or partner, to gain early insights into SAP's product developments and work directly with SAP teams to shape future product directions. This project presents a unique opportunity to work with SAPUI5 product owners and engineering teams, leveraging your expertise to directly address real-world challenges from your custom development projects.

Join the upcoming CEI project to make an impact on how applications are adapted to SAPUI5 2.x

SAPUI5 is SAP’s JavaScript framework and UI library for building cross-platform, enterprise-grade Web applications. SAPUI5 has been a solid foundation for enterprise apps for more than a decade and is still in its first major version. Despite its continuous evolution and the dedicated SAPUI5 modularization project from a few years ago, SAPUI5 has remained backward compatible. However, with new requirements, such as the demand for strict Content Security Policy, as well as the evolution of major browsers (e.g. the introduction of new technologies), SAPUI5 needs to adapt. SAPUI5 is preparing for the future by leaving behind outdated concepts like synchronous network requests.

You now have the chance to understand the impact of SAPUI5 2.x on SAP’s applications, on your own applications, and on the system landscape. In this CEI project you will receive guidance, best practices, and tool support to adapt your own custom apps to SAPUI5 2.x. (If you like you can already have a look at similar details for OpenUI5 in Introducing OpenUI5 2.x.)

Project Goals and Activities

Validate concepts for moving existing SAPUI5 1.x apps to SAPUI5 2.x such as the necessary code changes and tool support & documentation on the code adaptation
Identify existing pain points
Gather prioritized requirements for the SAPUI5 road map with regards to new major versions

Format of Activities, Estimated Effort

Participants need to be available in the August/September 2024 timeframe for virtual sessions. Estimated effort: approx. 10h for own development activities + 6h for virtual calls:

Initial call (1h) in mid-August 2024 to outline the project and explain the transition to SAPUI5 2.x
3 weekly calls (1h) for Q&A and feedback in August / early September
A final feedback call (1h) mid September to collect & prioritize feedback
Closing call (1h) in September

Prerequisites

This is your chance to give feedback on all aspects of moving to SAPUI5 2.x and influence the direction of the SAPUI5 road map. Join this project if

you are working in development projects and are familiar with SAPUI5 code
you have custom SAPUI5 1.x apps with freestyle SAPUI5 code, which you can adapt to SAPUI5 2.x. (This can be freestyle SAPUI5 apps or SAP Fiori elements apps with extensions / custom page.)
you are using your SAP Business Application Studio / VS Code environment with SAP Fiori tools.

Register for the CEI project 'SAPUI5 2.x' from June 10 - July 11, 2024.

Once the registration process is finalized, the project team invites participants for the initial call to go through the project scope and timelines.

My Code Connect 2024 Experience

2024-06-11T02:15:40.162000+02:00

Here I am, on a plane flying back from Code Connect at the SAP headquarters in Germany. I'm still processing everything, mentally replaying some of the sessions I had attended, eager to watch the ones I couldn't. Stuck on a plane isn't fun, so I decided to write about my experience at the event. I won't talk about the content presented because anybody can watch it online once available. I want to talk a little bit about how it felt being there.

If you don't know what Code Connect is, here's a brief intro. It's the merge of 3 different conferences (reCAP + UI5con + ABAPconf) with a whole day dedicated to a single technology. It was dabbed as the "new TechEd" by the attendees. I've heard it sooooo many times!

Short comments on the days and a brain dump on everything in between...

Day 0, CodeJam, started with a hands-on workshop on CAP conducted by the legend DJ Adams. Man, he's a walking geek encyclopedia and master of the random geek fun facts.

SAP CodeJam

Day 1, reCAP, was all about how CAP is so f* powerful and simple at the same time (sorry, I couldn't find any better word). In my humble opinion, it cemented the idea of CAP becoming the framework people will use to build most of the custom things SAP-related.

Welcome to reCAP 2024

Day 2, UI5con, showed that UI5 can do much more than Fiori Elements apps. It's modern, solid and can render fast!

Full house to watch Peter Muessig

Day 3, ABAPconf, I can summarize with: ABAP is not dead! It's not going anywhere. Actually, it's going to the cloud. So many new tools and techniques to make RAP better and easier to work with.

ABAP Clean Core

For 4 days I soaked up knowledge shared on the stages, and most importantly, the invaluable experiences and real-life challenges shared in conversations throughout the day.

I met old friends, I made new friends, I met people that I’ve known for ages, but have never seen in person. Some were not as tall as I was expecting (sorry man 😜). I saw great ideas, I saw captivating speakers, and I saw smart code, which makes me even more nervous when presenting because they're far ahead of my limited capabilities.

The common feeling is that we were part of a large community, full of people from all backgrounds and skill levels, but with one thing in common: the love for SAP technology. We all belonged there. It was the Woodstock of SAP! Without the LSD, but full of talented people, good music and LOTS of fun! A unique moment that may spark a renaissance of the SAP community itself because I do believe people will contact each other to collaborate on new projects.

Code Connect was a beast packed with actionable insights and lessons from the sessions. Each day was focused on one technology only. There was no "this feature will be available next Christmas". Everything shared in those 3 days was possible to play with straight away. For instance, after my session, people told me they would test that out once they got to their homes. On the following day, somebody said they had implemented some of the suggestions. Bloody hell!!!

The same happened to others. All sessions shared this one little thing: no vaporware, just real code. Even the sessions touching genAI, the biggest buzzword ever, showed real applications that anybody could test today.

You could see people chatting around, sharing what they are doing, the projects they are working on. Some of the things that I heard: what they like in CAP (easy to learn, higher productivity), how they are adopting ABAP Cloud (more on BTP than the embedded one), hackathons are still the best way to learn new tech in house. These conversations would get even better in the evening as we sat outdoors listening to good music, playing some games and having some drinks. Every night I'd leave the premises around 10pm and people were still there... If they kept the place open and the music playing in a 24h old LAN party style, people wouldn't leave.

Whoever had the idea to combine forces and bundle these 3 conferences in a blockbuster event deserves all the accolades from the SAP community at large. The people behind the event are definitely onto something special. Keep up the awesome work!!! And please, please, please... Keep SAP marketing and sales at bay. They already have their events, let us have ours. As the ABAPconf sign stated: “by developers for developers”.

I just want to say thank you to the organisation, and to everyone behind this magnificent event. Thank you to all the speakers who invested time in preparing the sessions, for sharing your knowledge and experience. Thank you to all the attendees because without you the event would be nothing. And thank you to the sponsors for funding such a large, complex and beautiful idea.

It might be unfair to the others, but I must mention some people, not from the organisation, but from the community...

Svea and her team for being there listening to the community. They could hide themselves in a room and avoid the negative feedback for the infamous new platform they knew they'd get, but they didn't. It requires courage and I respect it. We all hope to see the changes being implemented sooner rather than later.

The crew from Portugal which I believe was the biggest group representing a customer there! They even had their own CAPs 🧢

Portugal represented

The Ned Kelly Gang from Down Under! +20 hours on a plane to attend an event because they want to, not because they were told to speaks volumes. You (we?) guys rock!

The Ned Kelly Gang missing some members

PS: hear me out now... Add an extra day for SAP BTP in the Code Connect (BTPconf?) and we definitely have something better than TechEd 😜

3 developers

About to start my session and have some fun

LEGO Fender I won in a raffle, thanks dox42 \o/

Thoughts on SAP CodeConnect 2024

2024-06-14T09:25:27.970000+02:00

It was such a privilege to attend Code Connect (un)conference this year in Germany. And I was proud to represent rev-trac with the honour of providing some sponsorship of this developer led and focused initiative. Being a SAP partner that develops solutions both on, and for SAP technologies, it was a great fit for us. Our team on the ground included our lead Java (Srinath) and ABAP (Adam) engineers and also one of our key CAP engineers (Nick).

Nick, Srinath, Adam and myself excited for the first day

In this blog, I wanted to share the feeling of being there and some of my thoughts and reflections. I encourage you to check out the session themselves which are available to view from the respective sites (below).

Overview

The conference is a convergence of three individual events, re ≼CAP, UI5con & ABAPconf. And it was interesting how they were combined, but each one had its own individual flavour and style. I think in future some of the logistical aspects would do well to align (e.g. ticketing, conference app, etc), but that individuality did create a sense of authenticity for each one.

The location was at the SAP campus at St Leon-Rot, near SAP's headquarters. And although this was somewhat remote, there was sense of being invited to SAP's home and experiencing some real heart-felt hospitality.

The first day started with a CAP code jam hosted by, none other than the CAP advocate extraordinaire DJ Adams himself. Unfortunately I was not able to attend that session, but all reports were expectedly praiseworthy. This was a fitting way to kick things off, followed by a meal at a community based Italian restaurant, which I did manage to get to. This was a pleasant evening and set the tone of welcoming and relaxed interaction.

Being an on-site event, the most important factor are the people. The attendees represented a great variety of backgrounds and experiences, as well as a good representation from the SAP technical product teams. Above all was the general attitude of curiosity, adventure and sense of passion for the technologies of their respective crafts. Another trait that stood out was a sense of honesty and openness regarding the challenges and concerns that exist out there on each of these frontiers.

The first conference day started with re≼CAP, setting the pace with a barrage of new ideas and features. Some of the high level takeaways:

The plugin framework, leading to a more standardised way to provide or receive additional CAP functionality
Embedded analytics
Logging and telemetry and overall improvements in Ops support
Advancements in draft handing, as well as some challenges poignantly raised by Sergei Haller
Documentation - it was great to see the CAPire team there actively listening and taking feedback from users
Approaches to robust Node.js lifecycles presented by Mauricio Lauffer

we love CAP

UI5con was the next day following closely in reCAPs footsteps. Some big topics that I came across were:

Web Components, Web Components, Web Components. This was a big focus, and for good reason, its great tech and I am keen to see how it works its way into the entire UI5 solution going forward
New advancements with analytics and hierarchy views
Testing! Such an important (and often under-appreciated) topic. The overview provided by Simon Coen on this was exceptional, providing a solid framework for providing full coverage for you UI5 stack.

UI5con!

And last but definitely not least was ABAPconf, bringing the series to a close. Here we also saw large amount of excitement and new ideas. As is tradition, there is a German speaking component, which I appreciated in the introduction, but for the four sessions held in German only (with some English slides) I felt that this somewhat detracted from the inclusiveness compared to the other two days. Some highlights were:

More detail on implementing clean core on stack, essentially moving items from tier 3 'Classic', or 'Dirty' ABAP and separating out items that can't be implemented with the currently exposed ABAP API objects into a separate tagged package. This provides a staging ground for migration that gives a clear scope of the overlap or exposure to non released items, perhaps in a sense an anti-corruption layer.
ABAP package manager - an inspirational call to innovate towards open source with ABAP
More detailed approaches to testing was also a welcome aspect here
One thing I missed at this one was interaction with the experts via the meet the expert booth

Willkommen - abap conf!

Each of the three conference days concluded with a dinner on the delightful campus grounds with almost a carnival like atmosphere, and steady flow of excellent craft beer. Not to mention that we were blessed with some fantastic weather. This aspect really stitched the conference together with that sense of hospitality and provided ample time to connect and reflect on the days experiences.

Enjoying the food, beer and conversations at CodeConnect

General reflections

Overall I would have to say the key positive would be the passion and energy on the floor. This was of course varied throughout, but in some cases this was truly inspirational.

The other aspect was the format (esp. reCAP and UI5con). The sessions were short (about 20min) and were often in series or themes, and this allowed a very flexible way to interact, by just going to one presentation and then chat to the experts at the booth or dive deep and go to three talks in a related series.

The SAP community representation lead by Svea was also a real plus.

I would suggest that perhaps re≼CAP could be spread over more than one day as there was just so much to dive into. But I can appreciate that organising such events is huge undertaking, so it’s a big ask. Perhaps some sessions could sneak into the code jam day.

Overall, it was a fantastic experience and thanks to all those who organised it, your hard work was much appreciated.

Best regards,

Ben.

PS, for more thoughts on this by a fellow Antipodean, head on over to blog by @mauriciolauffer 's reflections on the event as well.

Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept

2024-06-20T14:33:50.187000+02:00

Blog Series

Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept

Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer

Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant

With the announcement of SAP Generative AI Hub, there has been an explosion of interest in exploring how artificial intelligence can change how enterprise applications are developed and consumed at SAP. The official BTP Reference Architecture for GenAI and RAG provides general guidance on how to build full-stack apps integrating with LLMs via SAP AI Core. But many times, all you need is to integrate your frontend webapp - SAPUI5 freestyle or Fiori Elements apps quickly with LLMs for use cases, where you need GenAI - LLM integration only on the web client side and don't require complicated backend setup.

Some of the use cases where a client-side LLM integration within SAPUI5 apps is needed include, but are not limited to:

Product Description Generator
Job Description Generator
Customer Query Summarizer
Campaign Idea/Title Generator
AI Assistant Chatbot (without RAG—to answer based on a limited set of instructions)

I'm beginning this blog in this series by outlining an approach using SAP BTP Destinations to achieve LLM integration easily and securely, for deployment and development. The techniques outlined can be used right away in a productive setting. In the subsequent blogs, I'll walk you through an overview of how to build a simple Text Summarizer and a slightly advanced AI Chatbot Assistant.

Below is the solution to how this works. Please note that Standalone Approuter is optional for consumption via SAP Workzone or directly via SAP HTML5 Repository since both have SAP Managed Approuter running behind the scenes and would respect the xs-app.json configuration.

With this context set, let's get started to make your SAPUI5 apps AI-enabled ✨!

1. Create an SAPUI5 app

If you don't already have a SAPUI5 app (Freestyle or Fiori Elements), you can create a new app via SAP Build Code (Create > Build an Application > SAP Build Code > SAP Fiori Application) or in VS Code using SAP Fiori Tools Extensions.

2. Create a Destination for LLM deployment in SAP AI Core

Create a Destination in SAP BTP Cockpit with a name such as GENERATIVE_AI_HUB and the following info:

# Destination
Name: URL: <AI_API_URL>/v2 # Eg. https://api.ai....ml.hana.ondemand.com/v2 <- Note the suffix /v2
Authentication: OAuth2ClientCredentials
Client ID: <CLIENT_ID>
Client Secret: <CLIENT_SECRET>
Token Service Url: <TOKEN_URL>/oauth/token

## Additional Properties
HTML5.DynamicDestination: true
URL.headers.AI-Resource-Group: default
URL.headers.Content-Type: application/json

Please note that the URL is suffixed with /v2 in order to align with cap-llm-plugin usage.

3. Prepare for Deployment

To generate the necessary files needed for deployment such as xs-app.json and mta.yaml, execute the below command.

npm run deploy-config

4. Add a route to Destination for LLM API

Now, add an API route to proxy API calls for LLM via the Destination created in the xs-app.json file.

{
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/api/(.*)$",
      "target": "/inference/deployments/<DEPLOYMENT_ID>/$1",
      "authenticationType": "xsuaa",
      "destination": "GENERATIVE_AI_HUB",
      "csrfProtection": true
    },
    ...
  ]
}

5. Call the LLM API

Now, you can call the LLM API from your code. To demonstrate, I'm using the modern Browser fetch to make a REST API call.

// first get relative module path
const sModulePrefix = this.getOwnerComponent().getManifestEntry("/sap.app/id");

// make an API call to an LLM
const res = await fetch(
  `${sModulePrefix}/api/chat/completions?api-version=2024-02-01`,
  {
    method: "POST",
    headers: {
      "X-CSRF-Token": "<X-CSRF-Token>", // recommended for security. You can disable this for testing by setting `csrfProtection: false` in `xs-app.json` for `/api` route
      "Content-Type": "application/json",
      "AI-Resource-Group": "default", // mandatory
    },
    credentials: "same-origin",
    body: JSON.stringify({
      messages: [
        {
          role: "system",
          content: "Write a TL;DR/summary of the user content in a paragraph.",
        },
        {
          role: "user",
          content: sTxtInput,
        },
      ],
    }),
  }
)

6. Deploy the SAPUI5 app

Now, you can build the MTA app and deploy it by executing the following commands:

# Build an MTAR archive
mbt build

# Deploy the MTAR archive to logged in space
npm run deploy

6. Bonus: How to configure during development

The above steps outlined the steps to deploy an SAPUI5 integrated with LLM capabilities. Every time you make a change, the app needs to get built and deployed again which is not a good developer experience. Here in the subsequent steps, you can follow to connect your dev/local setup with BTP Destination and XSUAA services to work seamlessly during development whether in SAP Business Application Studio or in VS Code.

6a. Deploy the SAPUI5 app once

You must deploy your SAPUI5 app at least once, if not done already to consume Destinations with OAuth2ClientCredentials work locally. This setup requires the credentials to BTP Destinations and XSUAA services locally to work properly.

# Build an MTAR archive
mbt build

# Deploy the MTAR archive to logged in space
npm run deploy

6b. Create a default-env.json

Now, create a default-env.json file with the following content and replace the placeholders with actual credentials.

{
  "VCAP_SERVICES": {
    "destination": [
      {
        "credentials": {
          "clientid": "<CLIENT_ID>",
          "clientsecret": "<CLIENT_SECRET>",
          "url": "<AUTH_URL>",
          "uri": "<DESTINATION_URI>"
        },
        "label": "destination",
        "name": "<INSTANCE_NAME>",
        "tags": ["destination", "conn", "connsvc"]
      }
    ],
    "xsuaa": [
      {
        "credentials": {
          "clientid": "<CLIENT_ID>",
          "clientsecret": "<CLIENT_SECRET>",
          "url": "<AUTH_URL>"
        },
        "label": "xsuaa",
        "tags": ["xsuaa"]
      }
    ]
  }
}

6c. Install UI5 Middleware Plugin for Approuter

Now, install the ui5-middleware-approuter plugin, which wraps the actual @sap/approuter package to make the destination and routing work locally.

npm install -D ui5-middleware-approuter

6d. Update UI5 configuration to use the middleware

Now, update the ui5.yaml and ui5-local.yaml to add ui5-middleware-approuter as a custom middleware

...
server:
  customerMiddleware:
    ...
    - name: ui5-middleware-approuter
      afterMiddleware: compression
      configuration:
        authenticationMethod: "route"
        xsappJson: "./xs-app.json"
        appendAuthRoute: true # trigger auth, inorder to connect to destination service

Now, start running your UI5 app server locally and calls to /api endpoint now would get proxied over to LLMs running in SAP AI Core 😀.

npm start

This concludes the step-by-step approach to integrating LLMs with your SAPUI5 apps. In the subsequent blogs, I'll walk you through practical use-case implementations - A text Summarizer and an AI Chatbot Assistant in SAP Freestyle UI. Please note, that the techniques mentioned above work for SAP Fiori Elements apps too.

If you have specific questions on the approach or other interesting Generative AI topics to know, please feel free to comment below. I'm all ears! 👂

Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer

2024-06-21T09:56:16.980000+02:00

Blog Series

Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept

Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer

Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant

In the previous blog in the series - Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept, I outlined the steps and the approach to integrate SAPUI5 Freestyle & Fiori Elements app with LLMs via SAP AI Core.

I'm structuring this blog as a short walkthrough to demonstrate building a simple AI-based Text Summarizer using the approach defined in the previous blog.

You can find the reference implementation here - GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration

AI Text Summarizer - Screengrab

You can reuse the implementation to build similar use cases on the client side within SAPUI5 apps such as Product Description Generator, Job Description Generator, Customer Query Summariser, Campaign Idea/Title Generator etc.

The SAPUI5 application was generated in the SAP Build Code using a freestyle 'Basic' template. All the changes outlined in the previous blog to integrate the LLM with the app, by exposing an /api route which proxies the responses to LLM. The LLM chosen here is GPT-3.5-Turbo for demonstration purposes. Please note, the recommendation from SAP is to try out Opensource LLMs available from the SAP Generative AI Hub such as LlaMa 3, Mixtral 8x7b etc., before going in for Partner provided LLMs such as Azure OpenAI GPT-4, Google Gemini etc. for

Building an AI-based Text Summarizer is straightforward, it takes in a long text as an input and creates a succinct summary as an output. Once a user clicks on the 'Summarize' button, a POST API call is fired against the LLM endpoint via /api endpoint and gets the summarised content back.

At the time of writing, I could not make token streaming work by setting stream: true, except that I received the entire response as a chunk. I haven't spent enough effort testing if @sap/approuter supports Server-Sent Events (SSE) protocol, through which you get ChatGPT-styled token streaming implemented.

Also note that I've enabled csrfProtection: true for the /api endpoint to secure against CSRF attacks. This implies, that every POST call needs an X-CSRF-Token header, for which the token can be fetched at the beginning of the session and cached within the web app.

Building the Text Summarizer, though a simple use case provided me with a solid understanding of how to build a quick SAPUI5 app without writing code in the backend.

The code is available under the open-source Apache license here - GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration . Please feel free to modify it according to your needs.

If you have other interesting use cases, queries or feedback, please feel free to add a comment below. I'm all ears! 👂

Applying Clean Code Principles in SAP UI5 Development - Reality check

2024-06-21T17:10:05.346000+02:00

Recently I came across the "Clean SAP UI5" book, which focuses on adopting clean code principles that focus on maintaining code that is easy to read, understand, and maintain. This is where the concept of "Clean Code" comes into play.

In this blog, I would like to highlight the principles of clean code in SAP UI5 along with illustrative examples, and at the end, I will share some thoughts based on practical experience in projects😉.

So what is Clean Code?

Clean Code is a set of practices that aim to produce code that is easy to read, simple to understand, and effortless to maintain. Robert C. Martin introduced these principles in his book "Clean Code: A Handbook of Agile Software Craftsmanship." These principles are universal and can be applied to any programming language or framework, including SAP UI5.

Why Clean Code in UI5?

SAP UI5 is a robust framework for building responsive, enterprise-level applications. Given its complexity and the collaborative nature of enterprise projects, following clean code principles becomes even more critical. Clean code in UI5 development can lead to:

Better Collaboration: Easy-to-read code facilitates better collaboration among team members.
Faster Onboarding: New developers can quickly understand and contribute to the codebase.
Reduced Bugs: Clear and well-structured code reduces the likelihood of errors.
Enhanced Maintainability: Easier to refactor and extend applications as requirements evolve.

Key Principles of Clean Code in UI5

Meaningful Names
- Be Descriptive: Use meaningful and descriptive names for variables, functions, and classes. Avoid abbreviations that are not universally understood.
- Consistent Naming Conventions: Follow consistent naming conventions throughout your codebase. For instance, use camelCase for variables and functions, and PascalCase for classes.

// Bad Example
var p; // what does p stand for?

// Good Example
var productPrice;

Single Responsibility Principle
- Function Focus: Each function should have a single responsibility or perform a specific task. This makes the code easier to understand and maintain.
Avoid Magic Numbers and Strings
- Use Constants: Replace magic numbers and strings with named constants to provide context and make the code self-explanatory.

// Bad Example
if (user.age > 18) { /* logic for adults */ }

// Good Example
const LEGAL_ADULT_AGE = 18;
if (user.age > LEGAL_ADULT_AGE) { /* logic for adults */ }

Comment Judiciously
- Useful Comments: Write comments that explain why the code exists, not what it does. Well-written code should be self-explanatory, reducing the need for excessive comments.

// Bad Example
// This function adds two numbers
function add(a, b) {
    return a + b;
}

// Good Example
// Adjusts the user balance after a transaction
function adjustUserBalance(user, amount) {
    user.balance += amount;
}

DRY Principle (Don't Repeat Yourself)
- Reusability: Avoid duplicating code by creating reusable functions and components. This not only reduces redundancy but also centralizes logic for easier maintenance.

// Bad Example
function getUserFirstName(user) { return user.firstName; }
function getUserLastName(user) { return user.lastName; }

// Good Example
function getUserProperty(user, property) { return user[property]; }

Proper Error Handling
- Graceful Degradation: Ensure that your code handles errors gracefully. Use try-catch blocks and provide meaningful error messages to help with debugging.

// Bad Example
var data = JSON.parse(input);

// Good Example
try {
    var data = JSON.parse(input);
} catch (error) {
    console.error("Invalid JSON input: ", error.message);
}

Clean Code in Action: A UI5 Example

Let's look at a simple SAP UI5 example to illustrate some of these principles. Assume we are building a function to retrieve and display product details.

// Bad Example
function getProductDetails(id) {
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.loadData("/api/products/" + id, {}, false);
    if (oModel.getData().price > 100) {
        alert("Price is over 100");
    }
    var oView = sap.ui.getCore().byId("myView");
    oView.setModel(oModel);
}

// Good Example
const API_ENDPOINT = "/api/products/";
const HIGH_PRICE_THRESHOLD = 100;

function getProductDetails(productId) {
    const oModel = new sap.ui.model.json.JSONModel();
    const productUrl = `${API_ENDPOINT}${productId}`;

    oModel.loadData(productUrl, {}, false);
    displayHighPriceAlert(oModel.getData().price);
    setViewModel("myView", oModel);
}

function displayHighPriceAlert(price) {
    if (price > HIGH_PRICE_THRESHOLD) {
        alert("Price is over " + HIGH_PRICE_THRESHOLD);
    }
}

function setViewModel(viewId, model) {
    const oView = sap.ui.getCore().byId(viewId);
    oView.setModel(model);
}

Reality Check Based on My Experience 🤔

While the principles of clean code are ideal for creating maintainable and robust code, the reality of software development can often make it challenging to adhere strictly to these guidelines. Here are some common obstacles developers might face:

Time Pressure: Tight deadlines and the need for quick delivery can force developers to prioritize speed over code quality. In such cases, writing clean code might take a back seat to deliver functional code quickly.
Changing Requirements: Frequent changes in project requirements can lead to rushed updates and patches, resulting in code that is less clean and harder to maintain. This can cause technical debt that accumulate over time.
Lack of Experience: Junior developers or those new to a specific framework like SAP UI5 might struggle to apply best practices and clean code principles consistently. Limited knowledge and experience can make it difficult to write clean, maintainable code.

From my perspective, it's essential to find a balance between ideal practices and practical constraints. and do so Here are a few tips:

Incremental Improvement: Aim to improve the codebase incrementally. Start with the most critical areas and gradually apply clean code principles.
Code Reviews: Conduct regular code reviews to share knowledge and identify areas for improvement. This helps maintain a high standard of code quality and provides learning opportunities.
Peer Programming: Take the chance to learn from other perspectives by getting involved in peer programming with other developers
Automated Tools: Use automated tools for code analysis and linting to enforce coding standards and catch common issues early some IDE's like VScode are offering this possibility by adding the relevant extensions.
Documentation: Maintain good documentation to support code understanding and maintenance, especially when clean code practices cannot be fully adhered to due to external pressures.

Final Word

Applying clean code principles to SAP UI5 development is essential for building maintainable, scalable, and robust applications. However, it's important to recognize that real world constraints can make it challenging to follow these principles perfectly. By understanding these constraints and striving for continuous improvement, developers can still achieve a high standard of code quality that benefits both the team and the end product.

Happy coding! 🤗

Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant

2024-06-24T16:15:29.392000+02:00

Blog Series

Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept

Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer

Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant

In the previous blogs in the series, I explained the steps to integrate SAPUI5 Fiori Apps with LLM via Destinations and discussed a case of implementing a simple application - Text Summarizer.

Like the previous blog, I'm structuring this as a short walkthrough of building a slightly advanced use case of building an AI Chatbot Assistant with a conversational UI. The implementation is lean, implemented only on the client side with the entire conversation history retained within the web client, and gets reset once reloaded.

You can find the reference implementation here - GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration

Screengrab of AI Chatbot Assistant built in SAPUI5

To build this, I reused the same implementation from the Text Summarizer blog and added a new tab to switch between the two sections, hence reusing the logic for the most part.

There are two major differences between the Chatbot Assistant compared to the Text Summarizer implementation:

Since LLMs don't remember your previous conversations, all the messages through the entire conversation history should be sent with every LLM request, to maintain the context.
The Conversational UI is not available as an SAPUI5 control, I built this layout - containing altering User and AI messages with an Input control to enter your messages, using SAPUI5's FlexBox control with a bit of CSS styling.

The code is available under the open-source Apache license here -GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration . Please feel free to modify it according to your needs.

If you have questions or feedback, please feel free to add a comment below. I'm all ears! 👂

SAP Fiori tools 2406 update includes added support for SAP S/4HANA Cloud and more

2024-06-26T21:45:41.758000+02:00

We are excited to announce expanded support for SAP S/4HANA Cloud within SAP Fiori tools. Developers can now seamlessly create and deploy applications to SAP S/4HANA Cloud directly from Visual Studio Code. While this was already possible using SAP Business Application Studio where SAML authentication is supported, I am happy that we can now offer an alternative to those who have a requirement to work in Visual Studio Code.

While a comprehensive OAuth solution is still in development, a provisional solution based on reentrance tickets is available to meet immediate development needs for SAP S/4HANA Cloud applications. You will need to manually enter the username and password to the system. To make it easier for you, we have enhanced the feature to also support adding a new connection via reentrance ticket. Your username and password are saved in your laptop (Keychain for Mac users and Credential Manager for Windows users), and you can simply select the system as the OData source during project generation.

Adding connection info as an SAP System

Choose the SAP System when selecting the OData Source

More Integrated Development Experience

The integration between SAP Fiori tools and ABAP Development Tools (ADT) has been significantly enhanced, enabling developers to transition seamlessly from ABAP to SAP Fiori development environments as described in Ian’s blog. This collaboration facilitates smoother development and brings all the SAP Fiori development tooling closer together. Future updates promise further innovations, including the upcoming ability to create UI services directly from SAP Fiori tools, reinforcing the commitment to a unified development experience across SAP ecosystems.

Launching SAP Fiori tools Application Generator from ADT

Simplification and Continuous Enhancements

In the realm of app development, the UI5 Language Assistant now streamlines navigation by offering direct links to controller files from XML views and fragments. Furthermore, the ability to automate the update of manifest schema on demand enhances agility in development workflows. We have also added UI5 linter integration enabling you to check compatibility of your project with SAPUI5 version 2 so you can proactively check your app for upgrade. To start the UI5 linter check, click on the “Run UI5 Linter” tile in the Application Info page, or execute command “Fiori: Run UI5 Linter” from the command palette.

“Run UI5 Linter” tile in the Application Info page

On the user experience front, we introduced a toggle in the page editor so you can decide whether you prefer the more Visual Studio Code native experience where all properties are scrollable within a page (the default), or you prefer to see only the relevant properties for the selected element (disable the “Scrolling Properties” in Page Editor. We would love to hear your thoughts so we can further improve.

Disable “Scrolling Properties” to see only the properties relevant to the selected element

Open Source Journey Continues

Since the start of our open source journey, we have published 60 packages to open-ux-tools repo. Most recently, SAP Fiori tools completed the open sourcing of key modules, such as the preview middleware, the OData client modules and some annotation-related APIs. I am especially excited about the preview middleware which paves the way to virtualize most of the files required for local testing which in turn will reduce and simplify the future project structure of the SAP Fiori apps. The open source initiative not only fosters transparency but also encourages collaboration and innovation within the SAP developer community. As an example, we are working to consolidate and simplify the tooling for Adaptation Project with the open source modules. Looking ahead, plans are underway to open source the SAP Fiori generator and the complete annotation API, further empowering developers and enhancing interoperability with other development tools.

Outlook: Towards Future Innovations

Looking towards the future, SAP Fiori tools remains dedicated to advancing developer productivity and creativity. The introduction of Gen AI capabilities through SAP Build Code marks a significant milestone, enabling developers to generate projects directly from business requirement documents. Building upon this foundation, upcoming enhancements will extend these capabilities to include project generation from screenshots and the ability to generate RAP (ABAP RESTful Application Programming Model) services, promising even greater automation and efficiency in application development.

In conclusion, the latest updates to SAP Fiori tools underscore SAP's commitment to empowering developers with robust tools and integrations, fostering innovation and efficiency in the development of SAP Fiori . As these capabilities continue to evolve, developers can expect further enhancements aimed at simplifying development workflows, enhancing integration, and driving forward the future of SAP Fiori app development. Stay tuned for more updates and join us in shaping the future of enterprise application development with SAP Fiori tools. Send us an email at sapfiorielements@sap.com or join us in the next monthly SAP Fiori roundtable!

To see these innovations in person, I encourage you to join us in Chicago for our next SAP Fiori Innovation Day on August 13, 2024.

Blast Off! UI5 Web Components 2.0 is Now Live!

2024-07-04T12:15:37.669000+02:00

A Journey of Innovation and Growth

Since the release of UI5 Web Components 1.0 in 2021, our journey has been marked by unwavering innovation and a commitment to excellence. Over the past three years, we have listened to our community, refined our technologies, and expanded our capabilities. Today, we stand at a pivotal moment in our evolution with the launch of UI5 Web Components 2.0.

Picture 1: UI5 Web Components timeline

The Evolution of UI5 Web Components

Our project has continuously evolved, embracing new web standards, eliminating legacy code, and integrating invaluable user feedback from our community to enhance our APIs. This journey culminated in April with the unveiling of the first Release Candidate for UI5 Web Components 2.0.

Announcing UI5 Web Components 2.0! 🎉

Today, we are thrilled to officially launch UI5 Web Components 2.0. This major release signifies our commitment to providing cutting-edge tools for web development. Version 2.0 not only enhances performance and reliability but also sets the stage for future innovations.

Key Benefits of UI5 Web Components 2.0

UI5 Web Components 2.0 introduces several substantial improvements:

Embracing New Standards: Future-proofing UI5 Web Components.

Consistent APIs: Streamlined and more intuitive, albeit with some breaking changes.

Elimination of Legacy Code: Reducing footprint and enhancing quality by minimizing bugs.

Looking ahead, we will adhere to Semantic Versioning and release major updates more frequently to keep pace with technological advancements.

What's New in UI5 Web Components 2.0?

Revolutionary Popover API: Experience a standardized, consistent, and flexible mechanism for displaying popover content across all relevant components.

This API allows popups to display correctly above all other content, eliminating the need for the "static area" used in version 1.x. Previously, popups were placed in a static area within the body to ensure correct positioning despite various CSS rules. In version 2.x, the popover API simplifies the DOM structure by incorporating the popover directly within the component. This results in easier development, maintenance, and enhanced styling capabilities. It also allows components with popups to have physical children, supporting custom content and simplifying testing. The popover API is fully supported by all major browsers.

Form-Associated Custom Elements: Harness the power of native input behavior within HTML forms. This enhancement makes the features/InputElementsFormSupport.js feature redundant, simplifying form handling and enhancing the developer experience. Refer to the ElementInternals API documentation for more details.

Seamless Time Zone Support: Seamlessly manage time zones within your applications for a more personalized user experience. The date and time components are adapted to the time zone feature, allowing the components to present dates in different time zones. The time zone identifiers format is the one used in the IANA time zone database.

New Components: Expand your UI toolkit with new components such as Dynamic Page, Form, Table, Text, Tokenizer, AI Button, AI Prompt Input, Custom Option and Custom Suggestion Item.

Picture 2: Preview of UI5 Web Components 2.0 new components

Enhanced Existing Components: Benefit from improvements in List Drag and Drop, Tree Drag and Drop, Tab Container Drag and Drop, and a revamped Notifications Experience.

Picture 3: Preview of UI5 Web Components 2.0 new features

Revamped Documentation Site: Explore our new documentation site featuring a live editor, playground, dark mode, and an intuitive icons view.

Picture 4: UI5 Web Components 2.0 new website

New logo: We are excited to introduce our new logo and branding, reflecting the modern and dynamic nature of our project. Our new design incorporates defining elements of the feather and the flame. The feather symbolizes being lightweight, while the flame forms a connection to the phoenix, embodying the spirit of rebirth and continuous improvement.

Explore the Full-Screen Playground: Our new full-screen playground offers a range of features designed to enhance your development experience:

Live code editing

TypeScript support

Code completion for components in HTML

Sample download

Easy sharing

Theming options

Predefined examples

Picture 5: UI5 Web Components 2.0 full-screen playground

Adoption and Breaking Changes

UI5 Web Components 2.0 is a major version and introduces breaking changes that may require updates to your code. Our comprehensive Migration Guide will assist you in making a smooth transition from UI5 Web Components v1.x to v2.0. Note: The majority of the breaking changes can be achieved with find and replace.

Notable Breaking Changes:

The Belize theme has been removed and is no longer available.
CSP (Content Security Policy) will be ensured via the adoptedStyleSheets only, which are CSP-compliant by design.
The static area has been removed since the browser now ensures the correct positioning of popups thanks to the popover API that is fully adopted by the UI5 Web Components.
The Badge component (ui5-badge) has been renamed to Tag (ui5-tag).
The old Table (ui5-table) has been moved to @ui5/webcomponents-compat; new Table is available with better API and accessibility.
Public methods for opening popovers are replaced with the open property for declarative APIs.
Components like Label, Text, Link, and Title now wrap by default (wrappingType="Normal" by default, wrappingType="None" optionally).
SelectMenu and SelectMenuOption components have been removed; standard options with the popover API make them obsolete.
Renaming of properties, events, and enumeration values.
Removed APIs without alternatives:
- Progress Indicator (ui5-progress-indicator): Disabled property removed.
- Select Option (ui5-option): Disabled property removed for UX and accessibility alignment.
- Token (ui5-token): Readonly property removed; logic now within the Tokenizer.
- The Device#isIE method has been removed and is no longer available - the IE browser is not supported anymore.
- Notification List Group (ui5-li-notification-group): The properties showClose, showCounter, priority, the event close and the slot actions are removed due to the new better notification list design concept.

Ongoing Support for Version 1.x

We will continue to support version 1.x until the end of the year, focusing on bug fixes to ensure continuity for our existing users.

Get Help and Engage with the Community

Encountering issues? Reach out for support or report bugs on our GitHub project: Submit a bug or ask a question here.

Call to Action

UI5 Web Components 2.0 is a testament to our dedication to innovation, quality, and community engagement. We are particularly excited about the groundbreaking features such as the Popover API, Form-Associated Custom Elements, and seamless time zone support.

We invite you to preview the new version and migrate to UI5 Web Components 2.0 to fully leverage these advancements. Together, we are entering a new era of web development, and the possibilities are endless. Thank you for being part of this exciting journey with us! 🙌

SAP Developer News, July 4th, 2024

2024-07-04T21:10:00.117000+02:00

Podcast Version: https://podcast.opensap.info/sap-developers/2024/07/04/sap-developer-news-july-4th-2024/

SAP Samples on GitHub and the BTP Resource Consumption Monitor repo

SAP Samples organization on GitHub: https://github.com/SAP-samples
BTP FinOps: Keeping Track of your Credits: https://community.sap.com/t5/technology-blogs-by-sap/btp-finops-keeping-track-of-your-credits/ba-p/13737793
BTP Resource Consumption Monitor repository: https://github.com/SAP-samples/btp-resource-consumption-monitor

Current Customer Engagement Initiatives

July Developer Challenge “Reverse APIs”

Main July challenge blog post https://community.sap.com/t5/application-development-blog-posts/2024-07-quot-reverse-apis-quot-sap-developer-challenge/ba-p/13749653
Task 0 Server and service provisioning https://community.sap.com/t5/application-development-discussions/2024-07-developer-challenge-task-0-server-and-service-provisioning/m-p/13749996
Previous (June) challenge final week discussion https://community.sap.com/t5/application-development-discussions/submissions-for-quot-sap-hana-cloud-multi-model-quot-developer-challenge/m-p/13744012

SAP Build Governance How-To Guides Published

The Open Documentation Initiative & the revamped SAP Help Portal comments feature

The Grand Prix of Developer Feedback (blog post) https://community.sap.com/t5/open-documentation-initiative-blog-posts/the-grand-prix-of-developer-feedback/ba-p/13734863

==============================================================

CHAPTER TITLES

0:00 Intro

0:10 SAP Samples on GitHub and the BTP Resource Consumption Monitor repo

1:11 Current Customer Engagement Initiatives

2:14 July Developer Challenge “Reverse APIs”

3:43 SAP Build Governance How-To Guides Published

5:11 The Open Documentation Initiative & the revamped SAP Help Portal comments feature

TRANSCRIPT

[Antonio] Hola SAP developers. I don't know about you, but I've learned a lot from the sample code that's available in the SAP Samples organization on GitHub. Whatever you're interested in, be it CAP, RAP, AI, connectivity with event brokers, it is likely that you will find a good sample in the reports available there. For example, the latest cool report that I've popped into is the BTP Resource Consumption Monitor by my colleague Willem, who recently also publish a blog post about what the tool can do for you. In essence, keep track of your CPEA, BTPEA credits. The tool has a bunch of things, billing verification, cost breakdown, credit expenditure, monetary analytics, even suggestions for account optimization and cost reduction strategies. And all the code and details to get it running are there for you to explore. Make sure to check it out. I'm including the links in the description below.

[Nico] Hi everyone and welcome to the SAP Developer News. I'm on an early morning walk with the little one, who for some reason seems to be sleeping better outdoors, and I thought I would use the time wisely and record the developer news. So, we would like to point your attention to two customer engagement initiatives that are currently running. The first one is about SAPUI5 2.0. So, the team is looking for feedback and is willing to provide some more insights and help on how to migrate from SAPUI5 version 1 to 2. The second initiative is about SAP BTP and is specifically for SAP BTP admins and solution architects. Again, the team is looking for feedback and is willing to provide some more insights and help with the overall goal of improving the user experience on the platform. These initiatives are really your chance to shape the future of those two products and I very much invite you to participate. and I see you soon, bye.

[DJ] The June Developer Challenge run by my good friend and colleague Vitaly is coming to a close. It's not too late to finish off the tasks though, but July is here and that means we have a new Developer Challenge for you. We're calling it Reverse APIs because essentially It's a reflection on last August's developer challenge on APIs. But this time, it's you that have to create the APIs. API endpoints in services that will be tested by an orthophysic testing mech. Sounds scary? Not at all, because you'll have the power and magic of CAP at your disposal. The whole idea is to learn, to explore, to discover all the features that CAP has to offer when building services and API endpoints. There are ten tasks in this challenge, reflecting ten different API endpoints that you're going to create over three different services over the course of this month, plus a little warm-up task, Task Zero, that is an easy way to start off, and that Task Zero has already been published. head over to the blog post which explains everything and links you to this first task to get going. See you, all right.

[Rekha] Hello, everybody. I hope you're all having a good time. Are you an IT administrator or IT professional looking to streamline and scale your SAP build fusion development efforts? Then it is crucial to have a robust governance framework in place. Effective governance ensures that your organization's software projects are delivered quickly, securely, efficiently, and in alignment with your organizational goals and compliance requirements. SAP has now launched SAP Build Governance Resource Center website. Inside this web page, you will find a package of valuable assets like digital center of excellence toolkit, use case body tool, how to guide for use cases ideation, and fusion development project lifecycle management, guided experience step-by-step tutorial, FAQs, presentation on SAP Build Governance, essential quick links, and SAP Help documentation links for best practices. By consolidating all the resources I just mentioned into a single and easy to navigate platform, SAP Build Governance Resource Center empowers you to operate and scale your Fusion development programs with confidence. I hope you found this update exciting. Thank you.

[DJ] A couple of years ago, we launched the Open Documentation Initiative to allow, to encourage you to collaborate with us on documentation, either by providing feedback or contributing fixes and improvements to the documentation via the universal global content collaboration mechanism and platform that is GitHub. Recently, you might have noticed that there's also been some revamping of an existing feature directly on the SAP Help Portal. That's the comments feature which some may find more straightforward to use to contribute comments while perusing the documentation. We want to know what you prefer. Jens Hailey has written a blog post all about this new revamp and also describing what we want to achieve by asking you to help us find out the difference between the two approaches. Read all about it in Jens's blog post. The link is in the description.

SAP Fiori development newsletter July 2024 (issue #29)

2024-07-16T22:16:32.946000+02:00

This is our first issue since SAP Sapphire, so we’ll feature some of the innovations announced at that event. AI was everywhere, with the goal of making users more productive in solutions across SAP’s portfolio. SAP Build Code is great example of a product that integrates AI to make application development faster and easier.

We are hosting our second SAP Fiori Innovation Day in Chicago on August 13. Please join us to see the latest innovations in our portfolio, including how AI makes building SAP Fiori apps easier and a sneak preview of some planned functionality to make business users more efficient when using SAP Fiori apps.

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 August 14, 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.

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

Development News

Sapphire 2024 summary from a user experience perspective

Every session I attended included some discussion on how artificial intelligence will make the product experience better. This summary focuses on how to implement the SAP Fiori user experience as customers transition to SAP S/4HANA Cloud.

https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-sapphire-2024-highlights-on-ux-application-development-and-ai/ba-p/13723602

What’s new for application development, automation and integration on SAP BTP

SAP Build Code and BTP were everywhere at Sapphire, especially in the context of building applications that follow clean core principles.

https://community.sap.com/t5/technology-blogs-by-sap/sap-sapphire-2024-what-s-new-for-application-development-automation-and/ba-p/13736396

Streamlining data entry: exploring the new 'paste' feature in SAP Fiori elements V4 tables

The recent release of SAP Fiori elements for OData V4 introduces the ability to paste data into tables, much like you would in Microsoft Excel. This enhancement significantly elevates the user experience for Fiori elements V4 application users.

https://community.sap.com/t5/application-development-blog-posts/streamlining-data-entry-exploring-the-new-paste-feature-in-fiori-elements/ba-p/13710973

SAP Fiori tools adds tighter integration with ABAP Development Tools

Developers can now have a more integrated experience when working with ADT at the backend and SAP Fiori tools for front-end development You don’t need to manually switch between the tooling environments and remember which system and entity they wish to use. Now, with one click in ADT, you can seamlessly switch from ABAP to SAP Fiori development.

https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-may-2024-release-adds-closer-integration-with-abap/ba-p/13720761

SAP Fiori tools 2406 includes added support for SAP S/4HANA Cloud and more

Developers can now seamlessly create and deploy applications to SAP S/4HANA Cloud directly from Visual Studio Code.

https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2406-update-includes-added-support-for-sap-s-4hana-cloud/ba-p/13743708

Copy and paste like a pro with SAPUI5 tables

Maximizing the efficiency of business users through advanced Copy & Paste: SAPUI5 1.124 improves copy/paste operations in tables, letting business users work in a more natural way with improved productivity.

https://community.sap.com/t5/technology-blogs-by-sap/sapui5-tables-maximizing-efficiency-through-advanced-copy-amp-paste/ba-p/13723158

Create an app variant to introduce functionality without changing the original app

You can extend SAPUI5 applications in SAP S/4HANA Cloud Public Edition and SAP BTP, ABAP Environment with an application variant, without changing the original application.

https://help.sap.com/docs/bas/developing-sap-fiori-app-in-sap-business-application-studio/extending-sap-fiori-application-for-s-4hana-cloud

Announcing UI5 Web Components 2.0

UI5 Web Components 2.0 enhances performance, reliability, and sets the stage for future innovations for web development.

https://community.sap.com/t5/technology-blogs-by-sap/blast-off-ui5-web-components-2-0-is-now-live/ba-p/13744227

Reality check on applying clean code principles in SAPUI5 development

Applying clean code principles to SAPUI5 development is essential for building maintainable, scalable, and robust applications. Real-world constraints can make it challenging to follow these principles perfectly. By understanding the constraints and striving for continuous improvement, developers can still achieve a high standard of code quality.

https://community.sap.com/t5/blogs-about-sap-websites/applying-clean-code-principles-in-sap-ui5-development-reality-check/ba-p/13739199

Product updates for SAP Business Application Studio – June edition

As we cross the halfway mark of the year, it’s the perfect time to reflect on our progress and introduce the exciting new features we've added to BAS over the past few months.

https://community.sap.com/t5/technology-blogs-by-sap/product-updates-for-sap-business-application-studio-june-edition/ba-p/13721825

Events

SAP Fiori Innovation Day in Chicago – August 13

After our successful event in Dublin. Ireland, we are hosting another SAP Fiori Innovation Day in Chicago. By attending this event, you will learn:

SAP’s UX strategy and how it is evolving
Recent UX innovations that fulfill the promise of the intelligent, collaborative enterprise
Making SAP Fiori work for you – finding the apps you need and adapting them to your business requirements
Building apps using the latest tools and technologies – the same ones SAP uses to build apps for SAP S/4HANA (including optional hands-on workshop)
How to move your organization forward, including how to take advantage of AI for developing applications

To bring you this content at no charge, this event is sponsored by Mindset Consulting, Convergent IS, and Sovanta.

Register today: https://events.sap.com/noam/sap-fiori-innovation-day-chicago-2024/en/home

Watch the recordings from re>≡CAP 2024 and UI5con 2024

Missed our community conferences around our programming frameworks CAP and SAPUI5? No worries! All sessions were recorded and are now available online.
Go to re>≡CAP event page to access recordings
Go to UI5con event page to access recordings

Tutorials

openSAP content has moved to the learning.sap.com platform

Developing and Extending SAP Fiori Elements Apps

https://learning.sap.com/courses/developing-and-extending-sap-fiori-elements-apps

Developing an SAP Fiori Elements App Based on a CAP OData V4 Service

https://learning.sap.com/learning-journeys/developing-an-sap-fiori-elements-app-based-on-a-cap-odata-v4-service

Adapting the UI in SAP S/4HANA Cloud Using SAP Screen Personas

https://learning.sap.com/courses/adapting-the-ui-in-sap-s-4hana-cloud-using-sap-screen-personas

Tutorial: Key User Adaptation for SAPUI5 applications

To extend SAPUI5 applications, SAPUI5 Flexibility offers capabilities not only for developers, but also for key users and end users using simple visual / WYSIWYG tools..

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. What is new, is the support for SAP S/HANA Cloud. This enables developers to enhance SAPUI5 applications in SAP S/4HANA Cloud with features that were previously only for 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

Back issues from the past year

SAP FIori development newsletter #28 (May 2024)

SAP Fiori development newsletter #27 (March 2024)

SAP Fiori development newsletter #26 (January 2024)

SAP Fiori development newsletter #25 (November 2023)

SAP Fiori development newsletter #24 (September 2023)

My Tips for Migrating very old Fiori Apps to BTP Cloud Foundry

2024-07-19T01:38:03.582000+02:00

Introduction

Migrating SAP Fiori applications to the BTP Cloud Foundry environment can be a complex but necessary task, especially given the impending sunset of the SAP NEO environment on December 31, 2028. This blog aims to share my personal tips for migrating older SAP Fiori apps, whether from on-premise systems or from the NEO environment.

The official SAP docu.mentation, "Migrating Applications in SAP BTP from the Neo Environment to the SAP BTP Cloud Foundry Environment," is a comprehensive resource that covers all aspects of the migration process, starting from project migration using the Business Application Studio (BAS).

While the official guide is exhaustive, my blog provides additional help based on my field experiences. These tips might prove useful for someone in a similar situation, offering practical insights to navigate the migration process more smoothly.

Your app may not have the manifest.json : Creating a Descriptor File for Existing Apps

You might not find the manifest.json in the app you need to migrate.

In this case, you have to create it manually (this is also mandatory for the migration of the project with BAS). This link in the SAPUI5 documentation, 'Creating a Descriptor File for Existing Apps,' is very useful, and I recommend starting here.

Some points to watch out for:

be careful with the '/' in the uri section of dataSources, remove it to have relative URLs instead of absolute ones
pay close attention to correctly set up the 'models' part under 'sap.ui5,' because the big difference is that the framework creates the models for us, so you need to define them correctly based on the models that were previously created manually in the Component.js, where you should remove the creation of models (this part is also in the UI5 documentation, but it is easy to make mistakes in manual creation)
Remember to also include sap cloud service:

"sap.cloud": {
"service": "yourservice"
}

Workzone

Add the inbound intent in your manifest.json

If you are going to use Workzone, you also need to include in your manifest.json the intent details and description, icon, subtitle, etc., that will be used in the tile. For this, you need to define the crossNavigation Inbound section

"crossNavigation": {
  "inbounds": {
    "your-inbound": {
      "signature": {
        "parameters": {},
        "additionalParameters": "allowed"
      },
      "semanticObject": "yourSemanticObject",
      "action": "Display",
      "title": "{{appTitle}}",
      "subTitle": "{{subTitle}}",
      "icon": "sap-icon://wallet"
    }
  }
}

If you need multiple intents for the same app

It is very common to want different tiles with different parameters for the same App.

While it was easier to configure this scenario in the old Neo Cloud Portal Service or on-premise Launchpad, it seems not possible to have multiple Intents for the same app in Cloud Foundry.

Here is an interesting Question by @MikeDoyle where the only solution seems to be create a “Local Copy” and then defining a new “Tile” with different parameters locally https://community.sap.com/t5/technology-q-a/how-to-deploy-multiple-intents-of-same-fiori-app-to-work-zone/qaq-p/12795041

Order of Tiles

Another common aspect is that you will be asked to replicate the same order of the Tiles that is already present in the old Cloud Portal Neo or the on-premise Launchpad.

It is very important to maintain a consistent order of Tiles and configuration with the past. For this topic, the great blog by @NabiZamani at this link https://community.sap.com/t5/technology-blogs-by-members/changing-the-order-of-groups-and-tiles-in-your-sapcf-flp/ba-p/13557990 is very useful.

In my case, replicating the order of Tiles in a group seems simpler than you might think: the order of the Tiles is determined by the order in which the app is saved within the group.

Stable UI5 Version

In some situations, you may need to use a stable SAPUI5 version to run the migrated applications, which might not work correctly with the latest SAPUI5 release.

This happened to me, for example, with a rather complex custom control. In this case, the quickest way to get the app working is to set a UI5 Stable Version.

For this, two community links helped me: this Question by @miltonc https://community.sap.com/t5/technology-q-a/stable-sapui5-version-for-custom-apps-in-sap-build-work-zone-launchpad/qaq-p/12740099 and the answer by @Ivan-Mirisola at this question https://community.sap.com/t5/technology-q-a/how-to-fix-sap-ui5-version-in-sap-btp-launchpad-service/qaq-p/12547095

the main points are:

Set your stable version in the manifest.json of your app, taking into account the patches, to avoid hardcoding a specific version. You can specify an "x" to always use the latest patch. For example:

"sap.platform.cf": {
  "ui5VersionNumber": "1.108.x"
}

Use the same stable version for all the apps that will go into the same Workzone Site; otherwise, the most recent release will be used
If you try to execute the command sap.ui.version from the console, it will always return the most recent version used by Workzone, making you think the stable version is not being used. See the first comment in the link I posted where you can execute Shift + Ctrl + Alt + P to bring up a Technical Information Dialog and check if your UI5 Stable Version is being used

ShellUIService

You might find ugly code like this in the old application:

sap.ui.getCore().byId("shellAppTitle").getModel().getData().application.title = ' ..... ';
sap.ui.getCore().byId("shellAppTitle").getModel().updateBindings();

with the purpose of dynamically updating the title of your app within the Launchpad. The correct way to do this in Workzone is described very simply in the overview of the class sap.ushell.ui5service.ShellUIService

Declare the usage of the service in the manifest:

"sap.ui5": {
"services": {
"ShellUIService": {
"factoryName": "sap.ushell.ui5service.ShellUIService"
}
}
}

and in your controller

this.getOwnerComponent().getService("ShellUIService").then(
						function (oService) {
				oService.setTitle('....');
						},
						function (oError) {
				console.log("Cannot get ShellUIService");
						}
					);

User API Service

If the app you need to migrate from Neo used the userapi service, you need to adapt it to use the corresponding Cloud Foundry service. Besides the official documentation here, I found the documentation on npmjs here very useful.

Essentially, you need to add the routing to the user API in your xs-app.json

{
  "source": "^/user-api(.*)",
  "target": "$1",
  "service": "sap-approuter-userapi"
}

This way, you can use /user-api/currentUser or /user-api/attributes to call from your app.

Attention point: the JSON returned is not identical in the attributes. For example, in the Neo app I migrated, the attribute 'login_name' was used, which in Cloud Foundry becomes simply 'name’

Protect HTML5 Apps with XSUAA

Another issue that may arise is protecting access to Fiori Apps if they are run via direct link without Workzone.

While in NEO there was a configuration in the cockpit where you could associate a Role to enable authorization for opening the App, in Cloud Foundry this is a bit different.

HTML5 Permission in NEO

If you use the managed approuter of Workzone, your Apps will be in the HTML5 Repository without being able to define any roles, but you can protect the application using an xsuaa scope within the xs-app.json.

So, in the xs-security.json you can define a scope (e.g. frontendscope)

{
"xsappname": "testprotectedapp",
"tenant-mode": "dedicated",
"description": "Security profile of called application",
"scopes": [
{
"name": "$XSAPPNAME.frontendscope",
"description": "Protected App Admin"
}
]
}

This scope then needs to be defined in a role template and role collection. To protect the app, you just need to define the scope in the xs-app.json in the route for the HTML5 Runtime.

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

Users who do not have a role with this scope will receive a 403 Forbidden error when opening the link.

sap.ca.scfld

Last but not least, the nightmare sap.ca.scfld. If you don't know it, consider yourself lucky. However, if you do know it and need to migrate old apps using it to Cloud Foundry, you might face many problems. As rightly mentioned in this old blog, the only consideration to make is 'don't use it!'

These are libraries that SAP used in very old Fiori apps to accelerate the development of applications, especially Master/Detail.

The particularity is that the routes are configurable and predefined in the Component.js, while the OData services are in the Configuration.js file.

In simple terms, I tried to be as conservative as possible and used the jQuery.sap.getModulePath function to get the complete endpoint at runtime for the OData because I wasn’t able to define the models in manifest.json

You might also encounter errors like this when the app is added to Workzone

The way I found to resolve this is to disable the 'Asynchronous Module Loading' option in your Workzone Site settings

In conclusion, you should not migrate Fiori applications that use the sap.ca.scfld library but instead recreate them from scratch. However, I understand that in some situations, you might have to take the 'mandatory migration of the old app' approach because Neo is being retired, there is no time, the client's IT department demands it, or for many other reasons beyond our control. In this case, with these adjustments, the app can be opened, but this can only be a temporary solution and it's important to emphasize this.

I will try to update this blog with new insights based on the experience of future similar projects if there are other interesting points.

Happy migrating!

UI5 Tooling 4.0

2024-07-24T09:30:00.054000+02:00

UI5 Tooling 4.0

The UI5 Core team is pleased to announce the release of UI5 Tooling 4.0.

This release has a strong focus on enabling UI5 2.x compatibility for projects. In addition, along with some important housekeeping, we introduced a new feature for automatically generating locale information in the manifest.json.

We are doing our best to minimize upgrade efforts for UI5 developers. Projects currently working with UI5 Tooling 3.x are generally expected to work with UI5 Tooling 4.0. More on this below.

Node.js and npm Requirements

UI5 Tooling 4.0 requires Node.js v20.11.0, v22.0.0, or higher.

This allows us to make use of the latest Node.js features and to upgrade dependencies requiring current Node.js versions.

Specification Version 4.0

This new major Specification Version comes with breaking changes that might have an impact on projects. Please carefully read the migration guide before applying the new version to your projects.

These changes are mostly related to how bundles are created in UI5 Tooling. Even if you do not use custom bundles, this might have an impact on the initial loading behavior of your application or library. These changes pave the road for future improvements on bundling in UI5. Stay tuned for more!

UI5 2.x

UI5 Tooling 4.0 along with the new Specification Version 4.0 is required for projects to utilize UI5 2.x.

When defining Specification Version 4.0 in your project, the code generated by UI5 Tooling will apply all the current best practices, such as consistently loading resources asynchronously and terminating the use of "eval()" (a common CSP violation). Both of which are prerequisites for projects to be compatible with UI5 2.x.

New Feature: Automatic Generation of Locale Information

In your application or library project, UI5 Tooling now analyzes existing manifest.json files. For any "i18n" and "ResourceModel" configuration, this ensures that the "supportedLocales" property is defined. If it is not defined, it is now filled in automatically based on the translation files present in the project.

This improves user experience by avoiding unnecessary requests at runtime. Without a defined set of "supported locales", the UI5 runtime has to determine the available translations by requesting individual files, often resulting in "404 Not Found" server responses.

Note that you can opt out of this behavior by defining the "supportedLocales" property yourself. The feature is active for both, the build and the server.

Learn more about this new feature in the builder documentation.

Upgrade Today

Upgrading to UI5 Tooling 4.0 is a straightforward task for most projects.

First, ensure that you meet the minimum required versions of Node.js and npm using the commands "node --version" and "npm --version". Make sure to also check your CI/CD workflows.

Then upgrade the UI5 CLI in your project by executing the following command:

npm i --save-dev @ui5/cli@latest

Also update your global install using:

npm i --global @ui5/cli@latest

You may already stop there, since updating the Specification Version remains optional.

However, if you want UI5 Tooling to apply the current best practices when building your project, also update the "specVersion" property in all ui5.yaml files to "4.0":

specVersion: "4.0"
[...]

Afterwards, test your project as usual. In case any problems come up, make sure to check our migration guide. And if you need further assistance, we invite you to raise an issue on GitHub.

Product Updates for SAP Build Code – July 2024 Edition

2024-07-24T13:07:05.262000+02:00

Dear SAP Community,

In our continuous efforts to enhance your application development experience, we're thrilled to introduce several new SAP Build Code features. Let me share with you some highlights of the latest releases.

Generative AI support for productivity tool

In SAP Build Code, our generative AI assistant Joule supports you with many developer tasks including generating data models and services, the application logic, and unit testing. We now allow you to use Joule where you need it: inside our productivity tools. You will find the little Joule icon is displayed besides the title of the Data Models and the Services tiles in the Storyboard. Opening Joule, you will see it supports you based on your current context. This means, when you are starting to enhance, for example, the data model Joule opens for exactly this purpose. You get an inline area, in which you can type your prompt. In addition, you will find a list of suggested prompts.

Joule icon in the data models and services tiles

Suggested prompts

Use Joule to enhance your already existing data models and services

We got the request to allow developers to use Joule to modify their already generated SAP Cloud Application Programming Model (CAP) data model or service entities. I’m happy to tell you that it is now possible to modify either the data model (schema.cds) or the service entities (service.cds), or both, using a prompt, and get the enhanced cds content.

With this new feature, it is now possible to:

add or remove an entity,
add, modify, or remove properties of entities,
create or remove associations between entities,
get more support on the service projection definition.

Step 1: Create your data model and services with the help of Joule

Step 2: Use Joule to enhance your data model

Result: Enhanced data model

Please read the documentation for further information about Generative AI-Powered Development in SAP Build Code.

Guided development for SAP Fiori app development

With SAP Fiori elements you can build your applications according to your specific requirements. It is one of the options available to develop SAP Fiori apps based on SAPUI5. In the guide center panel of your SAP Fiori Application project, you can now find an embedded tutorial for SAP Fiori app development. This tutorial describes step by step how to develop a custom page based on the flexible programming model.

Tutorial: Develop an SAP Fiori app on BTP

Graphical editor for hdbgrants files

When working with HDI hdbgrants files are used to define the permissions and access rights for users and roles within an HDI container in the SAP HANA database. In SAP Business Application Studio, the SAP HANA tools offer a graphical editor for hdbgrants files providing a convenient way of implementing cross-container or cross-schema scenarios. The syntax of hdbgrants files can be quite complex, hence this graphical editor can ease the development of such scenarios. Note that it is also possible to use the code editor or to toggle between code and graphical editor, depending on your personal preferences.

Graphical editor for hdbgrants files

The source of the privileges is a service instance containing information that can be used to grant privileges in the database. The editor lists the available service instances that are bound to the current project. A user can select which service instance should be used for the current file.

Privileges in hdbgrants files can be specified for two users: the HDI container’s object owner and the application user that is used by the application to connect to the database at runtime. The two tabs at the top of the editor allow selecting either user.

Individual privileges can be assigned on the available object types: global roles, schema-local roles, system privileges, schema privileges, object privileges, and global object privileges. The privileges can be granted either with grant option or without grant option. Grants with grant option are required for building database objects on top of other database objects. Since database objects in an HDI container should only be created by HDI (by means of the object owner user) the object owner should usually be granted privileges with grant option, while the application user only needs to perform DML operations on database objects and does not need the privileges with grant option.

For an easy way of keeping the privileges of the object owner and the application user in sync the editor allows copying the current privileges of the object owner to the application user via the “Copy properties to application user” button. When using this convenience feature all privileges that the object owner has with grant option are copied to the application user without grant option in order to set up the recommended permission model.

Further readings

You are still using SAP Business Application Studio and want to know, why you should change to SAP Build Code? Then I recommend reading this blog post written by my colleague Rupa Maity: Why SAP Build Code? Read this blog post written by my colleague Marc Huber to find out how to migrate content from SAP Business Application Studio to SAP Build Code.

In addition, I want to draw you attention to two other great blog posts:

Collaborate on your SAP Build Code project with your teammates! written by Rupa Maity

How to Develop SAP MDK Applications in SAP Build Code written by Liat Borenstein

For further information on new features, please check our roadmaps: roadmap for SAP Build Code, SAPUI5 Road Map. And have a look at What's New in SAP Build Code, the What's New Viewer for SAPUI5 and the SAP Cloud Application Programming Model Release Notes. If you want to stay up-to-date with news, learning resources, and product and strategy updates for SAP Build Code: follow our tag.

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

SAP UX Latest 2024 Innovations in Public Cloud: Joule, GenAI and More

2024-07-25T12:12:59.234000+02:00

We are taking SAP’s user experience to the next level by incorporating new AI design patterns into our products. These last six months our public cloud products have been leading the way, so let us have a look at concrete examples of how users can get their jobs done more easily thanks to these patterns for Joule and Generative AI (GenAI) in SAP SuccessFactors, SAP Analytics Cloud, SAP Ariba, SAP Customer Experience and SAP S/4HANA Cloud Public Edition 2408. In addition to AI patterns, our product teams have also invested in specific user experience improvements. Finally, our technology teams have made it easier to build UIs, leveraging GenAI built into SAP Business AI.

We are accelerating our use of AI in our user experience, to make work easier for users – so much so that you might even feel overwhelmed by all the new announcements and features across our portfolio! However, there are some fundamental patterns which we have identified and which our designers have baked into our SAP Design System. Understanding these patterns will help you understand how we are incorporating AI into our user experience. It will make it easier for you to put the many announcements of new AI-enabled features into context.

In this post, we’ll look at:

The AI design patterns, with concrete examples in our products.
User experience improvements in selected products.
UI technology innovations.

These are the AI design patterns we’ll be looking at, each with their own section:

Joule UX innovations, with a focus on the new informational pattern for customer documents provided by SAP SuccessFactors.
Triggering GenAI actions, such as
- Providing a summary of a given business object or context.
- Creating proposals, such as performance goals in SuccessFactors, or for a category segmentation in SAP Ariba.
- GenAI prompts within application UIs – for using natural language directly within the application.
- Guided AI Prompts – for example for writing assistants, so that users don’t have to worry about what prompt text to enter to get the desired result.

We expect these patterns to be used broadly across the SAP portfolio in the future; the examples below are from products which have adopted them first.

Transformational as AI is for the user experience, it is only a part of the overall interaction a user has with an application. Hence, in addition to introducing AI into our UI, we are continuing to work on ensuring that we provide a good overall user experience, by improving existing applications and by building new ones. In this post, I’ll give you a brief overview of some of the major innovations of the last six months, and provide pointers where you can find out more, in the sections:

User Experience Improvements in Selected Products
- SAP SuccessFactors
- SAP S/4HANA Cloud Public Edition 2408

The same goes for our UI technology, where we are embedding AI to make it easier to build applications with great UX – I’ll give you a brief overview along with pointers to more details, in the sections:

UI Technology Innovations
- AI-enabled UI Development
- Further UI Technology Highlights

Joule User Experience Innovations

Joule is your AI-enabled copilot for working with SAP, allowing you to use natural language to gain insights and achieve results. Today, it is generally available for SAP SuccessFactors, SAP Customer Experience, SAP Customer Data Platform, SAP Build Code, and SAP Integration Suite. It is also available to early adopters of SAP Start and SAP S/4HANA Cloud Public Edition. The navigational pattern (see below) is already available for SAP S/4HANA Cloud Private Edition.

First, let me recap the main interaction patterns provided by Joule, before introducing a new capability available today with SAP SuccessFactors.

Joule Interaction Patterns

Joule has these three interaction patterns, examples of which you can see in Figure 1.

Informational Pattern: allows you to query documentation with natural language, typically with a “How do I…” question. Joule provides concise summaries of content from documents, such as SAP documentation in the Help Portal, along with three links to the most relevant sections of the documents.

Navigational Pattern: Joule recommends relevant applications and facilitates seamless navigation to these applications – typically in response to a “Where can I…” question.

Transactional Pattern: Joule offers insightful information about business objects. It also allows you to make updates to business data directly within Joule, eliminating the necessity of opening the corresponding application.

Figure 1: Examples of each of the three interaction patterns for Joule: informational, navigational, and transactional, from SAP S/4HANA Cloud Public Edition (for early adopters). ALT Text: Three images of Joule are shown. On the left, the informational pattern shows that the user has typed “Can I configure a workflow for my purchase requisitions”. Below that, the eight-line written answer is shown, followed by a “Search results” selector and three top search results. In the middle, the navigational pattern, the user has typed “Where can I execute mass changes on my purchase requisition?”, below that, the reply from Joule “Here’s what I’ve found” is followed by a card containing three lines, each with an application name and an “Open” button. On the right the transactional pattern, the user has typed “Show Purchase Requisitions”, Joule responded with “Sure, here is what I found” and a card containing three lines, each with a PR number followed by an “Open” button.

New: Informational Pattern for Customer Documents

We have now extended the informational pattern to allow customers of SAP SuccessFactors to upload company policy documents which can be queried via Joule. This means that users can use natural language to ask a question, such as “What’s the expense limit for business meals in Germany?”, and Joule will provide a concise summary from the customer policy document(s). Not only that: Joule will also provide links to the relevant documents. Think about how much time you can save that way! Figure 2 shows an example, and Video 1 shows an example from 0:57 to 1:30.

Figure 2: Example of a user using Joule to query a customer expense policy document. ALT Text: The image shows the top part of the SuccessFactors home page with Joule as an overlay on the right. The user has typed in to the Joule chat “Can I use my private car for my business trip?”. Below that, Joule’s nine-line response is shown, followed by a link to the source document.

Technically, the customer documents that have been uploaded are grounded into the underlying AI large language model, which means that we can use the power of generative AI to extract information from these documents without the risk of hallucinations.

You can find out more about this new Joule use case supported by SAP SuccessFactors, along with a large number of new transactional use cases in the What’s New Viewer for 1H2024:

SAP SuccessFactors Documentation: New Use Cases Supported in Joule.

Have a Look at How Joule Energizes You at Work

Joule, your copilot for working with SAP, is intended to give users a natural language based single entry point (in the web or on mobile) for all their applications and business data – complementing the UI-based single entry point in the web provided by SAP Start, and the UI-based mobile entry point provided by SAP Mobile Start.

As such, Joule will also support many of the AI interaction patterns I listed in the introduction above. Indeed, already today you can see these patterns in action in Video 1 below:

Summary of a business object (in this case a customer account summary, combining data from SAP Sales Cloud and SAP S/4HANA Cloud).
Summary of customer requirements from an email message.
Transactional pattern: interacting with SAP Intelligent Product Recommendation, to get a best-fit product for the customer request.

Informational pattern for customer documents: a query to the company expense policy about how much employees can spend on dinner for entertaining a customer

Video 1: Joule in action for SAP Start, SAP Customer Experience and SAP SuccessFactors informational pattern for customer documents.

Joule also supports developers building new applications and their UIs, you can see an example of this towards the end of the blog post.

Watch these videos to see more examples of Joule in action for SAP Customer Experience (CX) and SAP S/4HANA Cloud:

Outlook

Here are some forward-looking statements about what we plan to deliver in the near future. As always, these are subject to change, but of course we hope to deliver as planned.

Towards the end of Q3/2024, we plan to make Joule generally available in SAP S/4HANA Cloud Public Edition, with the informational pattern available everywhere, and the other two patterns available for selected business areas.

Later this year, SAP Integrated Business Planning for Supply Chain and SAP Ariba Category Management plan to provide Joule integration.

Just as we have extended the informational pattern to support customer documents for SAP SuccessFactors, so we plan to provide this capability also for customer documents relevant to other products.

A major step forward planned for later this year is support for analytics in the transactional pattern, so that users can query analytics and get responses as charts. We also plan to incorporate GenAI into the major workflows of SAP Analytics Cloud – read more about this in:

Generative AI for planning and analytics – statement of direction.

So far Joule is only available in English. Later this year we plan to support further languages, including French, German, Spanish and Portuguese.

For more details, have a look at the road map for Joule in the SAP Road Map Explorer:

Joule Road Map

Triggering Generative AI Actions in the Application UI

A simple yet powerful way of helping users achieve better outcomes is to embed a generative AI action within an application UI, so that the system can for example generate a proposal based on initial data entered into the UI or already in the system. We can distinguish between the following kinds of actions:

Creating a written summary of existing business data, be it from an incoming email or data in the system, such as a customer account, a sales order or financial data.
Creating a proposal for new or updated business data or business objects, such as a performance goal for an employee, or a procurement category segmentation.

Creating a Summary of Business Data

I’d like to show you an example from SAP Customer Experience (CX) for creating an account summary, and two examples available now for Beta testing with SAP S/4HANA Cloud Public Edition: summarization of object pages, and financial business insights.

SAP Customer Experience Example

SAP Customer Experience offers users various AI capabilities for working more effectively, one of these being summarizing business data, for example summarizing an incoming email for SAP Service Cloud. This capability is also embedded in Joule. You can see examples of this, and more, in this video (the summaries are from 0:25 to 0:50):

Video: Generative AI for Intelligent CX Overview (2:37 minutes).

SAP S/4HANA Cloud Public Edition Examples

The following two examples are currently available as a Beta release.

Summarizing Object Pages

For all object pages which have been built with SAP Fiori elements, users can ask the system to summarize the business object. For example, if a manager sends an email asking for a summary of a sales order, the internal sales representative can use this feature to create a written summary, edit it as needed, and send it to their manager, saving a lot of time. Figure 3 shows what this looks like; you can also see it in action with this video:

Video: AI-assisted Smart Summarization of a Sales Order (1:10 minutes).

Figure 3: Smart summarization of a sales order in SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a popover above a sales order UI. The popover contains text with a title “Order Summary” and sections “Introduction”, “Date and Location” and “Key Highlights”. The bottom right of the screen has a “Copy All” button.

AI-Assisted Financial Business Insights

Interpreting financial data can be challenging, and explaining them in an easy-to-understand way even more so. Hence, we provide AI-Assisted Financial Business Insights, which make this task much easier. Figure 4 shows an example of how the system will provide a summary report of the financial data. You can see it in action here:

Video: SAP S/4HANA Public Cloud Edition AI-Assisted Financial Business Insights (1:20 minutes).

Figure 4: Summarizing financial reporting data in easy-to-understand language as provided by SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a table on the left with 27 lines and 5 columns of cost center information, and on the right a comprehensive summary with a heading and five paragraphs. The screenshot is overlaid top left by an explanation box with the text “Increase financial reporting efficiency with quick actions supported by generative AI”, and at the bottom with an explanation box with the text “the company seems to have increased costs in 2024 compared to 2023”.

Generating proposals for business data

Let me show two examples for this pattern available today, from SAP Success Factors and from SAP Ariba. Note that SAP Customer Experience also offers GenAI support for creating business data, as already mentioned in the previous section.

SAP SuccessFactors Example

SAP SuccessFactors now supports managers who need to formulate performance goals, by providing a “Generate” with AI action. Managers can provide a brief description of the goal, and SAP SuccessFactors not only generates a longer description, it also makes proposals for milestones, with a suitable task description along with start and end dates. Of course, goals need to be well thought out by managers; nevertheless, having an initial starting point, especially with a break-down of potential goals on a timeline, can be very helpful, especially for less experienced managers. Figure 5 shows an example which showcases our AI button with the AI icon (to the left of the “Generate” text in the button).

Figure 5: Example from SAP SuccessFactors of an AI action for triggering generative AI to help managers formulate performance goals, along with suitable milestones. ALT Text: an animation showing how a user can enter the text “AI strategy for our production plant by Q4” and then click on the “Generate” button, which features the AI icon on the left. The result is a form with a goal description and metrics, followed by a table with proposed milestones and their start and end dates.

SAP Ariba Example

SAP Ariba Category Management also provides an additional AI action for creating a procurement category segmentation from scratch. As in the previous example, a Generate button with the AI icon is used, see Figure 6.

Figure 6: Example from SAP Ariba Category Management of an AI action for triggering generative AI to help create a category segmentation. ALT Text: an animation which starts with a screen with an illustration and text “No Segmentation to Display”. The user clicks on a button which features the AI icon before the text “Generate”, and the result is a proposed category segmentation chart on the left with a text summary on the right.

Generative AI Prompt within Application UI

We can go a step further than the simple AI action by letting users use natural language to interact directly with the application UI. We do this by enabling them to enter a prompt directly in the UI.

Since most users will not be familiar with formulating powerful GenAI prompts (prompt engineering), we use this simple input field in cases where it is obvious to the user what kind of input is expected.

The first example I’d like to share is the powerful “Just ask” feature now generally available with SAP Analytics Cloud. You can use natural language to create a query, and SAP Analytics Cloud uses AI to interpret the text as well as to decide on the most appropriate chart to use to visualize the result. Figure 7 shows an example.

Figure 7: “Just ask” in SAP Analytics Cloud. ALT Text: the user has entered “gross margin product”, and the appropriate chart representation (a horizontal bar chart) has been used to display the gross margin per product on the left. On the right you see that the system gives suggestions for suitable texts in buttons, which when clicked enter the text displayed in the button. The first such proposal shown is “Gross Margin per Category”. There is also a “Save question” section with a button with the text “gross margin product”.

The next example is now available as a Beta in SAP S/4HANA Cloud Public Edition, allowing users to use natural language to filter lists, as an alternative to using the individual filter fields in the filter bar. The AI icon in the “Go” button indicates to users that AI is behind this functionality. Figure 8 shows an example for sales orders.

Figure 8: Using natural language to filter a list of sales orders in SAP S/4HANA Cloud Public Edition (available as a Beta). The user has entered the text “Show me all open sales orders for December 2023”, the list only shows entries matching this query. ALT Text: the image shows a list report. At the top there is a toggle for the filter mode, with the options “Classic” and “SAP Business AI”. Below that, a disclaimer text, that generated content may not always be accurate. Below that, the text field for the query, to its right a button which features the AI icon before the text “Go”. Below that, the result list with 11 lines and 8 columns.

Technically, this feature is provided by applications built with SAP Fiori elements using OData V4. You can watch an example here:

Video: SAP S/4HANA Cloud Public Edition, AI-Assisted Easy Filter (0:51 minutes).

Guided AI Prompts

Creating good text proposals with Generative AI requires good prompts – something which most users of business systems have no or little expertise in. Hence, we have come up with guided AI prompts, which give users a UI element that allows them to tweak the kind of outcome they want, so that users don’t have to worry about what prompt text to enter to get the desired result.

SAP Customer Experience Example

Figure 9 shows how SAP Customer Experience enables service and support users to easily create response emails, in this case with sliders to influence the style, tone and length. As you can see, users don’t need to know exactly what kind of generative AI prompt text is needed, they can simply adjust the sliders to get the desired outcome – which they can of course further edit if needed.

Figure 9: Guided AI Prompt from SAP Customer Experience, showing the sliders for choosing the style, tone and length of the email on the left and a possible generated draft email text on the right. ALT Text: the slider and draft mail are visualized as a popover. Below the sliders there is a button which features the AI icon before the text “Generate Draft”. The popover has a language selector top right, with English now chosen, and “Apply” and “Cancel” buttons bottom right.

SAP SuccessFactors Writing Assistant

Managers often need to write text, be it formulating goals or giving feedback – but not everyone is a gifted writer! SAP SuccessFactors has found a novel way for generative AI to assist users in their writing. Figure 10 shows the approach, with an example where a manager is giving feedback to an employee. The “Give feedback” UI already provides good usability, by helping the manager formulate the main aspects (what went well?, what could I improve on?, any additional comments).

The new Writing Assistant takes this to the next level: by marking the text, a context menu appears, as you can see on the left in Figure 10; clicking on the AI icon brings the drop-down menu shown in the middle, where the manager can choose from various options to adapt the text with generative AI. On the right you see how the Writing Assistant shows you the original text and the suggested new text – in this case improving the original text, in particular by replacing “…they can be difficult” with “…even though they can sometimes be challenging”.

User Experience Improvements in Selected Products

This section gives updates on our Web Entry Point, SAP SuccessFactors, and SAP S/4HANA Cloud Public Edition. I'll keep this section fairly short, and mainly point you to sources where you can find the details.

Web Entry Point: SAP Start, SAP Build Work Zone, SAP Task Center

SAP Start is now integrated with SAP Fieldglass, which provides two insight cards. Also, SAP SuccessFactors has provided three additional insight cards for SAP Start – read more here:

What’s New for SAP Start – May 2024

The SAP Task Center now provides APIs for integrating tasks from 3rd-party products. Read more about it here:

SAP Task Center’s New 3rd Party Integration

SAP Build Work Zone, advanced edition also has a number of enhancements:

What’s New in SAP Build – Q2 2024 Edition

SAP SuccessFactors

The 1H2024 release comes with a large number of UX innovations across the whole portfolio. To get the complete picture, have a look at these two blog posts:

Here, I would like to highlight the new design for the organizational chart, along with the new user experience for the people profile, with a brand new public view of your profile (public within your company) consisting of Profile Preview and Spotlight, along with more intuitive user interactions.

Figure 11: The new org chart in SAP SuccessFactors. ALT Text: The image shows an org chart, with each employee summarized in a box with their image on the left and their name and job role on the right. The image has a manager “Christine Dolan” at the top, below which another manager “Charles Braun” is shown, with his direct and indirect reports shown underneath: direct reports linked with and surrounded by a solid line, dotted-line ones linked with and surrounded by a dotted line.

Employees can build and represent their personal brand by showcasing skills and competencies, mentoring and target roles, and other relevant information sourced from SAP SuccessFactors solutions.

Colleagues who look at the org chart can get a quick preview of a user’s profile with the Profile Preview, shown in Figure 12, and get more information using the Spotlight, shown in Figure 13.

Figure 12: SAP SuccessFactors "Profile Preview", shown on the right. ALT Text: The image shows the preview as a popover on the right of the screen, with a photo of Aanya Singh and a “Show Spotlight” button next to it along with a button for opening the Org Chart. Below that, her role and organization are shown, along with some text she provided about herself, a photo, name and organization of her direct manager, and a link to “All Actions”.

Figure 13: SAP SuccessFactors "Spotlight". ALT Text: the image shows the Profile Preview of Aanya Singh on the left, but with the button “Hide Spotlight” instead of “Show Spotlight”. On the right, the rest of the screen shows her skills, competencies, who she is mentoring, her organization, an about me video, upcoming absence, work experience, reporting line, target roles and badges for good performance.

SAP S/4HANA Cloud Public Edition 2408

The latest release of SAP S/4HANA Cloud Public Edition comes with a large number of new AI-enabled user experience enhancements, such as the smart summarization and easy filter, which I explained earlier. To get an overview of all of these, read this summary, or watch Arpan Shah, Head of Product Management for SAP S/4HANA Cloud Public Edition, introduce them all at this year’s SAP Sapphire conference:

Summary: Unlock Tomorrow’s Potential with SAP S/4HANA Cloud Public Edition
SAP Sapphire Video: ERP127 – SAP S/4HANA Cloud Public Edition: Find out what’s next.
Blog post (look at the “Modern and Intelligent Experience” section): Highlights of the SAP S/4HANA Cloud Public Edition 2408 Release.

As I mentioned in the introduction, AI is only a part of the overall interaction a user has with an application. I’d like to highlight these new innovations in the user experience for SAP S/4HANA Cloud Public Edition:

Spaces and Pages replace the classical SAP Fiori launchpad group-based visualization, so all customers are automatically enabled to use My Home.
My Home: To-Dos task cards show details, and AI makes suggestions for a users’ favorites (see Figure 14 below).
Collaborative ERP: further Microsoft integration with Adaptive card-based Loop components and integration with Microsoft Copilot as a Beta release – see below for more information.
Change Management: we are introducing a toggle to allow users to switch from the existing version of an app to a new version, starting with selected apps.

My Home

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

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

Figure 14: New features of My Home in SAP S/4HANA Cloud Public Edition: the To-Dos task cards show details, and AI makes recommendations for applications which are likely to be relevant to the user. ALT Text: the image shows three To-Do cards at the top, each with header text “Approve Purchase Requisition” followed by the number, below that the name of the requestor, item description, net value, requisition date and requestor. Each card has an “Approve” and “Reject” button. Below that, the Apps section has a new tab “Recommended” with an information banner below it explaining that “Here you can see applications that are recommended to you by SAP Business AI. You can choose to disable this tab using the settings”. Below that, two rows of five apps with their icons are shown. The bottom of the image shows parts of the News (on the left) and Pages (on the right) sections.

As well as the above, My Home now provides:

To-Dos now also shows custom Situations, created using the extended Situation Handling framework, in addition to the standard situations delivered by SAP.
Intelligent generation of pre-delivered cards for new cloud customers.
Drag & drop is now enabled in the insights section, so you can directly rearrange your tiles and cards.
Information about deprecated apps.

Collaboration with Microsoft Copilot and Microsoft Loop Components

We already enable users to collaborate via Microsoft Teams, embedding applications in chats or as tabs in Teams channels. We are taking this to the next level, available for Beta testing with the 2408 release, by:

Informing users about to-dos via notifications in Microsoft Teams;
Enabling embedding of interactive cards with information and actions from SAP S/4HANA Cloud Public Edition directly into Microsoft Teams, Outlook and Copilot. The data and actions are only shown to users with the necessary authorizations in SAP S/4HANA Cloud Public Edition. Technically this is done via adaptive card-based Loop component; Figures 16 and 17 show examples.
Even more powerful: we have started integrating Microsoft Copilot with Joule, combining enterprise data residing in SAP with contextual knowledge from Microsoft 365, including Microsoft Teams, Microsoft Outlook, Microsoft Word, and more, helping to deliver richer insights for better decision-making.

Figures 15 and 16 show an example of integration with Microsoft Copilot and Microsoft Outlook. Figure 15 shows the response to Alice’s request to Copilot for details of a sales order, where you can see the written summary along with the adaptive card containing details, links and action buttons. Users can easily copy these adaptive cards into an Outlook e-mail or a Teams chat, using the copy button shown in Figure 15.

Figure 16 shows what it looks like if you receive an email containing an adaptive card – the example shows Frank’s inbox, with the e-mail that Alice sent him by copying the adaptive card shown in Figure 15. Frank can see the card with the details, links and action buttons.

To see it in action, watch this:

Video: Microsoft Copilot Integration for SAP S/4HANA Cloud Public Edition (2:25 minutes).

Figure 15: An example of how a user (Alice) can use Microsoft Copilot to interact with SAP S/4HANA Cloud Public Edition. The image shows a summary of a sales order, with a card containing information about the sales order, including the action button “Remove Billing Block”.

Figure 16: An example of an adaptive card embedded in an Outlook email. The user Frank received an email from Alice requesting that he remove the billing block. ALT Text: the email contains text “Hey Frank, can you please help to get this sales order processed asap. Please remove the block!”, followed by a long URL to access the sales order, and the adaptive card with the heading “SAP S/4HANA Cloud”, the sales order number as a hyperlink, sales order details and two action buttons at the bottom “Set Billing Block” and “Remove Billing Block”.

If you are interested in trying this out via the Beta testing program, you can register here.

UI Technology Innovations

Before showing you the latest innovations, I would like to introduce the new SAP Application Extension Methodology, and in particular the Extension Architecture Guide, which is for enterprise architects and solution architects that are already familiar with SAP's extensibility concepts and are seeking comprehensive decision-making guidance with an emphasis on the SAP Business Technology Platform. The section Presentation Tier Guidance summarizes SAP’s guidance for the extension task "create custom user interface (UI)", which addresses the need to develop a new custom UI, tailored to meet specific business requirements.

This year, we have invested heavily in supporting developer extensibility for SAP S/4HANA Cloud Public Edition. Learn more about it here:

Blog post: Extending SAP S/4HANA Cloud Public Edition using SAPUI5 adaptation projects.
Documentation: Extending an SAP Fiori Application for S/4HANA Cloud Public Edition and SAP BTP, ABAP Environment.
Documentation: SAPUI5 Flexibility (covering end-user personalization, key-user personalization and developer adaptation).

AI-enabled UI Development

SAP Build Code brings AI-enablement for application developers on SAP Business Technology Platform, giving you:

Guided development to quickly build SAP Fiori apps: web, mobile and full-stack.
Built-in guidance and SAP best practices for developers to create enterprise-grade applications.
Visual tools and a programming language of your choice: JavaScript, TypeScript, Java and more.

With generative AI in SAP Build Code, you get the following:

Joule auto-generates app logic and data models.
Automated unit test coverage.
Contextual application logic code generation based on prompts.
Automatic sample data generation.

SAP Fiori tools go even further, allowing you to describe the list report and object page application you would like to create, and then automatically generating the data model , CDS views, OData services as well as the SAP Fiori elements UI. Figure 17 shows how you can use natural language to describe the application you want to build, in this case taking the example available in the documentation and copying it into Joule. Figure 18 shows the outcome: the data and code assets visualized in SAP Build Code as well as the resulting application UI list report and object page. Read more about this, and see it in action, in this blog post:

SAP Fiori tools 2403 introduces Gen AI capability and more.

Figure 17: Using Joule with SAP Fiori tools to describe the SAP Fiori elements application you want to create, in this case taking the example text from the documentation. ALT Text: the image contains three screenshots. On the left the documentation, in the middle Joule with the initial lines of the documentation text entered, on the right Joule with the final lines of the documentation entered, where the field names are listed in the order they should appear in the list report.

Figure 18: The resulting data and code assets visualized in SAP Build Code as well as the resulting SAP Fiori elements application UI consisting of a list report and an object page. ALT Text: the image contains three screenshots. On the left SAP Build Code showing the generated entities; in the middle the generated list report UI with five lines of data; on the right the generated object page with the header and a “Contract Details” section containing nine fields.

In case you need more flexibility than provided by the SAP Fiori elements patterns, we also provide AI-enablement for freestyle SAPUI5. Read about it in this blog post:

Joule for freestyle SAPUI5 development in SAP Build Code.

Further UI Technology Innovations

Here are some further new capabilities I’d like to bring to your attention.

New features of SAP Fiori elements based on OData V4, explained in this blog post:

Unlocking Efficiency and Simplicity: A Look into the New Features of SAP Fiori Elements for OData V4 – the new features are:
- Support for recently entered values dropdown.
- Open object page in edit mode.
- Merging section and subsection title to reduce unnecessary white space.

If you program the UI of your new application using SAPUI5 and the flexible programming model, you’ll want to ensure good code quality. To help you with that, we bring you UI5 linter, a powerful static code analysis tool:

Introducing UI5 linter.

These blog posts introduce further interesting new features or offerings:

Final words

For more information about our AI innovations, have a look at this article from Philipp Herzig, our Chief AI Officer:

SAP’s New AI Innovations and Partnerships Deliver Real-World Results.

We’re looking for your feedback on the SAP Fiori design guidelines, how we communicate updates / news - in other words, on our communication strategy for the SAP Design System. Please take a few minutes to fill out this little survey:

SAP Design System: Communications Strategy Survey.

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

For general information on design at SAP and SAP Fiori, check out: