Technology Blog Posts by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

SAP User Experience Q1/2025 Update – Part 7: UI Design and Technology for Web and Mobile

ThomasReiss
Product and Topic Expert
Product and Topic Expert
‎2025 Mar 05 10:55 AM
1,830

This seventh and last post in my series gives an overview innovations in our UI technologies, making it ever easier to build and integrate UIs, for both web and mobile applications. First, we now provide tools to develop your own Joule agents, so that you can extend users’ Joule experience. Second, we use AI to help developers become more efficient and effective:  using Joule and AI for developing UIs, for both SAP Fiori elements based UIs as well as freestyle SAPUI5. Beyond AI, we have further interesting news – focussing on quality with UI5 linter 1.0 now available, as well as web and mobile news.

If you haven’t already read it, do have a look at the introduction post to this series, which covers latest UX innovations for Joule as well as central entry points and services (SAP Start / SAP Work Zone, SAP Task Center,  SAP Mobile Start):

 

News for Creating Web UIs

In the last few years we have invested heavily in making it easier for customers and partners to extend the scope of their SAP landscapes, either by adapting and extending existing applications or by building completely new ones. SAP S/4HANA Cloud Public Edition offers a range of options: you can create UI adaptations, extensions, and custom apps that run on-stack within the product itself and/or create custom apps and automations that run side-by-side on SAP Business Technology Platform (SAP BTP). For more information, see

Recently, we have focussed on supporting developer extensibility for SAP S/4HANA Cloud Public Edition. Learn more about it here:

SAPUI5 adaptation projects have been enhanced with an improved experience:

  • New Adaptation Editor: Streamline your SAPUI5 extensions with the new Adaptation Editor in SAP Build Code. To improve the experience and harmonize the editors across different environments, SAP Business Application Studio now features the new Adaptation Editor, replacing the SAPUI5 Visual Editor. Developers benefit from its intuitive experience and improved performance. Have a look at this blog post:

SAPUI5 flexibility offers capabilities to extend standard apps, not only for developers but also for key users and end users. Developers leverage adaptation projects in SAP Business Application Studio, the development environment of SAP Build Code. While adaptation projects are the strategic, advanced technology for code-based extensions of SAPUI5 apps, we also have the predecessor extension projects. To address frequent confusions, see the differences explained here:

Customers and partners can extend the SAP Fiori launchpad: we support more launchpad-related object types in the ABAP development tools for Eclipse, and also provide a new Developer Guide for SAP Fiori Launchpad. Read more about this here:

We have also recently published the 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.

Creating Joule Experiences

Joule is our generative AI copilot for the SAP Business Suite, allowing users to use natural language to interact with products from wherever they are working. As such, Joule provides a great new user experience – one which we want customers and partners to also be able to leverage when extending SAP solutions. That is why we have created Joule Studio.

This becomes even more powerful for customers and partners with our recent announcement of SAP Business Data Cloud, which makes the foundation for Joule agents even stronger, since AI agents are only as powerful as the data in which they are grounded. Also, SAP Knowledge Graph serves as the semantic bridge between Joule agents and SAP Business Data Cloud. SAP Knowledge Graph reveals the connections between data and processes, helping Joule agents find all the most relevant data to ground their decisions and actions.

Joule Studio in SAP Build lets you create your own Joule agents, as you can see in this video:

 

To learn more about Joule and Joule Agents, have a look at:

For a more in-depth video showing how you can extend your SAP Solution with Joule Studio, watch this video by Vivien Boche:

AI-assisted UI Development

Developers can now be far more productive with AI assistance, built in to SAP Build Code: both for creating simple SAP Fiori elements based applications as well as for UI5 freestyle development. Also, you can now use Joule to help you migrate SAPUI5 apps to TypeScript. If you want to get started with this, have a look at this Mission in the SAP Discovery Center:

Create SAP Fiori Elements Apps From a Sketch

The SAP Fiori tools project accelerator enables developers to create CAP-based (Cloud Application Programming model based) SAP Fiori elements applications directly from an image of the intended outcome. These images can be high fidelity Figma models, lower fidelity screenshots or a sketch on paper. Simply upload the image and use AI to generate the data models, services and the UI. Figure 1 explains this; you can watch a preview in the TechEd video I recommended above.

SAP Fiori tools is available via SAP Build Code, in the SAP Business Application Studio.

Figure 1: Generate a complete CAP-based application from a sketch with SAP Fiori tools project accelerator: data models, services and UI. ALT Text: An image showing on the left three images representing a list shown in a tabular form below a filter bar with five fields: the first image is from a high fidelity Figma model, the second a lower fidelity screenshot, the third a sketch on paper. On the right, the left side of a developer’s screen showing the SAP Fiori tools project accelerator is shown, with a thumbnail for the uploaded sketch image.Figure 1: Generate a complete CAP-based application from a sketch with SAP Fiori tools project accelerator: data models, services and UI. ALT Text: An image showing on the left three images representing a list shown in a tabular form below a filter bar with five fields: the first image is from a high fidelity Figma model, the second a lower fidelity screenshot, the third a sketch on paper. On the right, the left side of a developer’s screen showing the SAP Fiori tools project accelerator is shown, with a thumbnail for the uploaded sketch image.

Joule for SAPUI5 Freestyle Development

Joule can be used to both accelerate the development and provide support for those who are not (yet) UI5 experts:

Joule for Migrating SAPUI5 apps to TypeScript

Joule's latest feature offers an AI-driven migration of UI5 applications to TypeScript, which, compared to JavaScript, enables  improved development efficiency as well as code quality. See the details in

UI5 linter released

A big step towards improving code quality for SAPUI5 apps is now generally available:  UI5 linter 1.0. It is a static code analysis tool which helps ensure that you have good quality code, and which saves you a lot of time debugging later by catching issues up front. It can check for problems such as the use of deprecated UI5 libraries, framework APIs etc. as well as the usage of global variables and possible CSP violations. Find out more in this blog post:

Designing SAPUI5 Apps as Business Solution for SAP Build Work Zone

This new guide gives a lot of technical insights into SAPUI5 apps running on SAP BTP: you will learn how to structure complex SAPUI5 applications to avoid common pitfalls, how multiple apps work with a shared reuse library and how to integrate business solutions as content providers into SAP Build Work Zone:

Enhancements for SAP Fiori Elements with OData V4

We have recently introduced these new features for developers using SAPUI5 and SAP Fiori elements on OData V4, which are covered in the following subsections:

  • Support for mass change functionality.
  • Support for object creation via a dialog.

Support for Mass Change Functionality

When developing with SAP Fiori elements with OData V4, you can now use the feature which allows users to select multiple entries in a table and assign new values to fields in all the selected entries in one go. Figure X shows an example, where three sales order items in SAP S/4HANA Cloud Public Edition have been selected for editing:

Figure 2: Mass changes supported by SAP Fiori elements with OData V4. ALT Text: A screenshot of a sales order greyed out in the background with six items, three of the items selected via checkbox. In the foreground a popover “Edit Items (3)” is shown, with a list of six fields such as Product, Requested Quantity, Item Category. Below each of these labels a data entry field with a drop-down option is shown, containing the text “< Keep Values >”.Figure 2: Mass changes supported by SAP Fiori elements with OData V4. ALT Text: A screenshot of a sales order greyed out in the background with six items, three of the items selected via checkbox. In the foreground a popover “Edit Items (3)” is shown, with a list of six fields such as Product, Requested Quantity, Item Category. Below each of these labels a data entry field with a drop-down option is shown, containing the text “< Keep Values >”.

Support for Creating New Objects via Pop-Over Dialog

When developing a list report and object page with SAP Fiori elements with OData V4, you can now choose to provide users with a pop-over dialog window for creating a new object, in cases where only a few fields need to be entered, at least to start with. This offers users a quicker way of creating objects for such use cases, as well as keeping them on the list screen. When using the standard approach, users are brought to the object page screen for maintaining the data. Figure 3 shows an example from a test app.

Figure 3: Object creation via pop-over dialog supported by SAP Fiori elements with OData V4. ALT Text: A screenshot of a test application greyed out in the background with a list report showing travels. A popover “New Object” is shown in the foreground with a list of five data-entry fields. Four of these are marked as mandatory: “Agency ID”, “Customer”, “Starting Date”, and “End Date”. The fifth field shown is “Description”.Figure 3: Object creation via pop-over dialog supported by SAP Fiori elements with OData V4. ALT Text: A screenshot of a test application greyed out in the background with a list report showing travels. A popover “New Object” is shown in the foreground with a list of five data-entry fields. Four of these are marked as mandatory: “Agency ID”, “Customer”, “Starting Date”, and “End Date”. The fifth field shown is “Description”.

Further News for Web Designers and Developers

I would also like to point you to the updated SAP BTP Developer’s Guide, where we have now brought in user experience design advice, as well as restructuring it to cover Explore, Discover, Design, Deliver and Scale & Run phases:

The developer’s guide recommends using SAPUI5 and SAP Fiori elements, built on OData services,  for developing UIs. Should you not be able to follow this recommendation because you have existing applications using different protocols or frameworks, we have options to help you nevertheless:

For friends of ABAP, we recently introduced the ability to create Fiori elements apps directly from within the ABAP Development Tools (ADT). Find out more here:

 

News for Mobile Designers and Developers

The main news for mobile designers is the latest releases of the mobile Figma design kits for Android, iOS, WatchOs and WearOS.

Developers get new features with the latest releases of the mobile SDKs, as well as the integration of the Mobile Development Kit (MDK) into SAP Build Code. Here are links to find out more about the SDKs:

The MDK brought in the following updates with the last two releases:

    • New SAP Fiori ActionBar
    • Built in File Viewer for PDF, Text, Images and Media Files on Android.
    • Integration with SAP BTP AI Core Service to leverage Chat Completions API from various LLM providers.

The mobile SDKs for iOS and Android also continue to be enhanced regularly, with numerous SAP Fiori UI enhancements:

For a deeper dive, watch the recordings of the Devtoberfest sessions on developing mobile apps:

 

Final words

As you can see from all seven posts in the series, we are progressing rapidly with the user experience of our product portfolio as well as with the enabling technology and guidelines for designers and developers.

Part 1 of the series lists all the parts, and links to those parts that have already been published:

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:

2 Comments