SAP Community - SAP Fiori

Use custom Fiori Theme during BAS preview

2024-09-30T10:41:42.095000+02:00

Hello everyone,

in this brief blog, I’ll walk you through how to preview your custom UI theme in SAP Business Application Studio (BAS) during app development. Instead of covering here the steps to create a custom theme, you can refer to this detailed blog: How to create new custom theme in Fiori?

Exporting Your Custom Theme

Once you’ve created your custom theme, the UI Theme Designer allows you to export all its contents as an archive file. To export, simply select your theme and click on the Export option.

In the export dialog, expand the Optional Settings (for Experts) section, and choose the following options:

Source Files + CSS Resources + Base Theme Resources
SAPUI5 (UI development toolkit for HTML5)

The exported archive contains your custom theme (located under \UI5\sap\fiori\themes), along with the base theme files.

Importing Your Custom Theme into BAS

In BAS, you can import your custom theme into any folder of your choice (for example, into /home/user/projects). To do this, simply drag and drop the folder from your local file explorer directly into the BAS workspace.

Using Your Custom Theme During App Preview
To preview any app in BAS with your custom theme, follow these steps:

1-- In the webapp/test/flpSandbox.html file

Modify the data-sap-ui-theme property by setting it to the ID of your custom theme.
Example:

data-sap-ui-theme="demo_theme"

Add the data-sap-ui-theme-roots property to define the root path for your theme. Set it using the custom theme ID and an alias of your choice.
Example:

data-sap-ui-theme-roots='{"demo_theme" : "myCustomTheme/UI5"}'

2-- In the ui5.yaml file

Add a redirection for all network calls related to your custom theme by using the fiori-tools-servestatic middleware.

Example:

- name: fiori-tools-servestatic
      afterMiddleware: compression
      configuration:
        paths:
          - path: /myCustomTheme
            src: /home/user/projects/demo_theme

3-- Launch the preview

Launch the app preview by running the webapp/test/flpSandbox.html file to view your custom theme. You can do this by using the command:

npm run start

And voilà! You custom theme is visible during the app preview in BAS:

Known Issue with SAP Fonts
Depending on your version of the UI Theme Designer, you may encounter issues with certain icons disappearing. This occurs because these icons rely on SAP fonts, which are not managed correctly during export in UI Theme Designer versions prior to 1.63. This problem is discussed here: UI5 Theme Designer: Failed to decode downloaded font

Thanks for reading!

Enhancing Flexibility with OData V4 Calls from the Controller in SAP UI5

2024-09-30T10:48:12.566000+02:00

Enhancing Flexibility with OData V4 Calls from the Controller in SAP UI5

Hey!

In this blog, we will explore how to dynamically handle OData V4 calls from the controller in SAP UI5. While OData V4 provides many advantages like Improved Performance, Asynchronous Operations and Better Support for Complex Data, the default binding mechanism in SAP UI5 often limits flexibility in manipulating data after it's received. By making the OData calls directly from the controller, you can achieve greater control and flexibility.

Let's dive into how CRUD operations can be managed for OData V4 through the controller using pseudo-binding.

Before we start with CRUD operations, we need to set up the OData V4 model in your SAP UI5 application. This involves configuring the manifest.json file for both the data source and the model.

Define the Data Source in manifest.json:

In your manifest.json file, under sap.app, define the data source for your OData V4 service:

"sap.app": {
	"id": "your.app.id",
	"type": "application",
	"dataSources": {
		"yourODataService": {
			"uri": "/path/to/your/service/",
			"type": "OData",
			"settings": {
				"odataVersion": "4.0"
			}
		}    
	}
}

Define the Model in manifest.json:

Now, under sap.ui5, define the model for the data source you just set up.

"sap.ui5": {
	"models": {
		"yourODataModel": {
			"type": "sap.ui.model.odata.v4.ODataModel",
			"settings": {
				"autoExpandSelect": true // Optional: Expand navigation properties automatically
			}
		"dataSource": "yourODataService"
		}
	}
}

Assign the Model to a Variable in controller:

var oModel = this.getOwnerComponent().getModel("yourODataModel");

Creating the Binding

OData V4 offers three types of bindings: ListBinding, ContextBinding, and PropertyBinding. These can be utilized in the controller for creating a pseudo-binding. In this blog, we will focus on ContextBinding and ListBinding.

ContextBinding

var oContextBinding = oModel.bindContext(
    "/entityPath/contextName(requestedContextId)/",        //sPath
    null,                                                  //oContext
    {                                                      //mParameters                   
        "$expand": "navigationProperty",
        "$select": "property1,property2"
    }
);

ListBinding

var oListBinding = oModel.bindList(
    "/entityPath",                              //sPath
    null,                                       //oContext
    null,                                       //vSorters - Dynamic Sorters 
    null,                                       //vFilters - Dynamic Filters 
    {                                           //mParameters                   
        "$expand": "navigationProperty",
        "$select": "property1,property2"
    }
);

CRUD Operations

READ

Fetching a Specific Context:

oContextBinding.requestObject().then((oData) => {
	//Handle success
})
.catch((err) => {
	//Handle error
});

Fetching a List of Entities:

oListBinding.requestContexts().then((oListContext) => {
	oData = oListContext.map(rowContext => rowContext.getObject());	
	//Handle success
})
.catch((err) => {
	//Handle error
});

DELETE

oContextBinding.requestObject().then((obj) => {
	oContextBinding.delete().then(function(){
			//Handle success
		})
		.catch((err) => {
			//Handle delete error
		});
})
.catch((err) => {
	//Handle read error
});

UPDATE

When performing an update, you can either execute it immediately or group multiple updates together using updateGroupId and submit them in a batch. If you don't pass the updateGroupId, the update will be called immediately. However, if you want a group of update calls to be executed together, you assign an updateGroupId to each call and then use submitBatch to send all updates at once.

Immediate Update Call (without updateGroupId):

oContextBinding.requestObject().then((oObject) => {
	if (oObject) {
		var keys = Object.keys(oObject);
		for (var i = 0; i < keys.length; i++) {
			if (oObject[keys[i]] !== oRequestBody[keys[i]]) {
				oContextBinding.setProperty(keys[i], oRequestBody[keys[i]]).then(function(){
						//Handle success
					})
					.catch((err) => {
						//Handle update error
					});
			}
		}
	} 
})
.catch((err) => {
	//Handle read error
});

This will trigger the update immediately for each property that is changed.

Batched Update Calls (with updateGroupId):

If you want to group updates into a batch, you can pass the updateGroupId("sUpdateGroupId") parameter:

oContextBinding.requestObject().then((oObject) => {
	if (oObject) {
		var keys = Object.keys(oObject);
		for (var i = 0; i < keys.length; i++) {
			if (oObject[keys[i]] !== oRequestBody[keys[i]]) {
				oContextBinding.setProperty(keys[i], oRequestBody[keys[i]],"sUpdateGroupId").then(function(){
						//Handle success
					})
					.catch((err) => {
						//Handle update error
					});
			}
		}
	} 
})
.catch((err) => {
	//Handle read error
});

After setting all the properties using the same updateGroupId("sUpdateGroupId"), you need to submit the batch to execute all updates together:

oModel.submitBatch("sUpdateGroupId").then(function () {
	//Handle success
})
.catch((err) => {
	//Handle error
});

This will execute all the grouped updates in one network call, improving efficiency by batching them.

CREATE

var oContext = oListBinding.create(oRequestBody);
oContext.created().then(function () {
	var oData = oContext.getObject();
	//Handle success
})
.catch((err) => {
	//Handle error
});

Conclusion

By handling OData V4 calls directly from the controller, you gain significant flexibility to manipulate data as needed in your SAP UI5 applications. This approach allows you to leverage SAP UI5 controls more effectively, while maintaining performance and making the most of OData V4's capabilities such as asynchronous operations and batch processing.

If you're looking to implement more complex data manipulations or optimize performance in your SAP UI5 apps, using controller-based OData V4 calls is a powerful solution. Feel free to explore these concepts in your own projects and customize them further based on your specific needs.

If you have any questions or would like to share your own experience with OData V4, I’d love to hear your thoughts in the comments below.

Happy coding!

Release of UI5 linter v1.0

2024-09-30T17:00:00.043000+02:00

UI5 linter is a static code analysis tool for UI5 projects, which was introduced by Oliver Graeff earlier this year in his blog post. After gathering community feedback over the past months and adding further detection features, we are happy to announce the official release of UI5 linter v1.0.

Features

In this release, UI5 linter can detect the following problems in your UI5 project:

Usage of deprecated UI5 libraries
Usage of deprecated UI5 framework APIs
Usage of global variables
Possible CSP violations
Deprecated component and manifest configurations

You can control which files should be linted by using include and exclude patterns. By default, UI5 linter will analyze all relevant UI5 resources in your project. This includes JavaScript (or TypeScript) files, XML views, the manifest.json, and the ui5.yaml.

For a comprehensive list of features in this release, also see our Roadmap: v1.0.0.

You can find the latest Best Practices for Developers at https://ui5.sap.com/#/topic/28fcd55b04654977b63dacbee0552712

Restrictions

While UI5 linter already provides many detections, it is not yet covering all aspects and best practices for UI5 2.x. The intention of UI5 linter is to detect as many problems as possible that a project running with UI5 2.x might be facing. However, you’ll still need to test your project with UI5 2.x as soon as it is made available. To reveal additional problems, the UI5 team plans to release more versions of UI5 linter over the next months.

UI5 linter currently has the following prominent restrictions:

Dynamic usages of deprecated APIs can’t always be detected. Most prominently, when using a construct like "getView().byId()" to retrieve a control instance, UI5 linter is not capable of determining which control class that is, and therefore fails to identify the use of a possibly deprecated API.
UI5 linter does not report the use of private or undocumented UI5 framework APIs.
The use of deprecated APIs in control metadata is not detected.
UI5 linter is unable to analyze UI5 framework APIs that are accessed through a third-party library.
In XML views, the use of globals or deprecated modules in bindings is not detected.

Usage

Check out https://github.com/SAP/ui5-linter to discover all configuration options.

Requirements

UI5 linter v1.0 requires Node.js v20.11.0 and higher, or Node.js v22.0.0 and higher (v21 is not supported).

Installation

Install the CLI using the npm package manager:

npm install --global @ui5/linter

Lint your project

ui5lint 
 
UI5 linter report: 
 
/application/webapp/controller/App.controller.js 
  10:4 error Call to deprecated function 'attachTap' of class 'Button' 
 
/application/webapp/manifest.json 
  81:17 error Use of deprecated model type 'sap.ui5/models/odata/type="sap.ui.model.odata.ODataModel"'

SAP User Experience Q4/2024 News for SAP S/4HANA Cloud Private Edition 2023

2024-10-10T10:16:48.127000+02:00

Joule is now generally available for SAP S/4HANA Cloud Private Edition 2023. Joule saves you a lot of time when you need to refer to documentation, by giving you a concise summary and pointing you to relevant sections. It also helps you find the right application for well over one hundred navigational scenarios, as well as providing some transactional interactions for selected business objects. If you move up to Feature Pack Stack 2 (FPS2), you can also benefit from built-in collaboration, with the SAP Collaboration Manager now generally available with enhanced functionality. Talking about collaboration, FPS2 also enables users to initiate a chat or call directly from a contact card via Microsoft Teams integration.

This post covers:

Joule
New collaboration capabilities via:
- SAP Collaboration Manager
- Contact card integration with Microsoft Teams
SAP Mobile Start update
News for UI developers, web and mobile

If you want to see how good SAP S/4HANA Cloud Private Edition now looks, across all the main product areas, then I thoroughly recommend that you have a look at the new online Product Tour.

In case you haven’t already seen these, do have a look at the user experience innovations which came with FPS00 and FPS01:

Joule

Users can save around ten minutes every time they need to refer to the documentation, by using Joule to give them a concise summary, created using generative AI. The response also provides three links to the most relevant sections in the documentation. We call this the Informational Pattern. Figure 1 below shows an example for someone working in sales, and Figure 2 shows an example for someone working in procurement.

Figure 1: Using Joule in sales to get help from the documentation, in this case asking “How can I make mass changes to sales orders?”. Alt Text: An image showing Joule on the left, with the query text and an eleven line response below it, followed by the option to expand to see the search results. On the right, an image of Joule is shown with the search results expanded to show three results, the first one called “Mass Changes of Sales Documents”, referring to the documentation of the app with that name. Each search result has a heading with three lines of explanatory text below it.

Figure 2: Using Joule in procurement to get help from the documentation, in this case asking “Can I configure a workflow for my purchase requisitions?”. Alt Text: An image showing Joule on the left, with the query text and a nine line response below it, followed by the option to expand to see the search results. On the right, an image of Joule is shown with the search results expanded to show three results, the first one called “How to Configure the Flexible Workflow for Purc…”, referring to the documentation. Each search result has a heading with three lines of explanatory text below it.

With SAP S/4HANA Cloud Private Edition 2023, users can also benefit from the navigational pattern for over one hundred use cases, in areas such as procurement, finance, sales, and service management. This pattern allows them to navigate directly to apps relevant to their query. You can find out more in this blog post:

Joule for SAP S/4HANA Cloud Private Edition - A Comprehensive Setup Guide

Furthermore, we provide some selected transactional use cases in these areas too.

To find out more about Joule, have a look at the documentation:

Joule in SAP Help Portal

Planned Innovations

As announced at SAP TechEd on October 8th, we have many plans for making Joule even more useful for users, as well as enabling you to build your own skills to extend what SAP delivers. As always, our plans are subject to change, but of course we hope to deliver as planned.

Some highlights are:

Joule for Mobile, built into SAP Mobile Start. As announced, this is planned to become available in November 2024.
Joule studio in SAP Build for building your own skills is planned to become available for beta testing later this year, and become generally available in Q1/2025. Get a preview by watching the recording of this TechEd talk:
- AD200 | Extend Joule with SAP Build and develop custom enterprise skills

Beyond that, we are working on having many Joule agents interact with each other, across our products – making Joule agentic. Also, to support hands-free interaction, we are working on integration with Siri, so that users can use voice to interact.

If you haven’t watched it live, then have a look at the replay of the TechEd talk by our AI leaders:

AI100 | Artificial intelligence that creates real-world results

New Collaboration Capabilities

With Feature Pack Stack 2 we introduce the following new collaboration capabilities.

SAP Collaboration Manager

SAP Collaboration Manager allows users to:

Take notes when using an application; these notes are pinned to the application, and are listed in the Relevant Chats tab when a user has that application open in the same window as the SAP Collaboration Manager.
Ad-hoc chat with colleagues, directly in the SAP system.
Share and annotate screenshots; a link is provided to the recipient with which they can navigate directly to the UI where the screenshot was taken.
Share the business context.
Upload and share files.

Figure 3 shows an example where a user Jones Davidson has created a chat with a colleague Alyssa Arnold and shared a screenshot along with a request to her to take a look at the two open sales orders in the screenshot.

For a closer look at some of the above features, watch it in action here in an SAP S/4HANA Cloud Public Editions 2308 system (what is shown is now available for SAP S/4HANA Cloud Private Edition 2023 FPS02):

Video: SAP Collaboration Manager (2:10 minutes)

Figure 3: Using SAP Collaboration Manager to chat with a colleague and share a screenshot Alt Text: An image showing a list of three sales orders selected in the Manage Sales Orders app, and SAP Collaboration Manager as an overlay on the right showing the chat text and the screenshot image.

Beyond the above features, users can now also:

Mark their favorites, and filter by them (using the Favorites tab).
Set chats to unread.
Add and share insight cards from My Home.

These features are shown in Figure 4.

Figure 4: On the left: SAP Collaboration Manager offers tabs for “Recent chats”, “All Chats” and “Favorites”. You see the star indicating a favorite; the blue bar on the left of the second chat indicates that it has been set to unread. On the right: an insight card added to a chat. Alt Text: An image showing two screenshots of SAP Collaboration Manager. On the left, showing “All Chats” tab with a list of three chats. The second entry in the list is marked as unread, and has a star indicating it is a favorite. On the right, showing an insight card with a vertical bar chart embedded in the chat.

Contact card integration with Microsoft Teams

Users can now initiate a chat or call with Microsoft Teams directly from a contact card in SAP S/4HANA Cloud Private Edition 2023 FPS02. This feature is also available for SAP S/4HANA 2023 (on-premise) with FPS02.

Figure 5 shows two examples for this: using it directly on the My Home page to contact the creator of a task, and using it to contact a customer directly out of a sales order.

Figure 5: Two examples for how you can initiate a chat or call from a contact card via Microsoft Teams – from a To-Do card in My Home (upper image) and from a sold-to party link (lower image). Alt Text: An image showing two screenshots of popovers next to links referring to contacts - for the ToDo card the contact is the creator of the task, for the other one it is the sold-to-party of the sales order. Each popover contains a section for initiating a Microsoft Teams collaboration with icons for chat, audio call and video call.

SAP Mobile Start

Users like to feel in charge, and a good way to support that is to let them define their favorites. The My Home page provides this feature and, as we saw above, the SAP Collaboration Manager has introduced this capability too.

Now also SAP Mobile Start lets users very easily define up to six favorites, two of which appear on the start screen next to a “See all” link to show all six. Figure 6 shows you what this looks like.

Figure 6: SAP Mobile Start lets users define their favorite apps / tiles. Alt Text: Three screenshots of SAP Mobile Start are shown. The one on the left shows the start page, which now has a “Favorites” section at the top, above the “Latest To-Dos” and “Insights” sections. The Favorites section shows two apps, each with a KPI shown as a number; on the right it has a “See all” link. The image in the middle shows all the favorites, in this case three are listed. The image on the right shows a list of all apps which can be selected as a favorite.

Find out more about this, as well as the new capability to upload and download attachments from tasks in this blog post:

SAP Mobile Start V1.12 - Release Update

October 16th update: SAP Mobile Start V2.0 is now available, supporting Spaces & Pages to group your applications; cards from SAP Build Work Zone, standard edition; Situation Handling standard framework capabilities; and enhancements to task handling as well as optimized layouts for larger screens, as provided by foldables and tablets on Android. Check them out in this blog post:

SAP Mobile Start V2.0 - Release Update

News for UI Developers, Web and Mobile

The major news for UI developers for both web and mobile is that SAP Build now supports ABAP Cloud, and not just CAP (Cloud Application Programming model) for other programming languages such as Java and JavaScript. Get a comprehensive overview in this blog post from Michael Ameling:

Unveiling today: SAP Build meets ABAP Cloud!

Providing Joule skills is also a powerful way to enhance the user experience – I covered our main planned innovations there in already in the “Planned Innovations” part of the above Joule section.

News for Web Developers

Alt Text: Image of the white UI5 logo on a blue background with the text “UI5 linter 1.0 New Release” below it.

The main news is that UI5 linter 1.0 has now been released and is generally available. 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 blot post:

Release of UI5 linter v1.0

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:

SAP BTP Developer’s Guide
If you read the guide, do spend a few minutes to give us feedback, so that we can improve it even further, by taking this survey to help us improve the guide!

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:

If you have existing back-end code which cannot provide OData services, we have now released the SAPUI5 meta-data controls library sap.ui.mdc, as outlined here:
- Smart choices for your UI: When to use sap.ui.mdc
If you already have applications written with a different UI technology, such as Angular or React, we have released Version 2.0 of our UI5 Web Components:
- Blast Off! UI5 Web Components 2.0 is Now Live!

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 Developers

The main news for mobile developers is the latest releases of the mobile SDKs, as well as the integration of the Mobile Development Kit into SAP Build Code. Here are links to find out more:

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

Cross-Platform Mobile App Development with SAP Build Code and the MDK (50:40 minutes)
Craft Enterprise Apps for iOS, iPadOS, and visionOS with SAP Fiori and SAP Build Code (47:16 minutes)
Build Elegant Enterprise Apps for Android with SAP Fiori and SAP Build Code (45:24 minutes)

Final Words

I hope you are as excited about these new user experience innovations as I am! FPS02 brings quite a few additional new features beyond user experience, discover all of them here:

What’s New Viewer for SAP S/4HANA and SAP S/4HANA Cloud Private Edition 2023 FPS02

If you like what you see here, we encourage you to upgrade to FPS02, so that you can run your business even better with SAP S/4HANA Cloud Private Edition 2023.

Oportunidades!! Capacitação ABAP FIORI e FUNCIONAL SD

2024-10-10T19:40:18.262000+02:00

Pessoal hoje quero compartilhar essa BIG oportunidade de uma consultoria aqui cidade. Eu comecei no mundo SAP por meio de uma capacitação similar oferecida gratuitamente como essa, pela antiga Pelissari. Sou muito grata e por isso apoio iniciativas como essa. Parabéns Escotta pela iniciativa.
Então se você te interesse, essa é a sua oportunidade de se desenvolver e ingressar no universo SAP.

Inscreva-se no link abaixo e junte-se à próxima turma de capacitação!
INCRIÇÕES AQUI Até dia 16/10/24.

UI5 freestyle development in SAP Build Code with Joule

2024-10-14T13:26:29.509000+02:00

SAP Build Code, which focuses on pro-code development, offers a variety of GenAI functionalties to support the development process using CAP, HANA development, as well as UI5.

In this blog post, I'll focus on the freestyle aspect of UI5 development, demonstrating how to get started with a freestyle UI5 application. My aim is to showcase how Joule can be used to both accelerate the development and provide support for those who may not be UI5 experts to the very fingertips.

The following simple scenario will give you a glimpse into developing applications with SAP Build Code. Using the BTP Trial version you can currently setup a SAP Build Code instance to try Joule’s GenAI capabilities.

Getting Started

Open the SAP Build Lobby from the BTP Subaccount Cockpit under Services > Instances and Subscriptions > SAP Build Code.
Create a new SAP Build Code Fiori, Full-Stack, or Mobile application. For this scenario, a SAP Fiori Application is suitable.
Enter a project name. If no dev space exists, it will be prefilled to create a new Fiori dev space:

4. Once the project is created and the SAP Business Application Studio (BAS) dev space starts, click on the project name to open BAS.

Creating a UI5 Application

Create a UI5 application using the template wizard in BAS:

Go to Get Started > New Project from Template > SAP Fiori Generator
Use the Basic template to start from scratch
For the OData service, create a destination to the OData V2 as an example OData connection
Add a view name – In my case Main
Optionally, set the deployment configuration and add the app to the managed application router if you want to deploy and consume the app from within SAP Build Work Zone

Leveraging Joule for UI5 Development

Recently, major UX updates were introduced to the Joule capabilities, moving from mainly being able to access Joule from the Guide Center towards a single chat, where users can use different slash commands to invoke tailored Joule functionalities.

For UI5 questions and development the /ui5 slash command is there to achieve this:

Example: Creating a Product Table

In the yet empty project, in order to see the /ui5 slash command, we firstly need to open the controller or view that was created from the template. Afterwards, the /ui5 slash command is suggested and we can directly start with a sample prompt to show products of the OData service:

"/ui5 create a table in the main view that displays the products of the northwind service. Provide data bindings to the properties of this odata entity."

After invoking the prompt, Joule already looked up files considered important for executing the task:

In the answer, Joule provided the code in the Main.view.xml including the product table. Since the screenshot of the whole response is large and thus difficult to paste here, this is the code it provided :

<mvc:View controllerName="demoapp.controller.Main"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>
            <Table id="productTable" items="{
                path: '/Products'
            }">
                <headerToolbar>
                    <Toolbar>
                        <Title text="Products" />
                    </Toolbar>
                </headerToolbar>
                <columns>
                    <Column>
                        <Text text="Product ID" />
                    </Column>
                    <Column>
                        <Text text="Product Name" />
                    </Column>
                    <Column>
                        <Text text="Quantity Per Unit" />
                    </Column>
                    <Column>
                        <Text text="Unit Price" />
                    </Column>
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <Text text="{ProductID}" />
                            <Text text="{ProductName}" />
                            <Text text="{QuantityPerUnit}" />
                            <Text text="{UnitPrice}" />
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </content>
    </Page>
</mvc:View>

As you can see, the suggestions looked good, also containing data binding to 4 properties of the Products entity. That already saves some manually coding time for developers and can be further adapted to include more columns and properties.

An explanation at the end is also provided:

Afterwards, the application can be previewed using the green play button in BAS for example. The result already looks promising:

Formatting and adding Functionality

Now, I wanted to format the Unit Price to make it look a little bit nicer and also display the sign of the Euro currency after the number. Additionally, I wanted to create a custom column with some sort of action that can be invoked on each product. So, Joule was asked again:

"/ui5 format the unit price in the table to round to 2 decimals and include an euro sign after the number. Create a formatter file with a function for this. Additionally, include another column in the table named Order where each cell is composed of a button that indicated that the user wants to buy this product. Provide a basic press event handler one of this button is pressed."

Multiple files were suggested to be adapted and/or changed, such as creating a formatter.js file to format the UnitPrice property.

On top of that, it created a column Order, a function onPressOrder in the Main.controller.js file, and a press event in the Main.view.xml in order to show an UI5 MessageToast of the order placed for a certain product:

To further add some application logic, Joule assisted to create a condition when clicking the button:

“/ui5 please change the onOrderPress function that checks if the unit price of the product is above 50 €. If this is the case, show a message dialog indicating that the products above 50 € can currently not be ordered.“

Result, only when clicking a product over 50 (€):

Using AI-Powered Code Completion

Besides Joule, since very recently SAP Build Code introduced code completion and suggestions directly in the editor. Therefore, we can also make use of this AI feature.In order to show this, I added a comment in the onOrderPress code and described that I want to have a confirmation dialog instead of a message toast. Shortly after, a code suggestion was directly available in the function:

I had to remove the MessageToast line of code, but besides that, it immediately worked:

Understanding your Code with Joule

Coming to the end, one more thing to highlight: Using Joule to help explaining code. As such, the following prompt was sent:

“/ui5 what does the main view do?”

Here is an extract of Joule’s answer, which helps to understand the code even further:

Conclusion

As you can see, SAP Build Code with Joule supports a variety of use cases for UI5 development, in addition to its other GenAI focus on CAP and Full-Stack development. Please keep in mind that prompt responses can vary, thus potentially leading to slighty different code proposals. Nonetheless, it's a powerful feature that can enhance your development process, whether you're an experienced UI5 developer or just getting started. Let’s see what the future brings with more and more features getting introduced!

Visualise end to end progress of Solution using Solution Quotation Fiori application

2024-10-14T20:32:13.924000+02:00

In today's fast-paced business environment, visibility and traceability are critical for effective decision-making. SAP’s Manage Solution Quotation Version 2 app addresses this need by offering a comprehensive view of the entire solution from creation of solution quotation to porgress of each follow-up documents execution. This blog highlighting the new feature and how businesses can leverage it to optimize operations.

From 2023 FPS01, new fiori app 'Manage Solution Quotations - Version 2' is availalbe to use. Using this app user can easily create new solution quotations or search or navigate to existing solution quotations. This app provides a network graph view, allowing user to track the status of a predefined set of follow-up documents such as sales orders, service orders, service contract or subscription contract. At each graphical node, like a sales order or subscription contract, you can see key details including the document ID and status with colour coded node of each follow-ups. A focused progress monitor is available at both the solution quotation header and item levels, offering a clear view of the overall process. Users can also navigate directly to specific documents or transactions, provided they have the necessary roles for access.

On open of this app you will see list of solution quotations created, user can search using the default filters, also can adapt the given filters.

To navigate to the details page of a solution quotation, click on the respective row. To visualize the end-to-end progress of the solution, user must click the "Action" button in the corresponding solution quotation row. On click on action button it opens the fiori object page with Details, Items and Progress Monitor. In this example I have used mixed bundled product which is a combination of different configurable non configurable products. Solution Quotation has been accepted which has generated its follow-up documents( sales order, service order, service contract and subscription contract).

By default, it shows the progress flow of the header documents as depicted in the image above. To visualize a specific item, click on the corresponding line item, To illustrate in this example I have selected item 40, which is a subscription item.

As you progress with specific documents, such as sales documents, you can visualize the further documents like outbound delivery and invoice. For example I have created billing documents for Subscription item and Service Contract, user can visualise end to end progress of header and items.

Tips:The Progress Monitor UI offers useful controls in the right corner. Users can zoom in or zoom out, and clicking on 'Enter Full Screen' will expand the view for better visualization. Users can also highlight a particular document's flow by clicking on the document (node), as shown in the image below.

Another useful control is 'Expand All' and 'Collapse All.' As your document set grows, you can collapse all and expand only the documents you want to track. For example, here I have collapsed all documents and expanded the Service Contract flow.

Navigate to Documents from Progress Monitor: To navigate, the user can click on a node, which will display a set of buttons. By clicking the "Navigate to Document" button, the available navigation options(hyperlinks) will be shown depending on the user's authorizations. On click on hyperlink you can navigate from progress monitor to correponding documents. Similalry you can explore other interactive feature by clicking on button like Expand/Collapse, Node Details and Collapse Path.

Navigation of Sales Documents

In summary, the SAP Manage Solution Quotation version 2 app offers a user-friendly interface for managing and tracking solution quotations. The SAP solution quotation progress monitor enhances business efficiency by providing full visibility into the solution, enabling faster decision-making and improved collaboration. This streamlined process helps organizations reduce errors, accelerate decision making, and optimize resource allocation, driving overall business growth.

Stay tune for my next blog post I will try to explain the other features of Solution Business. I will be grateful to see your feedback on this blog post also let me know if you expect specific blog post on other offering of Manage Solution Quotation application or Solution Business.

SAP Fiori Custom Variant Migration: A Step-by-Step Guide

2024-10-15T06:53:58.460000+02:00

SAP Fiori Custom Variant Migration: A Step-by-Step Guide

Migrating custom variants in SAP Fiori is crucial for maintaining a seamless user experience, especially when upgrading or moving configurations between environments. In this blog, I will walk you through the process of migrating custom variants, highlighting each step with screenshots for better understanding.

Introduction to SAP Fiori Custom Variant Migration

SAP Fiori custom variants are configurations that allow users to personalize their apps by saving filter settings, layouts, and other preferences. Migrating these custom variants ensures that users retain their personalized settings across different systems or environments.

Why Migrate Custom Variants?

To maintain consistent user experience across environments
To simplify the process of upgrading or moving to a new SAP environment
To avoid manual reconfiguration after migration

Prerequisites
Exporting Custom Variants from the Source System
To migrate custom variants, you must first export them from the source system.
Follow these steps:

Step 1: Open the SAP Fiori Launchpad

Log into your SAP Fiori Launchpad on the source system.
Navigate to the app where your custom variants are configured.

Step 2: Access the Custom Variant Management

Click on the filter icon or other settings icons where the variant settings are accessible.
Select the "Manage Variants" option.

Step 3: Export the Custom Variant

In the Variant Management dialog, locate the export option (this might be labeled differently based on the app or version).
Select the custom variant you want to export.
Click the "Export" button and save the file to your local system.

Note: The exported file will typically be in XML or JSON format, which will be used for importing on the target system.

Importing Custom Variants to the Target System

Now that you have exported the custom variants, it's time to import them into the target system.

Step 1: Log into the Target System's Fiori Launchpad

Ensure you have access to the same app on the target system.
Open the Fiori Launchpad and navigate to the relevant app.

Step 2: Access the Import Functionality

Go to the variant management dialog, similar to the source system.
Locate the "Import" option.

Step 3: Upload the Exported File

Click the "Import" button and select the file you exported earlier.
Confirm the import, and the custom variant will be added to the target system.

Tip: Ensure there are no naming conflicts. If a variant with the same name already exists, consider renaming it before importing.

Verify the Migration

Once the import is complete, verify that the custom variants have been correctly migrated. Follow these steps:

Access the app on the target system.
Check if the variants appear as expected.
Test the settings to confirm they match those from the source system.

Troubleshooting Common Issues

Here are some common problems you might encounter during the migration process and how to resolve them:

Issue 1: Import/Export Button Not Visible

Ensure you have the correct authorization.
Check if Variant Management is enabled for that particular app.

Issue 2: Exported File Format Is Not Supported

Verify that both the source and target systems are compatible.
Check for SAP Notes or updates that address this issue.

Conclusion
Migrating custom variants in SAP Fiori can save a lot of time and effort, especially when moving to a new environment or upgrading your systems. By following the steps outlined in this guide, you can ensure a smooth migration process.

Hoping with blog a basic overview of variant migration has been covered
Looking forward in reading comment(s) on the issues not listed in this blog you have encountered during migration.

Happy Migration! Cheers!
PS: Screen shots have been minimized in order to hide system data

SAP Mobile Start V2.0 - Release Update

2024-10-15T08:28:09.290000+02:00

With the latest release of SAP Mobile Start, you get significant enhancements that will make your usage of SAP Mobile Start even more enjoyable and efficient. Besides Spaces & Pages and declarative integration cards from SAP Build Work Zone, standard edition, you will also get some nice enhancements for tasks.

Spaces & Pages – New Experience
Introduced for the web some time back, we now support Spaces & Pages also in SAP Mobile Start. This comes with several advantages for you, like an improved organization and categorization of your content - as you do know already from the web. You get a more structured view of your applications and information, making it easier to locate and access your relevant resources quickly.
If you use groups to structure your apps, your groups will also be shown on sub-pages on the Apps screen in the future, what significantly improves user experience.

Screenshot: Spaces & Pages

Cards
So far, SAP Mobile Start has supported insight cards from SAP Start. With the release 2.0, we do support the “New Experience” of SAP Build Work Zone, standard edition and you will get your declarative integration cards, embedded in the respective pages on the Apps screen. By tapping on the card, you navigate into the card details. Depending on the functional scope of a card, actions can be directly triggered from it. If you do use cards in SAP Build Work Zone, standard edition already, then they will automatically appear for you within the SAP Mobile Start version 2.0.

Screenshot: Cards from SAP Build Work Zone, standard edition

SAP S/4HANA Situations Handling
Situation Handling informs you about situations that need your attention. This includes for example upcoming deadlines, delays, expiring contracts, and so on. With SAP Mobile Start version 2.0, we now also support the standard framework capabilities of Situation Handling. You always find your latest situations in your Latest To-Dos section on the Start screen and all situations on the To-Dos screen.

Tasks
Tasks are one key element of SAP Mobile Start as they ensure that you are always on top of your relevant business workflows. Task-based notifications and widgets help to ensure that you never oversee or forget an important task. With the latest version of SAP Mobile Start, you can see URL attachments for tasks in the new links section within the attachments on the task details screen. By tapping on the link, the respective link is opened in a new window. Typical links are a link to a document stored on a file server or a link to an ISO document.

With version 2.0, the app also supports non-finalising actions for tasks. Those are mainly relevant for tasks that come from partner solutions. With a non-finalizing task action you can update the task without complete it. Typical non-finalising actions are to increase a task priority or change the task status.

Screenshot: Non-finalising actions for tasks

Finally, you get a new To-Dos detail page layout for Android! It was specifically designed for larger screens like tablets and foldable devices. With the booming market for foldables and tablets on Android, there's a growing need to optimize our layouts for larger screens.

Screenshot: Task details large screen on Android

I hope you will enjoy those new features in SAP Mobile Start.

For further information on the new topics, please check our SAP Mobile Start documentation.

SAP Mobile Experience offers intelligent native mobile solutions that help businesses build more efficient, resilient and sustainable end-to-end processes, improving people’s work life wherever they are.

Visit SAP Mobile Experience Community Page and click “follow” to get the latest development and innovation of our solutions. We look forward to hearing about your experience with setting up the solution in your landscape; please do share your thoughts and comments below. Enter here for additional questions regarding SAP Mobile Experience Applications.

Want to be notified? Check your profile settings to ensure you have your settings activated.

How SAP manages its Early Talent programs – Get insights by joining our CEI project

2024-10-15T16:18:08.281000+02:00

SAPs Vocational Training (VT) department, responsible for training SAP’s apprentices and dual students, uses SAP SuccessFactors for its processes. However, there are apprentice and student specific processes not covered by SAP SuccessFactors, for which the VT department used custom solutions and many spreadsheets in the past. This caused redundancies, data flow gaps, a lack of transparency and a resource intensive reporting.

As dual students & apprentices ourselves, we wanted to solve those challenges and make our own lives easier, by developing a solution covering the unique requirements for early talent management and connecting it with the data from SAP SuccessFactors, providing a unified overview for students, trainers and managers alike.

Our internal Early Talent Management solution is built from the ground up on SAP Business Technology Platform, tightly integrated into SAP SuccessFactors, with now over 20 Fiori applications, covering most of the requirements of SAPs 14 VT programs from around the globe. We use the solution at SAP since mid 2022 and are currently evaluating if it could also be used to manage our interns.

With this Customer Engagement Initiative we’d like to share insights about the capabilities of our solution and evaluate if our internal solution might also be suitable for customer use cases in a potential future solution.

Form of activities

The final form of activities depends on the participants preferences. We currently plan:

Initial call (1h) in December 2024 to give an initial overview about the solutions capabilities as well as the timeline of the CEI project.
Throughout January till June 2025 deep dives (1-2h) into specific capability areas of the solution, including time for Q&A and feedback as well as discussing challenges you currently face. Our capability areas include:
- Student & Cohort management
- Work (Rotation) assignment & management
- Conversion process for students into full-time positions
- Academics & grade reporting by students
- Extracurricular activities for students
- Scientific papers & a small paper book library system
Furthermore, we’d like to offer two sessions (1-2h) focused on your current challenges in the following two areas to get a more holistic understanding of them:
- Apprentice handling including the Apprentice report book (Berichtsheft)
- Functionalities required for managing interns
Closing call (1h) in Q3 2025

Prerequisites

Customers and partners should use or plan to use SAP SuccessFactors Employee Central and be familiar with apprenticeships, internships, co-op student or Vocational Training programs

Register for our CEI project ‘SAP Early Talent Management’ from October 14th till November 15th, 2024.

Once the registration process is finalized, we invite participants to the initial call to go through the project scope and timelines.

We are looking forward to meet you in December. 🙂

SAP Developer News, October 17th, 2024

2024-10-17T21:00:00.023000+02:00

ITEMS

SAP Cloud Application Programming Model September 2024 Release

Details in Capire https://cap.cloud.sap/docs/releases/sep24

SAP Fiori Innovation Day

SAP Fiori Innovation Day https://events.sap.com/eur/sap-fiori-innovation-day-heidelberg-2024/en/home

SAP Cloud Integration News

Message Status Overview in Cloud Integration https://help.sap.com/docs/cloud-integration/sap-cloud-integration/monitor-message-status-overview

SMB Adapter in Cloud Integration https://api.sap.com/package/SMBAdapterforSAPIntegrationSuite/overview

Message Transform utilities in Cloud Integration https://api.sap.com/package/com.sap.integration.cloud.utilities.MessageTransformations/overview

Flexso Tech Day 2024

Event website https://www.flexso.com/en/events/tech-day-2024

Devtoberfest Week 4

Devtoberfest sessio¡n calendar https://community.sap.com/t5/devtoberfest/eb-p/devtoberfest-events?calendar=true

Devtoberfest contest https://community.sap.com/t5/devtoberfest-blog-posts/devtoberfest-2024-contest/ba-p/13781593

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

CHAPTER TITLES

0:00 Intro
0:07 SAP Cloud Application Programming Model September 2024 Release
2:28 SAP Fiori Innovation Day
3:10 SAP Cloud Integration News
4:26 Flexso Tech Day 2024
5:22 Devtoberfest Week 4

TRANSCRIPT

[Ajay] Hello, developers, September 2024 release of CAP is now available. The first update is about analytics for Capire Matomo is used to collect anonymized usage data for Capire, and users will have the option to disable the tracking. Coming to the Node.js updates, you can now import type definitions generated by the CDS typer on the top level code, even in the test code. Now we have richer JavaScript and TypeScript snippets in the compiler, which can now carry type information, allowing you to get a better insight into the APIs used there. Instance-based restrictions for bound actions and functions are now also enforced. SAP Cloud Application Event Hub is the new default offering for messaging in SAP Business Technology Platform, Integrating with SAP Cloud Application Event Hub is provided via a CDS plugin @cap-js/event-broker. Moving on to Java updates, we have enhancement to the code generator, where we now have stricter setters in the accessor interfaces. Accessor interfaces now offer the new factory method to access the data in the given map. Monitoring health status of MTX Sidecar is enabled with a new health indicator model provider. Parameter aliases in OData V4 for the entity key values and function parameter values are now also supported. You can easily add handler stubs using add handler CLI command in Java. A new serious property, ui5.version allows you to configure UI5 versions used by the Fiori preview. Finally, in the tools update, we have got beta release to visualize deployment descriptor mta.yaml file. This helps you to get a graphical overview of your microservices architecture and the interplay between the application and the services. This also works as a visual linter. There are two new experimental CDS lint checks, sql-null-comparison and no-java-keywords. For more details, please check the links provided in the description.

[Nico] Hi everyone, and welcome to the SAP Developer News. The SAP Fiori Innovation Day will happen on November 19th in Heidelberg, Germany in the SAP App Haus, interestingly the same location we were at for SAP TechEd Virtual a couple of weeks ago. The SAP Fiori Innovation Day is open for everyone, and it will be a packed day with content about the SAP Fiori design system, SAP Fiori elements, AI of course, and it will also contain partner sessions. There will also be a hands-on session about the SAP Fiori elements flexible programming model. Check out the link in the description for more information and to register. See you. Bye.

[Antonio] Hola, SAP developers. I have some exciting news to share with you today. The message status overview that we are so used to in SAP PI/PO is now available in SAP Integration Suite. The message status overview page provides a customizable overview of the messages process and their statuses in a selected time frame, as well as quick navigation to and from the message monitoring in your tenant. Also, there is a new adapter available to us in Cloud Integration. This is the SMB adapter, which will allow you to connect to a server using the SMB protocol, meaning that we can interact with an SMB server and read and write files. This is especially relevant for those on-premises integration scenarios. And finally, there is now an alternative solution in Cloud Integration to the MessageTransformBean adapter module that we often use in SAP PI/PO to aid with the transformation of the message during the runtime. It is in the form of Groovy scripts, which support most of the features that existed on the MTB module. Make sure to check it out. Ciao.

[DJ] If you're in or can get to the Brussels / Mechelen area of Belgium in early November, then there's a Tech Day happening on the latest SAP tools and technologies. Flexo Tech Day 2024 is happening on Thursday, the 7th of November. And following the welcome and keynote, There are sessions across three separate tracks, analytics and integration, extensions, and there's also a trending track. Now, the full agenda is online. The day is open to everyone, but spaces are limited. So head on over to the website to register. And at the end of the day, there's gonna be a beer tasting, mostly because the day is being held in a brewery. What's not to like? I'll be there. See you there too.

[Nico] Hi everyone, and welcome to the SAP Developer News. We're just wrapping up week three of Devtoberfest, which means there's just one week left for Devtoberfest 2024. So next week we'll have five more days of packed content, all about SAP development. So on Monday, it will be ABAP and CAP again. On Tuesday, Tooling Tuesday, we'll talk about the SAP Build family. Wednesday is Integration Day. On Thursday we talk about MAD, which is machine learning, AI and data. And Friday will be Frontend Friday as well as Fun Friday. And for Fun Friday next week there will be Spooktoberfest, so expect a spooky day. Overall, next week I counted 24 sessions scheduled, that's a lot of content and it's great content too. We hope to see many more familiar faces as well as new faces. Welcome if you're new to this channel. Now's your chance to earn points in the Devtoberfest gameboard and to progress towards Nerdvana, which would qualify you for the Devtoberfest grand prize. So hope to see you around and see you next time.

Dynamically Handling OData Metadata in a Fiori Freestyle Application

2024-10-18T16:38:59.422000+02:00

When developing SAP Fiori applications, especially Freestyle apps, developers sometimes need to manipulate the metadata fetched from OData services. In this blog post, I will walk you through how to modify OData service metadata properties dynamically in Component.js—specifically, how to customize label values based on the current date.

This is particularly useful when working with price forecasts or time-bound data, where metadata labels must reflect the period they represent (e.g., Month-Price, Month-Std Price).

Additionally, I’ll demonstrate how to leverage SAPUI5 lifecycle methods, modify OData annotations at runtime, and integrate it smoothly into your app logic.

Creating the CDS View

To expose your forecast data as OData, start by creating a CDS view in your backend system. This CDS will contain fields such as:

Mnt1YearPrice
Mnt1YearStdPrice
Mnt1YearPriceList
Mnt1YearPpv
Mnt1YearStdFright
These fields represent forecast values that will be updated dynamically in your Fiori app based on the current month.

Example CDS Code:

Explanation:

@odata.publish: true: This annotation will expose the CDS as an OData service.
SQL View: The view pulls forecast data from the zforecast_table table.

Creating the SEGW Project

Once the CDS is ready, you need to create a SEGW (SAP Gateway Service Builder) project to expose it as an OData service.

Enhancing the MPC_EXT Class

In the MPC_EXT class, you can define methods to manipulate metadata properties dynamically. This is particularly useful for updating labels based on the current date.
I am just adding a sample code you can change based on the requirement

METHOD define.
    super->define( ). "Ensure you call the parent metadata
    DATA: lo_entity_type TYPE REF TO /iwbep/if_mgw_odata_entity_typ,
          lo_property    TYPE REF TO /iwbep/cl_mgw_odata_property,
          lo_annotation  TYPE REF TO /iwbep/if_mgw_odata_annotation.
            lo_entity_type = model->get_entity_type( iv_entity_name = 'ZCDS_PTP_FORECASTType'). "Your Entity Name
CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.

    
    lo_property ?= lo_entity_type->get_property( iv_property_name = 'Mnt1YearPrice'). "Property inside your Entity

    CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.

    lo_annotation->add( iv_key = 'label' iv_value = 'Month1curyear' ). "Specific annotation you want to add.

    lo_annotation->add( iv_key = 'label' iv_value = 'Mnt2YearPrice' ). "Specific annotation you want to add.

    lo_property ?= lo_entity_type->get_property( iv_property_name = 'Mnt2YearStdPrice'). "Property inside your Entity Month 02 02

    CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.
"Specific annotation you want to add.

  
    lo_annotation->add( iv_key = 'label' iv_value = 'Mnt3YearPrice' ). "Specific annotation you want to add.

    lo_property ?= lo_entity_type->get_property( iv_property_name = 'Mnt3YearStdPrice'). "Property inside your Entity 02

    CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.

    lo_annotation->add( iv_key = 'label' iv_value = 'Mnt3YearStdPrice' ). "Specific annotation you want to add.

  ENDMETHOD.

Consuming the OData Service in Fiori App

Once the OData service is available, we bind it to our Fiori app via manifest.json and use Component.js to manipulate metadata labels based on the current month.
Code in Component.js

init: function () {
    // Call the base component's init function
    UIComponent.prototype.init.apply(this, arguments);

    // Initialize routing
    this.getRouter().initialize();

    // Set device model
    this.setModel(models.createDeviceModel(), "device");

    // Get OData model and attach metadata loaded event
    var oModel = this.getModel("forecastService");

    oModel.attachMetadataLoaded(function (data) {
        var oFormat = sap.ui.core.format.DateFormat.getInstance({
            pattern: "MMM-yyyy",
            UTC: true
        });
        var oDate = new Date();

        // Loop through entity properties to modify labels
        var aProperties = data.getParameters().metadata.oMetadata.dataServices.schema[0].entityType[0].property;
        for (var i = 0; i < aProperties.length; i++) {
            var sDate = oFormat.format(oDate);
            var oLabel = aProperties[i].extensions.find(function (ext) {
                return ext.name === "label";
            });

            if (oLabel) {
                switch (aProperties[i].name) {
                    case "Mnt1YearStdPrice":
                        oLabel.value = sDate + " - Std Price";
                        break;
                    case "Mnt1YearPriceList":
                        oLabel.value = sDate + " - Price List";
                        break;
                    case "Mnt1YearPpv":
                        oLabel.value = sDate + " - PPV";
                        break;
                    case "Mnt1YearStdFright":
                        oLabel.value = sDate + " - Standard (Freight & Duty)";
                        break;
                    default:
                        oLabel.value = sDate;
                }
            }
        }
    });
}

In the Component.js file, we’ll modify the metadata labels dynamically based on the current month.

Explanation:

attachMetadataLoaded: Ensures the code runs after metadata is loaded.

Label Manipulation: Updates each property’s label based on the current month.
Sample OUTPUT:

Conclusion

In this blog, we cover how to:

Create a CDS view for forecast data.
Expose the CDS via SEGW as an OData service.
Consume the OData service in a Fiori Freestyle app.
Manipulate metadata dynamically in Component.js based on the current month.

Large Screen Design and Implementation at SAP Mobile Start

2024-10-23T10:13:31.140000+02:00

We are very excited to announce the introduction of our new to-do details page layout for Android in our latest 2.0 release! 🎉 It was specifically designed for larger screens like tablets and foldable devices. With the booming market for foldables and tablets on Android, there's a growing need to optimize our layouts for larger screens.

Google recently released new guidelines on canonical layouts with recommendations on how to best make use of the additional space on larger screens. In addition to these guidelines, new APIs have been introduced by Google to seamlessly implement the new patterns.

In this blog post, we will explore the business value, design, and implementation of large screen patterns.

Business Value of Large Screen Optimization

New to-do details page for Android with 2.0 release

At SAP Mobile Start, we began optimizing our large screen layouts by introducing a supporting pane to the to-do details screen. The comments section now appears as an individual pane that can be toggled on and off. This allows you to read and write comments while browsing through to-do details and navigating attachments simultaneously, reducing the need for full-screen navigation and making better use of the additional space.

For SAP’s business applications, the adoption of adaptive large screen user interfaces results in a meaningful improvement to the end user’s productivity on mobile devices. The larger screen real estate can improve daily tasks like:

Data entry and form filling: Provide extra space for on-screen keyboards and data entry fields to minimize scrolling, reduce errors, and expedite the process.
Data visualization and analysis: Enhance readability and interactivity of complex data sets, such as charts and spreadsheets, for quicker and more effective analysis.
Document editing and review: Simplify editing with full-page views of texts, images, or presentations, facilitate side-by-side comparisons, and offer stylus support for precise input.
Navigation and control: Making menus and controls easily accessible next to the workspace and incorporating intuitive gesture-based navigation.

Large Screen Design

Google’s canonical layout guidelines have reshaped the way we design for large screens. Instead of thinking about specific devices like phones, foldables, or tablets, the focus shifts more towards window size classes that require the layout to be more flexible and adapt to defined breakpoints.

Here is an overview on the window size classes defined by Google:

Window size classes by Google

For large screen design, Google advises to think in "panes" rather than screens. A pane is a semantic container that helps structure content into multiple columns. To design for all size classes, it is crucial to analyze the app’s structure and understand the relationships between screens to define the needed panes. On Compact, users navigate hierarchically through full-screen panes. On Large though, multiple panes are displayed side by side which is a fundamental difference between the size classes. For more information, check out Google’s guide for designing across window size classes.

Google suggests a few standard layouts that can be used for structuring large screens: List-Detail, Supporting Pane, and Feed. Depending on the app’s use cases, any of these patterns can be applied. You can find more information in the M3 Guidelines.

Material Design 3 Guidelines, Canonical layouts - Overview

Design Best Practices

Defining the interaction and visual design for the panes is the tricky part. How do you visualize the relation between panes and ensure that the visual hierarchy is easily understood? How can you organize the screen layout so users can intuitively navigate the UI, even in more complex, information-dense layouts?

Here are some best practices we learned through our collaboration with Google:

Optimize Layouts: Rather than stretching content across the full screen, try to use multiple panes, multi-column layouts, letterboxing, or dialogs, if reasonable.

Options for full-screen layouts

Navigational Elements: Aim for 5-7 navigation targets in rails and drawers. A drawer can contain more navigation targets than a rail, as it can also offer secondary navigation targets next to primary navigation. Drawers can be expanded or collapsed as needed by using the toggle button. When switching between size classes, keep the order of navigation targets consistent.

Nav Rail vs. Nav Drawer

Layout Changes: Avoid re-flowing content within panes during layout changes, as this can cause users to lose context. Instead, reduce non-relevant elements to free up space (e.g. collapse nav drawer to nav rail).

Layout changes

Unique Pane Information: Each pane should offer unique, relevant information to users without repetition. Special attention should be paid to scenarios with an overview pane and a details pane.

Unique panes

Pane Background Styling: Style pane backgrounds are based on current focus and priority so that it helps to guide user attention. Ensure a consistent use of background colors for panes across size classes. Using a color system based on the M3 color scheme helps provide sufficient contrast between fore- and background elements.

Pane background styling

Contextual Use of Top-App Bar: Use the top app bar globally for the whole screen or locally within individual panes - or even both, depending on the use case. But avoid blocking too much vertical space, many layouts work well without a headline for each area.

Top-app bar usage

Supporting Panes: For temporary actions like filtering or pickers, use the floating option. Don’t use a supporting pane in a list-detail manner (use list-detail pattern instead) and don’t put multiple supporting panes next to each other. Limit hierarchical navigation in supporting panes to one level deep, with back and close buttons appropriately placed.
Dialog Use: Only use dialogs when minimal sub-navigation is required. List-detail patterns or supporting panes are often better alternatives. Never show a dialog on top of another dialog.

Integration into SAP Design System

UX Guidelines for Large Screen Patterns

SAP‘s Fiori Design System team is working on business use case specific UX guidelines and UI patterns to unify and enhance the large screen experience across SAP mobile apps. This includes patterns like “Profile and Settings”, “Sort and Filter”, or “Create” and enhancing the Horizon color system utilizing the Android M3 color capability. Additional how-to guidance will be provided for product teams to fully adopt the adaptive layouts.

For more information on the design system, check out the SAP Fiori for Android design guideline.

Implementation of Large Screen Patterns

Building on the design principles and guidelines, let's delve into the practical aspects of implementing large screen patterns.

Android has introduced a suite of powerful APIs to facilitate the creation of engaging and efficient user experiences on larger screens. These tools provide developers with the flexibility to adapt their applications to various screen sizes and orientations, ensuring optimal user satisfaction.

WindowSizeClass: Adapting Your UI to Any Screen

WindowSizeClasses are a cornerstone of adaptive UI design. This API provides essential insights into the available screen space, empowering developers to create layouts that effortlessly transition across multiple devices. By classifying the display area available to your app as compact, medium, and expanded, WindowSizeClass simplifies the creation of UIs that seamlessly adapt to changing screen conditions.

It is crucial to remember that the screen space available to your app can differ from the screen size of the device for several reasons. For instance, split-screen mode on mobile devices can partition the screen between multiple apps. On ChromeOS, Android apps often reside in resizable free-form windows. Foldable devices offer distinct screen sizes depending on their folded or unfolded state.

Moreover, the window size class can dynamically change throughout your app's lifecycle due to factors like device orientation changes, multitasking, and device folding. To ensure a seamless user experience, your app's UI must adapt accordingly.

Compose Material 3 Adaptive library: A modern, declarative approach to building Adaptive apps

The new Compose Material 3 Adaptive library introduces a modern, declarative way to build adaptive apps. It simplifies the process by eliminating the need for custom UI logic, reducing code duplication, and easing the maintenance of multiple layout files.

This library offers below 3 composables that handle window size classes, navigation components, multi-pane layouts, and support for foldable devices, including hinge locations and postures all out of the box.

NavigationSuiteScaffold: Automatically switches between navigation bar and navigation rail depending on app window size class and device posture.
ListDetailPaneScaffold: Implements the list-detail canonical layout. It displays a list and the detail of a selected item side-by-side on larger windows, while showing only the list or the detail on compact and medium-sized windows.
SupportingPaneScaffold: Implements the supporting pane canonical layout. It shows the main content pane alongside a supporting pane on larger windows, but only the main content pane on compact and medium-sized windows.

Integrating M3 Adaptive components into SAP Mobile Start

At SAP Mobile Start, we were able to integrate NavigationSuiteScaffold in just 5 minutes, swiftly adapting our navigation UI to different window sizes. It eliminated the need for custom logic, which previously determined the navigation component based on various window size classes.

*With just few lines of code, Navigation UI logic is handled via NavigationSuiteScaffold

Adopting the NavigationSuiteScaffold significantly reduced the codebase dedicated to custom navigation UI logic by 59%, decreasing lines of code from 379 to 156.

Integrating SupportingPaneScaffold to optimize to-do details

We integrated the SupportingPaneScaffold to optimize our to-do details screen for large displays and foldable devices. Although integrating SupportingPaneScaffold required a refactoring of our existing logic, the process was effortless and quick. This integration allows us to efficiently organize primary and secondary content in the to-do details. The supporting pane automatically adjusts the UI based on the window size class, eliminating the need for additional custom logic.

*SupportingPaneScaffold showcasing to-do details in the main pane and a comments section in the supporting pane

Spoiler

*Some details have been removed to avoid revealing internal implementation specifics.

A complete guide to integrating M3 Adaptive Components can be found here.

Large screen app quality guidelines

Google has established large screen app quality guidelines to ensure that your adaptive app performs optimally on tablets, foldable devices, and ChromeOS. These guidelines include tests that help you verify the functionality of your app for essential user journeys.

Learn More About Large Screen Design and Implementation

For those interested in diving deeper into the topic, here are some valuable resources:

We are currently also looking into other canonical layouts to further improve the user experience for large screen devices. Stay tuned for more updates as we continue to enhance SAP Mobile Start! 🚀

By Laura Bergmann (Lead UX Designer) and Aditya Arora (Lead Android Developer)

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

For further information on the new topics, please check our SAP Mobile Start documentation on SAP Help.

SAP Mobile Experience offers intelligent native mobile solutions that help businesses build more efficient, resilient, and sustainable end-to-end processes, improving people’s work life wherever they are.

Visit SAP Mobile Experience Community Page and click “follow” to get the latest development and innovation of our solutions. We look forward to hearing your experience with setting up the solution in your landscape; please do share your thoughts and comments below. Enter here for additional questions regarding SAP Mobile Experience Applications. Want to be notified? Check your profile settings to ensure you have your settings activated.

Modernizing SAPUI5 with React and UI5 Web Components: Simple Note App

2024-10-29T12:27:38.418000+01:00

Hello, SAP Community!

I’m excited to share a latest small demo project, where I experimented with modernizing SAP UI5 using UI5 Web Components and React. My goal was to create a Notes Application with a modern interface while maintaining the familiar UI5 experience. In this post, I’ll walk through the process, share some code, and hopefully inspire you to explore UI5 Web Components in your projects!

📸Project Overview

This notes app demonstrates how to use the latest UI5 Web Components in a React environment, leveraging Vite for a fast, modern development experience.

Why UI5 Web Components?

UI5 Web Components bring the familiar SAP Fiori design to the world of standard web components, making it easy to use UI5 components in frameworks like React, Vue, Angular, and more. They provide:

Reusability across different JavaScript frameworks.
Standardized web components that are lightweight and fast.
Seamless integration with existing SAP UI5 controls.

🔨Tech Stack

UI5 Web Components: Provides the core UI elements like Shellbar, Cards, BusyIndicator, etc.
React & TypeScript: For component-based architecture and type safety.
Vite: Modern build tool for super-fast development and bundling.

📝Key Features

Add, Edit, and Delete Notes with a clean and responsive UI.
Sorting and Filtering functionality using custom search and filter logic(automated).
Theming support, allowing dynamic theme changes.
State Management with React hooks to handle the component states.

Try the link below for Demo:

https://ui5-webcomponent-react-demo.vercel.app/

Note: Data provided are just Javascript arrays

Implementing a quick collapse for the UI5 Splitter control

2024-10-29T14:51:58.834000+01:00

Recently a question came up in an internal channel about how to implement a quick collapse feature for the UI5 Splitter control. Actually, the question was about the ResponsiveSplitter, which already has a quick collapse feature when double clicking on the splitbar, but it would only collapse the first (left) content area. The question was how can we collapse the second (right) content area, or any other content area for that matter, if the user clicks on the splitbar? I built a small custom control that does that, and instead of keeping it internal, I thought I would share it with the community, so hopefully more people can benefit from it.

Let's start with the custom control itself:

sap.ui.define([
    "sap/ui/layout/Splitter"
], function(SuperControl) {
    "use strict";

    return SuperControl.extend("myui5app.control.CustomSplitter", {
        metadata: {
            properties: {
                quickCollapseIndex: { type: "string", defaultValue: "" }
            }
        },

        renderer: {},

        onAfterRendering: function() {
            if (sap.ui.layout.Splitter.prototype.onAfterRendering) {
                sap.ui.layout.Splitter.prototype.onAfterRendering.apply(this, arguments) //run the super class's method first
            }
        },
	    ondblclick: function(e) {
	        if (e.target.id === this.getId()) {
	            const allContentAreas = this.getContentAreas()
		        if (this.getQuickCollapseIndex()) {
		            const contentAreaToCollapse = allContentAreas[this.getQuickCollapseIndex()]
		            contentAreaToCollapse.getLayoutData().setSize("0px")
		        }
	        }
	    }
    })
})

This custom control extends the sap.ui.layout.Splitter, which the sap.ui.layout.ResponsiveSplitter (which the original question referred to) also extends. It attaches a new dblclick event listener to it. The event listener method first checks that it's actually the splitbar that was actually being clicked on (not one of the content areas). It then gets its newly created quickCollapseIndex attribute (which we will have to define when using the custom control), finds the corresponding content area among all of them, and eventually sets its size to 0px (via the layout data).

We can now use this custom control in an XML view:

<mvc:View
    controllerName="myui5app.controller.MainView"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m"
    xmlns:cc="myui5app.control"
    xmlns:l="sap.ui.layout">
    <Page id="page" title="{i18n>title}">
        <cc:CustomSplitter quickCollapseIndex="1">
            <HBox>
                <Title text="My first content area" />
            </HBox>
            <HBox>
                <layoutData>
                    <l:SplitterLayoutData size="50%" />
                </layoutData>
                <Title text="My second content area" />
            </HBox>
        </cc:CustomSplitter>
    </Page>
</mvc:View>

When using the custom control, we set the quickCollapseIndex attribute to 1, which basically means it should collapse the second content area (zero-based index). This works with any other content area as well. Perhaps the only drawback with this custom control is that we do have to set an initial size for the content area we want to collapse, otherwise it won't work. I am not really sure why, but it is what it is.

This is the CustomSplitter in action:

Thanks for reading!

Introducing the new Adaptation Editor experience for SAPUI5 adaptation projects

2024-10-31T07:20:49.591000+01:00

SAPUI5 flexibility to adapt standard SAP apps

SAPUI5 is SAP’s strategic Web framework for Web applications such as SAP Fiori. In this context, SAPUI5 flexibility offers capabilities to adapt standard apps, not only for developers but also for key users and end users using simple WYSIWYG drag and drop tools. Learn about all the capabilities: SAPUI5 Flexibility - All You Need to Know. SAPUI5 flexibility provides features to realize a clean core approach with on-stack extensions: SAP standard apps remain untouched, no modifications are needed, and even predefined extension points are not needed anymore.

Developers can leverage the concepts of SAPUI5 flexibility by using SAPUI5 adaptation projects in SAP Business Application Studio (BAS), the development environment of SAP Build Code. Those projects contain all code-based custom adaptations, created in the various editors of BAS.

📣 Goodbye SAPUI5 Visual Editor, welcome Adaptation Editor

Following Introducing SAPUI5 Adaptation Projects in Visual Studio Code I now have more news: To improve the development experience and harmonize the editors for SAPUI5 adaptation projects offered in BAS and VS Code, BAS now features the new Adaptation Editor, replacing the SAPUI5 Visual Editor.

Picture: New Adaptation Editor

The Adaptation Editor

… opens in a separate browser tab, offering more space for the editor and especially for the canvas showing the app preview. This let’s you view the (desktop) app in a more realistic size to understand how it will look like for your end users,
… launches and runs much faster and more robust. Keep in mind that for launching, it still needs to pull the standard app from your (on-prem) system,
… has a slightly changed UX flow with a dedicated button to explicitly save changes and then continue to work on your code in the BAS browser tab,
… adds support for SAP S/4HANA Cloud in VS Code,
… is now part of the “SAP Fiori Tools – ADP” extension of BAS, contained e.g. in dev spaces of type ‘SAP Fiori’. With this, the delivery of tools around SAP Fiori has a hamonized foundation for future capabilities, which will further enhance the developer experience.

The new Adaptation Editor

The Adaptation Editor provides an intuitive experience to work with adaptation projects. It features:

the Outline pane (top left) to understand the structure of controls on the page
the Changes (bottom left) you’ve done so far
the Canvas (middle) to preview your application and create changes
the Properties (right) pane view / edit control properties
A toolbar allowing you to use:
- Navigation mode to ‘use’ the app and navigate through it until you found the area to adapt,
- UI Adaptation mode to add custom changes. Selecting an element in the Canvas highlights it in the Outline and shows its properties,
- Save to … well, save your changes after condensing them to the minumum.

Launch the new Adaptation Editor

See the SAP Help documentation on Adapting an Application. The high-level steps are:

Create an SAPUI5 adaptation project in SAP Business Application Studio.
In the Explorer, click Open Adaptation Editor in the context menu of your project. Alternatively, use the Command Palette to find the command Fiori: Open Adaptation Editor.

See more details in:

Product Updates for SAP Build Code – October 2024 Edition

2024-10-31T08:33:00.135000+01:00

Dear SAP Community,

I’m thrilled to announce the latest updates to SAP Build Code designed to enhance your developer experience and productivity. At the heart of this update are several highly anticipated capabilities including the use of Joule for your code search, the seamless migration of existing projects from SAP Business Application Studio, and many more. Let's dive into the details of what's new!

Using Joule for Code Search

We are excited to announce the release of a new feature that will help you when you search for code within your projects. With Joule copilot, you can now use natural language queries to quickly and easily locate specific code snippets, making your development process faster and more efficient. Simply open Joule from the activity bar and select /code-search Search the repository at the bottom of the Joule panel on the left side. You can then ask Joule what you're looking for, and it will instantly show you the files relevant to your search criteria, saving you time and effort in your coding journey. More information is available in our help portal.

The code search within Joule

The SAP AI Code Assistant

The SAP AI Code Assistant is designed to help developers to write code more efficiently and effectively. This innovative solution leverages the power of artificial intelligence to provide intelligent code suggestions. When writing code, press tab and the SAP AI Code Assistant will provide real-time suggestions for the next line of code. If you don’t want to use the SAP AI Code Assistant, it is also possible to disable this feature. To learn more about the SAP AI Code Assistant read the corresponding section in the help portal.

The SAP AI Code Assistant

SAP MDK Development with the Joule Copilot

SAP Build Code has recently been updated with a new mobile development experience, tailor-made for developing SAP mobile development kit (MDK) based applications. We're thrilled to announce that you can now supercharge your existing MDK projects with the help of generative AI capabilities through the Joule copilot. This new feature enables you to generate app definitions, including i18n files, pages, and actions, by leveraging AI. For further information, I recommend to read the following blog post written by my colleague Jitendra Kansal: Streamline SAP MDK Development with the Power of Generative AI and Joule.

SAP HANA Cloud SQL generation via Joule

The SQL console provided by the SAP HANA Database Explorer extension in SAP Build Code supports SQL statement generation via natural language. Users can enter a text prompt and use the new run method “Run Prompt” to generate a SQL statement that can be executed on the SAP HANA Cloud database.

New run method “Run Prompt”

The generated statement can be executed like any other statement directly from the SQL console.

SQL Statement

During the SQL statement generation the prompt along with additional information about SAP HANA is passed to the large language model (LLM). The additional information is gathered mostly from the SAP HANA Cloud documentation. With this information as the context the LLM can generate syntactically valid SQL statements that can be executed on SAP HANA Cloud. As with all AI-generated information users should check the statements carefully before executing them to avoid unintended side-effects.

With this feature users can easily interact with the SAP HANA Cloud database via natural language without having to know the exact details of the SAP HANA Cloud SQL syntax. Of course, if required, the syntax can be conveniently accessed via the syntax help panel in the SQL console for further information and fine-tuning.

Seamless Migration of Existing Projects from SAP Business Application Studio

Are you looking to migrate your already existing projects from the SAP Business Application Studio Dev Space Manager to your SAP Build Code tenant? Then the following feature will be relevant for you. With the latest release, you can now transfer your existing projects into the SAP Build Code tenant effortlessly using the "Add from Dev Space" feature. This allows for a smooth transition, enabling you to continue developing your projects without any disruption. The migration process is simple and straightforward. Just a few clicks, and your projects will be seamlessly transferred to the SAP Build Code tenant. For more information on the migration process see Add Projects From Dev Space.

Select “Add from Dev Space” to migrate an existing project

Export your Existing Projects to a CSN File

We are excited to announce that you can now export your already existing Full-Stack Application Using Productivity Tools project to a CSN (Core Data Services Schema Notation) file, which can be imported into an ABAP project using ADT (ABAP Development Tools). This feature allows you to create ABAP services or business objects directly from the imported file, making it easier than ever to streamline your development process. Find the prerequisites and a detailed description of the procedure in our help portal.

Export an existing project to a CSN file

ABAP Cloud is now part of SAP Build

SAP Build was launched at SAP TechEd 2022. At TechEd 2023 we announced SAP Build Code as part of the SAP Build family. SAP Build Code is generally available since March this year. We have now reached another milestone: ABAP Cloud is now part of SAP Build! This exciting addition allows developers to seamlessly work across their ABAP, Java or JavaScript, and low-code projects all from the convenient starting point of the SAP Build Lobby. With this new integration, developers can easily create new ABAP Cloud projects or work on existing ones starting from the SAP Build Lobby and then navigate to their ABAP development environment. Further there’s a tool bridge between ADT and SAP Business Application Studio, which connects the front-end with the back-end development. It keeps the context of the services and entities as input for the SAP Fiori UI generator. I highly recommend reading the following blog posts for further details:

Unveiling today: SAP Build meets ABAP Cloud!

The next step of ABAPs evolution: ABAP Cloud now part of SAP Build

Extending your SAP Business Technology Platform Applications

The Service Center provides a single access point for accessing various services offered by multiple service providers. You can utilize the services as data sources or integrate events and functions from the Service Center into your application. It is now possible to extend your SAP BTP applications using Remote Function Calls or ABAP business objects:

A Remote Function Call (RFC) is the standard SAP interface for communication between SAP systems. You can now explore RFCs in the Service Center and add them to your Full-Stack Application Using Productivity Tools project.

Exploring SAP System Functions in the Service Center

You can now generate a custom UI service for your project based on an ABAP business object using the Service Center. The service enables you to develop an SAP Fiori application based on your own custom UI service eliminating the requirement for the front end developer to integrate with other tooling outside SAP Build Code to create the needed service. Simply navigate to the service center and choose the Business Object on the system from the list provided. Click on the ‘Add to SAP Fiori Project’ button. Then the UI Service Generator will launch, enabling you to create the service.

Exploring SAP System Business Objects in the Service Center

The UI Service Generator

UI5 linter v1.0 Now Available

We are happy to announce the official release of UI5 linter v1.0, a static code analysis tool for UI5 projects initially introduced in March 2024 by Oliver Graeff . Over the past few months, we've incorporated valuable community feedback and enhanced the tool with additional detection features. Explore the improvements and experience the benefits of the newly released UI5 linter v1.0!

To learn more about UI5 Linter v1.0, please read Florian Vogt’s blog post: Release of UI5 linter v1.0.

New Adaptation Editor for SAPUI5 Adaptation Projects

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. For further information I recommend reading this blog post: Introducing the new Adaptation Editor experience for SAPUI5 adaptation projects.

TechEd Highlights

SAP TechEd 2024 has come to a close, showcasing a wealth of exciting new innovations on the SAP Business Technology Platform (BTP). If you want to stay up-to-date on all the cutting-edge insights and innovations from the event, be sure to check out our on-demand content. Dive into the latest trends and solutions for app development with SAP technologies. You can still access all the replays via the session catalog of SAP TechEd Virtual 2024.

For a summary of all the SAP Build Code sessions at SAP TechEd 2024 I recommend to read this blog post. In addition, I recommend the following session:

Build AI-enabled intelligent data applications to help keep the core clean. In this session, you learn how to build intelligent data applications using the development framework of SAP Business Technology Platform, including SAP Business Application Studio and SAP Cloud Application Programming Model, in combination with the native development capabilities of SAP HANA Cloud.

Take our User Survey

We want to hear from you! Take just five minutes to complete our SAP Build Code user survey and shape the future of SAP Build Code with your input! To take part in the user survey visit the following link: https://sapinsights.eu.qualtrics.com/jfe/form/SV_4Mwqjt6P4F98ke2

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 UI5 Integration Cards - Beginners Steps ( Understanding of JSON) to transform into Dashboard

2024-11-02T09:04:31.601000+01:00

Understanding the Manifest.json File: Detailed explanation of the manifest.json file and its key components.

Reference blog : https://community.sap.com/t5/technology-blogs-by-sap/how-you-can-prepare-your-own-template-using-sap-ui5-integration-cards/ba-p/13881521

Prepare a Sample UI5 Integration Card with lightweight approach referencing your Odata API

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<title>Card As Custom Element</title>
		<script src="https://ui5.sap.com/resources/sap-ui-integration.js"
				id="sap-ui-bootstrap"
				data-sap-ui-theme="sap_horizon">
		</script>
		<style>
			.myCard {
				margin: 1rem;
				width: 17rem;
                .sapFGridContainer {
                padding: 12rem;
            }                
			}
			.myTable::after {
				margin: 1rem;
				width: 27rem;
                .sapFGridContainer {
                padding: 12rem;
            }                
			}            
		</style>
	</head>
	<body class="sapUiBody">  
		<ui-integration-card
			badge="New"
			id="cardCustomElement"
			manifest="./manifest.json"
			data-mode="Active"
			base-url="./"
			class="myCard">
		</ui-integration-card>
	</body>
</html>

manifest.json

{
	"_version": "1.14.0",
	"sap.app": {
		"id": "card.explorer.data.list.card",
		"type": "card",
		"title": "Sample for Client-Side Pagination in Cards",
		"subTitle": "Sample for Client-Side Pagination in Cards",
		"applicationVersion": {
			"version": "1.0.0"
		},
        "sap.ui5": {
            "rootView": {
                "viewName": "sap.ui.integration.sample.Destinations.Destinations",
                "type": "json",
                "async": true
            },
            "dependencies": {
                "libs": {
                    "sap.f": {},
                    "sap.ui.core": {},
                    "sap.ui.integration": {}
                }
            },
            "config": {
            }
        },        
		"shortTitle": "A short title for this Card",
		"info": "Additional information about this Card",
		"description": "A long description for this Card",
		"tags": {
			"keywords": [
				"Data",
				"Pagination",
				"Card",
				"Sample"
			]
		}
	},
	"sap.card": {
		"type": "List",
		"data": {
			"request": {
				"url": "https://services.odata.org/V4/Northwind/Northwind.svc/Products",
				"parameters": {
					"$format": "json",
					"$top": 5,
					"$count": true
				}
			},
			"path": "/value/"
		},
		"header": {
			"title": "Products",
			"subTitle": "In Stock Information",
			"icon": {
				"src": "sap-icon://product"
			},
			"status": {
				"text": "{= format.text(${i18n>CARD.COUNT_X_OF_Y}, [${parameters>/visibleItems}, ${/@odata.count}]) }"
			}
		},
		"content": {
			"item": {
				"title": "{ProductName}",
                "description": "{UnitsInStock} units in stock",
				"description1": "UnitPrice {= format.currency(${UnitPrice}, 'EUR')}",                
				"highlight": "{= ${Discontinued} ? 'Error' : 'Success'}"
			}
		}
	}
}

Deployed Samples : https://yogananda-muthaiah.github.io/UI5-Integration-Cards-samples/

Source code : https://github.com/yogananda-muthaiah/UI5-Integration-Cards-samples

Source code with simple : https://github.com/yogananda-muthaiah/ui5-integration-cards

References : https://community.sap.com/t5/technology-blogs-by-sap/how-you-can-prepare-your-own-template-using-sap-ui5-integration-cards/ba-p/13881521

Unlocking Efficiency: Leveraging SAP BTP Document Management Service in Fiori Applications # 1

2024-11-11T04:39:26.769000+01:00

INTRODUCTION

In today's digital landscape,efficient document management is crucial for businesses aiming to streamline operations and enhance productivity.The SAP Business Technology Platform (BTP) Document Management Service offers a robust solution for managing documents seamlessly within SAP Fiori applications.
In this blog series we will explore different scenarios and find suitable solutions to integrate DMS into SAP Fiori Applications. This will help consultants to
Blog # 1: Embed SAP BTP Attachment Reuse UI in a Custom Fiori App
Blog # 2: Embed SAP BTP Attachment Reuse UI in an SAP Fiori Elements application
Blog # 3: Using SAP BTP DMS in an SAP Business Process Automation and integrate to a Task UI application
Blog # 4: Using SAP BTP DMS API for Custom requirements
In the first part of the blog series, we’ll touch base on the features of SAP BTP DMS service, the Reusable UI component and its integration with a Fiori application.

Understanding SAP BTP Document Management Service

The SAP BTP Document Management Service provides organizations with a centralized repository for storing, managing, and retrieving documents. It's based on the OASIS (Organization for the Advancement of Structured Information Standards) industry standard CMIS (Content Management Interoperability Services)

Key features include:
•Version Control: Manage document versions to ensure users access the most current information.
•Access Control: Set permissions to safeguard sensitive documents and ensure only authorized personnel can view or edit them.
•Integration Capabilities: Easily connect with various SAP and non-SAP applications, allowing for a holistic document management approach.
You can consume the SAP Document Management Service in different ways:
•SAP Document Management service, integration option lets you build document management capabilities for your business applications.
•SAP Document Management service, application option is a stand-alone, ready-to-use web application that provides document management capabilities for your enterprise content.

Key Benefits of Using Document Management Service in Fiori

Integrating the Document Management Service into Fiori applications can yield significant advantages:

•Enhanced User Experience: Fiori’s intuitive design combined with the Document Management Service allows users to access and manage documents effortlessly within their workflow.
•Increased Collaboration: Teams can share and collaborate on documents in real time, improving communication and decision-making processes.
•Streamlined Processes: Automating document-related tasks reduces manual effort, allowing employees to focus on higher-value activities.

Prerequisite
1.Set up a Dev Space in Business Application Studio
2.Add Entitlement for following services in your subavcount
a.SAP BTP Document Management Service, Integration Option – Standard (Instance)
b.SAP BTP Document Management Service, Application Option – Standard (Subscription)
3.Cloud Foundry

Setting Up Document Management Service
SAP BTP Document Management Service set up is covered in multiple blogs and SAP Help. Hence, we are not getting in details.

https://help.sap.com/docs/document-management-service/sap-document-management-service/initial-setup-for-document-management-service-integration-option
https://help.sap.com/docs/document-management-service/sap-document-management-service/consume-reuse-ui-for-document-management-service

For this blog series, we used “SAP BTP Document Management Services, Application option”.

1.Access Manage Repository app

2.Add a new Repository

3.Once the Repository is created use “View and Manage Repository Documents” app to add the folders we need for different scenarios in our series.

Note down the Repository ID and Folder ID (Object ID) for the “General” folder. This will be used in the current blog. If you are using DMS Application option, the Root ID and Folder ID can be retrieved form directly the url. It will be in format of

https://<sub-account-url>/cp.portal/site#user-display?sap-ui-app-id-hint=com.sap.ecm.sdm.user&/documents/v1/open/rep=<RepositoryID>&obj=<ObjectID>

You may also use DMS API to retrieve the details. Please check the link shared earlier.

Scenario # 1:
We start with a simple scenario. We need to provide user to be able to access “General/Scenario 1” folder in a custom Fiori App to manage the attachments.

Step 1:
Create a new custom Fiori Application “dmsreuseuicustomapp” using SAP Fiori Generator wizard in Business Application Studio.

Step 2:
Update Manifest file to use the Reuse UI.
Add the Component usage following under “sap.ui5” section.

"componentUsages": {
"documentTable": {
"name": "com.sap.ecm.reuse.documentTable",
"settings": {
"destinationPath": "/comsapecmreuse.comsapecmreusedocumentTable/api", "repositoryId": <RepositoryId> 
"objectId": <ObjectID>
}
}
},

After Component Usage, add the resource roots attributes

"resourceRoots": {
"com.sap.ecm.reuse.documentTable": "./../../comsapecmreuse.comsapecmreusedocumentTable/",
"com.sap.ecm.reuse.admin": "./../comsapecmreuse.comsapecmreuseadmin/"
}

The standard Reuse UI comes in 2 variants “documentTable" and “admin”. We are going to use “documentTable” variant for this blog series.

The Repository ID and Object ID can be bound to a property in model or can be assigned through controller also. We will look into these options in subsequent blogs.

Step 3:

Update View file to include the Reuse Component using sap.ui.core.ComponentContainer control.

<mvc:View controllerName="com.sap.demo.dmsreuseuicustomapp.controller.View1"
xmlns:mvc="sap.ui.core.mvc" xmlns:core=”sap.ui.core” displayBlock="true"
xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<VBox id="vbox1">
<Title id="title1" text="Scenario #1: Embedding Reuse UI in Custom App"></Title> <core:ComponentContainer id="sdi-document" usage="documentTable" async="false" manifest="true"/>
</VBox>
</content>
</Page>
</mvc:View>

Step 4:

Update xs-app.json file to include route for DMS Integration API.

{ "source": "^/comsapecmreuse.comsapecmreusedocumentTable/api(.*)$", "target": "$1", "authenticationType": "xsuaa", "service":"com.sap.ecm.reuse", "endpoint": "ecmservice" }

Step 5:

Update MTA file to enable authentication and authorization using client credential between Fiori Application and DMS service.Add Document Management Service, Integration option as a module.

- name: test-dms parameters: service-key: name: sdm-key

Add destination configuration for DMS instance using the client credentials.

- Name: test-dms Authentication: OAuth2UserTokenExchange ServiceInstanceName: test-dms ServiceKeyName: sdm-key

Finally, add the DMS instance under resources section

- name: test-dms type: org.cloudfoundry.managed-service parameters: service: sdm service-name: test-dms service-plan: standard

Step 6:
Deploy your app in cloud Foundry environment. You may choose to use context menu in project or use terminal commands (mbt build & cf deploy)

Step 7:
Log-in to SAP BTP Cockpit and find the deployed application under „HTML Applications“ section.

Click on the application to launch it in a new tab.
The application has the Reuse UI embedded and the „General“ folder is launched as Root folder.

Step 8:
Create a new folder named „Scenario 1“ and upload a new file in the folder.

Go back to the SAP BTP DMS, Application option service and check the standard application to verify the files are uploaded.

Conclusion

We learned how to embed the standard SAP BTP DMS Reuse UI in a custom Fiori App using few simple steps.
In the next blog of the series we will try to embed the Reuse UI into Fiori Element apps.

How Generative AI Can Assist in SAP Fiori Applications: A Practical Demonstration

2024-11-13T16:39:15.391000+01:00

What if your SAP Fiori applications could anticipate your needs and provide intelligent suggestions to streamline your workflow? With the rapid advancements in artificial intelligence, integrating generative AI models into enterprise applications is no longer a distant future but a present opportunity to enhance efficiency and decision-making.

In this post, I'll share a practical demonstration of how I integrated a generative AI model into an SAP Fiori application using OpenUI5. This solution enhances the creation of maintenance orders by providing AI-generated suggestions based on the order's title and description, helping users avoid overlooking critical steps.

The Solution

I developed a frontend application using OpenUI5, hosted on Vercel, that mirrors a maintenance order request interface in SAP Fiori. The key enhancement is the addition of AI-generated suggestions that appear as the user inputs the maintenance order's title and description.

You can test the live application yourself here: https://fiori-app-form.vercel.app/

These suggestions offer important steps for performing the task, effectively serving as a smart checklist to assist users in making informed decisions.

Technical Details

Development Environment

Frontend: Built with OpenUI5 and deployed on the Vercel platform.
Backend: A locally running API utilizing a generative AI model (LLM) to process user inputs and generate suggestions.

Integration with AI

The integration with the generative AI model is achieved through HTTP requests to the local API. When the user enters the maintenance order's title and description, this data is sent to the API, which processes it and returns a list of suggested steps.

.route('/infer', methods=['POST'])
def infer():
    """Endpoint para gerar conteúdo com a API do Google."""
    data = request.get_json(force=True)

    if not data or 'prompt' not in data:
        return jsonify({'error': 'No prompt provided'}), 400

    try:
        prompt_parts = [data['prompt']]
        response = model.generate_content(prompt_parts)
        output_text = response.text

    except Exception as e:
        logging.error(f"Erro na inferência: {e}")
        return jsonify({'error': str(e)}), 500

    return jsonify({'output_text': output_text})

Interface Implementation

The user interface is crafted to be intuitive and familiar for SAP Fiori users, which helps to reduce the learning curve. Standard OpenUI5 components are utilized to gather user input and present AI-generated suggestions.

<!-- Botão "Gerar Sugestões" -->
                <Button id="generateSuggestionsButton" text="Gerar Sugestões" press="onGenerateSuggestions" class="sapUiSmallMarginTop" />

                <!-- Lista de Passos Sugeridos -->
                <Label text="Passos Sugeridos" class="sapUiSmallMarginTop" />
                <List id="suggestionsList" width="80%" items="{suggestionsModel>/suggestions}">
                    <StandardListItem title="{suggestionsModel>}" />
                </List>

Demonstration in Action

Here's how the application works in practice:

Title: "Air Filter Replacement"
Description: "The air filter of the compressor needs to be replaced due to particle buildup."

Upon entering this information, the user receives immediate suggestions:

1. Turn off the compressor and disconnect it from the electrical power.
2. Locate the air filter, which is usually in a plastic or metal case.
3. Loosen the screws or clips securing the air filter box.
4. Remove the old air filter and inspect it for dirt and damage.
5. Insert the new air filter into the housing and secure it with the screws or latches.
6. Replace the air filter box on the compressor.
7. Turn on the compressor and check for air leaks.

You can test the live application yourself here: https://fiori-app-form.vercel.app/

This practical demonstration highlights the potential of integrating generative AI models into SAP Fiori applications. While this example operates locally without OData communication, it showcases how AI can be leveraged to improve daily tasks and workflows.

I'm excited to hear your thoughts! Share your experiences, ideas, and questions in the comments.

Thank you for reading! If you're interested in more technical details or have any questions, feel free to reach out.

SAP Fiori SAP AI Core SAP AI Launchpad Artificial Intelligence SAP Maintenance Assistant mobile app