SAP Community - User Interface

New Asynchronous Export to Spreadsheet Feature for the Multidimensional Data Grid Apps

2024-02-27T11:20:25.612000+01:00

Dear SAP Community,

In 2021, the Web Dynpro Multidimensional Data Grid App replaced the SAP Design Studio app as default reporting tool for drill-down reporting in SAP S/4HANA.

Initially designed for human interaction, this web application offers an export feature that has been continuously improved and streamlined over time:

Export of PDF files
Streamlining of export to improve performance
Google workspace integration with the possibility to export spreadsheets to Google directly
etc.

However, there always was the possibility that the amount of data cells simply was too large, and the system would run out of memory, or into a timeout. SAP Note 2547776 introduced a popup message that warned a user of these risks in case more than 100.000 cells would be exported.

Now the next step in terms of performance optimization has been taken by offering to export large amounts of data in a background task. Furthermore, the user can trigger the export in the background (see Figure 1), and continue working in the application without having to wait until the export has finished, with or without the application still alive and running.

Figure 1: “Export to Spreadsheet” popup with a new function to trigger the export in the background.

Once the background task has finished, if the application that has triggered it is still running, the user is informed of the success (or failure) of the export. The exported file is then available for download for the next 72 hours. Expired files will be deleted automatically from the database table.

The files can be accessed either in a new tab “Downloads” (e.g. in the generic FPM_BICS_OVP apps), or in a dialog window that can be accessed via the download button choice for applications that do not offer the new tab directly (see Figure 2). In both cases, the same component is used, and the layout is the same.

Figure 2: List of downloads to monitor the status and access the result of the asynchronous exports.

In the list of downloads in this example, the first file “export.xlsx” already has been exported successfully, while the second file “demo_export” is currently being exported. Download is possible only for successfully exported files, while deletion is possible also for entries where the export has failed or is currently in progress. However, deleting an unfinished export does not abort the background process.

During a single user session, only one background export can be executed at any given time. If you start an export in background while there is still another process running, the new process will not be started, and an error message will be displayed.

It should be noted that this does not mean that unlimited amounts of data can be exported from the grid now. There are still scenarios where the amount of data required to export a file is outside the boundaries of memory allocation for a work process. This depends not only on the number of cells in the grid, but also on their (conditional) formatting and merging, variables, and filters, down to the definition of the query and the used database tables. Even the database technology may have an influence on how much data can be processed at once.

The feature is available with SAP Note 3427386 for SAP_BW 757 and 758, and SAP Note 3434831 for BW/4HANA 400, and it is planned to be contained in the 2408 updates of SAP S/4HANA Cloud Public Edition and SAP BW/4HANA Cloud Public Edition.
[A previous version of this blog stated that it will be contained in the 2408 update. Since this is current state of planning and may be changed by SAP at any time without notice, the wording has been adopted.]

With this new feature, you can more easily export data from a Multidimensional Data Grid Apps without blocking the application and reduce the risk of running into error situations.

SAP Fiori for SAP S/4HANA - Empowering Your Homepage: Enabling My Home for SAP S/4HANA 2023 FPS01

2024-04-26T11:34:59.906000+02:00

LATEST UPDATES:

January 2025 - To avoid performance issues insight cards we recommend disabling the pre-defined analytical cards that are available to some roles using SAP Note 3544177 - Visibility Check for the Pre-Delivered Analytical Cards. Users can add cards from their apps using the Add Card to Insights feature.

Good news! The new My Home page is finally available with the SAP S/4HANA Private Cloud Edition (and on-premise) solution with the SAP S/4HANA 2023 FPS01 release. So it’s time to explore more about the sections and features that it contains.

The new My Home is like your personal command center for work. It provides you with a super easy way to find all the important information that you need to get your job done faster. With the new My Home entry page, you can keep track of your tasks and situations, check out key insights via analytical tiles and cards, and you can access your favorite pages and apps from any device. It offers a space of your own space with enhanced personalization capabilities and a better user experience! Plus, it builds on the features of the SAP Fiori Launchpad, using spaces and pages to make everything run smoothly.

New My Home available with SAP S/4HANA 2023 FPS01

As a part of this blog post, you will:

Get familiar with the structure of the new My Home
Explore the various building blocks / technical components necessary for My Home
Learn how to enable My Home functionality step-by-step
Discover how to assign My Home to your business users

If you are interested in learning about the features and functionality about the new My Home in SAP S/4HANA from an end user's perspective, you are recommended to refer to this blog from Thomas Reiss User Experience Advances with SAP S/4HANA 2023 FPS01 (Private Cloud and On-Premise).

IMPORTANT : Please keep in mind that to enable My Home on SAP S/4HANA 2023 (as of March 2024), you need to have at least the first feature pack stack installed for this product version, that is SAP S/4HANA 2023 FPS01.

IMPORTANT : In this blog post, for brevity, the abbreviation FLP = Fiori launchpad and My Home = My Home in SAP S/4HANA.

Structure of the My Home - main components

Let’s get started by understanding its structure and components briefly before we deep dive into configurations and the other technicalities.

The standard entry page contains the following sections and functionality.

#	Section	Functionality
1	To-Dos	This section contains two parts: Tasks - That are populated from the My Inbox App Situations - That are populated from the My Situations App Note: At the time of writing the blog, the My Situations Extended App was not integrated with the view You also have an option (depending upon your release) to either see a contact card or to directly send an email to the concerned Task Owner or Situation Owner from the Task / Situation tiles.
2	Pages	This section can be personalized by the user with their favorite Launchpad Pages. However, at the beginning (without any user personalization) it shows up to the first 8 pages that are assigned to the user. For these 8 Pages, you see 8 different colors which are assigned automatically from the color palette. Each colored Page would have a title and a subtitle that corresponds to the Page title and Space title respectively from the Page they belong. In case both the Space and Page titles are the same, you would just see a title without any subtitle. For example the Fiori Launchpad page in the below screenshot.
3	Apps	This section is comprised of the following parts: Favorites- Under this tab, you can add Tiles from various other Spaces and Pages. You can also group these applications together under a custom group with a custom name. For example, the group My Sales Analytics in the following screenshot is a customized app group. If you navigate to a page from the Pages section (of My Home) described above and you add a tile as a favorite (from User Action Menu --> Edit current Page, and from a tile menu --> Add to My Home). You will see that the app gets added to the favorites tab, with the same color as the original Page. For example Manage Sales Order, My Inbox and Sales Order Fulfillment apps in the following screenshot were added via Overview – Internal Sales Page, Manage Sales Quotation, Manage Credit Memo Requests, and Manage Debit Memo Requests from Sales Processing – Internal Sales and so on. However, If you perform the same action on any other page (other than these 8 colored pages, from the Pages section), the app that you mark as a favorite is displayed in a random color that can be customized by the end user. You can also add an App tile via the App Finder (by choosing the My Home Page under My Home space), and if that application is not a part of your favorite pages, then a random color is applied to the marked favorite App, which is usually the grey color. For example, Manage Workflows App in the following screenshot is grey in color. Most Used - This list gets populated from the system and is based on the most used applications in terms of their frequency. Note : For the Most Used and Recent Used tabs to appear, the business users must enable User Activities tracking in their Fiori launchpad > User Actions > Settings dialog. Recently Used - This list gets populated from the system and is based on the recently used apps (i.e., based on a descending timestamp order). One very cool feature supported by the Recently Used tab support is the "Resume Last Activity" option, where you can return to the same application state (i.e., same filters variants, same table variants etc.) from where you last left the application.
4	Insights	This comprises of two parts (which while populated, splits up into two different sections): Insights Tiles: You can use the Add Tiles option from the Insights section to add Dynamic tiles as your content. The system would typically propose Dynamic Tiles (such as KPI tiles) as a part of this section. However, just like other areas, you could jump to App Finder and include any tile here). The primary purpose of this section is to place analytical tile content in it for quick insights. Insights Cards: Here you can add cards from SAP Fiori Elements based Overview Pages(OVP) and List/Table cards from List Reports(LR) and charts from Analytical List Pages(ALP) . You also have options to add filters and change the chart type of the standard content while adding them from an OVP / LR / ALP page. Once you have added your filters and pressed Go. Use 'Add Card to Insights' option on the card. This will preserve the filters with the insight card.Example : 'Add Card to Insights' option

My Home - Building Blocks and Technical Components

Now that you are familiar with a basic structure of My Home, let's look at some of the technical components involved as part of it.

Spaces and Pages Layout: This entry page is based on the Spaces and Pages layout, which is a must to enable the My Home capability.
SAPUI5 Home Component: Available as a part of SAP FIORI FES FOR S/4HANA 2023 FPS01 (SAP S/4HANA 2023 FPS01), This component contains the user interface for My Home in SAP S/4HANA. Just like other UI5 applications, this is based on a BSP application (a SAPUI5 Component) PRODUCT_HOMES1.
SAP Fiori Launchpad Configuration : By default the My Home is disabled in S/4HANA 2023 FPS01 and you need to do some Fiori Launchpad configurations using Launchpad Configuration Parameters in order to enable My Home in SAP S/4HANA.
Required App Authorizations: The To-Dos section only displays the Tasks and Situations if you have the target mappings for the My Inbox App and the My Situations App assigned to the Fiori User (i.e. if you have authorizations to access these applications)
Various OData Services involved: The following table summarizes various OData services required to use the My Home in SAP S/4HANA, based on its various components.

#	Section	OData Service	OData Version	Description
1	To-Dos	For Tasks: TASKPROCESSING (Namespace: /IWPGW/ )	V2	Task Gateway Service, required for My Inbox Tasks
		For Situations (Standard Situations): C_SITNMYSITUATION_CDS	V2	RAP: C_SITNMYSITUATION_CDS, required for Situations
2	Pages	Pages are read as a part of FLP service itself and require no additional OData service. For personalization of the pages INTEROP service is used (see point 3)	NA	This should be available by default.
3	Apps	Apps are read via the INTEROP (Namespace: /UI2/)	V2	Gateway Service of Interoperability, required for Personalization (This should also be already active, by default)
4	Insights	For Insights Cards: /UI2/INSIGHTS_CARDS_READ_SRV (belongs to Service Group /UI2/INSIGHTS_SRV)	V4	Insights Cards Repository Service Definition, required for reading Insight Cards.
		For insights Tiles: INTEROP service is used, where the tiles added to this section are stored as users personalization	V2	This should also be already active, by default

Note: The other OData services like FDM_PAGE_RUNTIME_SRV, PAGE_BUILDER_PERS, OData v4 /iwngw/notification , ESH_SEARCH_SRV etc. that are required by the FLP, are out of the scope of this blog.

The Image below summarizes the OData services, Target Mappings and the BSP required:

How to enable My Home

Now that you have a good understanding of all the basic building blocks of My Home in SAP S/4HANA, let’s get started. After activating the necessary components, you shall also create a Role Z_MY_HOME and add all the relevant authorizations to that.

You would do the My Home enablement in the following 5 steps.

Step1: Enabling Spaces and Pages Layout
Step 2: Activating the My Home UI5 Component
Step 3: Activating the required OData V2 and V4 services
Step 4: Configuring Launchpad Parameters
Step 5: Adding relevant authorizations i.e. Target Mapping and OData Authorizations via a PFCG Role

So, let’s get started…

Step 1: Enabling Spaces and Pages Layout

The first prerequisite is to check if the Spaces and Pages Layout is already enabled. Please note that the classical Home Page Layout has been already deprecated as of ABAP Platform 2021 and we strongly encourage you to move to the new layout i.e., Spaces and Pages if you haven't.

To validate the enablement, click on the User Actions Menu (your profile picture icon) --> and then click on Settings.

On the Settings Dialog, you would find a menu option Spaces and Pages. If you see this menu, the new layout is already configured. Click on it, to reveal the Spaces and Pages settings. Ensure that you have both the Use Spaces and Show My Home check boxes enabled, as shown below.

If you see this Spaces and Pages menu option, you can skip this step and move to the next one after checking both the boxes and clicking on Save.

If in case you DO NOT see the Spaces and Pages menu option at all, and instead you only see the Home Page menu option (as shown in the following screenshot), you must activate and configure the new Spaces and Pages Layout.

To activate the new Spaces and Pages Layout use the following steps.

Navigate to the transaction STC01 (Task Manager for Technical Configuration).
Enter the Task List name as SAP_FIORI_FOUNDATION_S4 (which is used to activate Fiori foundation) and click on the Generate Task List Run (F8) button.
On the next screen with generated task list, uncheck all the tasks using Skip All Tasks (F7) button and then only Select the task Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF). You will get an Information popup that the activation step has dependencies on other steps like creating transports, activating services etc., click Continue for all.
Finally, Click on Start/Resume Task List Run In Dialog (F8).

This step is just creating some entries in the /UI2/FLP_CUS_CONF transaction and activating the required OData services, therefore it should typically not take much time to end up in a successful state.
If in case you are interested in knowing about the entries that it creates in the Launchpad Configuration, below is a screenshot of the customizing.
Once you have performed the configuration mentioned in the previous step, Spaces and Pages menu option becomes available in the Settings dialog (from the User Actions Menu). Check the Use Spaces and Show My Home check boxes as explained above, and you are good to move to the Step 2.

Note: that sometimes you may have to enable these two check boxes one by one, by opening the Settings dialog twice, as the former has a dependency on the latter.

Step 2: Activating the My Home UI5 Component

After ensuring that you have the Spaces and Pages Layout enabled for our Launchpad, you can move on to the next steps of activating the services that are required to enable My Home in SAP S/4HANA. You first start with activating the UI5 component for My Home i.e., the BSP application.

The standard SAPUI5 component that is available for the My Home (shipped with S/4HANA2023 FPS01) has its component id as ux.eng.s4producthomes1 and the BSP name is PRODUCT_HOMES1.

To activate the ICF Node, go to the transaction code SICF, Enter the BSP name PRODUCT_HOMES1 (which is also the ICF Node name) in the field Service Name and click Execute.
Right click on the service node and click Activate Service. Select the first Yes button on the confirmation dialog.

Step 3: Activating the required OData V2 and V4 services

After the BSP, it's time for you to activate the Back-end services of the My Home entry page i.e., the required OData services.

As a part of this step, you will activate the following OData services, that have been described above:

TASKPROCESSING (namespace /IWPGW/) for My Inbox
C_SITNMYSITUATION_CDS - for My Situations (Standard only supported for now)
INTEROP - for personalization service. (But don’t worry too much about this, as it is always available with the basic launchpad setup).
/UI2/INSIGHTS_CARDS_READ_SRV - (Service Group /UI2/INSIGHTS_SRV) for viewing the Insights Cards

Typically for an OData V2, the transaction /n/IWFND/MAINT_SERVICE (help doc) is used, and to publish an OData V4 service, we use /n/IWFND/V4_ADMIN (help doc).

Refer to: the section Activate OData Service in the SAP Gateway Hub in the ABAP Programming Model for SAP Fiori guide.

However, since these OData services are also Fiori foundation services. This task of OData service activation can be done by using the task lists SAP_FIORI_LAUNCHPAD_INIT_SETUP and SAP_FIORI_FOUNDATION_S4.

But before you go ahead and activate these services, let's do a quick test to validate if they are already active on your system. In order to do so, use the following 4 URLS

TASKPROCESSING (namespace /IWPGW/) https://hostname:portnumber/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2/$metadata
C_SITNMYSITUATION_CDS - https://hostname:portnumber/sap/opu/odata/sap/C_SITNMYSITUATION_CDS/$metadata
INTEROP - https://hostname:portnumber/sap/opu/odata/UI2/INTEROP/$metadata
/UI2/INSIGHTS_CARDS_READ_SRV - https://hostname:portnumber/sap/opu/odata4/ui2/insights_srv/srvd/ui2/insights_cards_read_srv/0001/$metadata

IMPORTANT: Replace the hostname and portnumber with your application server from your FLP URL.
For example, if your FLP URL is https://mydummycompany:443/sap/bc/ui2/flp?sap-client=100&sap-language=EN#Shell-home the first link becomes https://mydummycompany:443/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2/$metadata

If a service is active, you will see an XML returned with entities in its response. The response would start with <edmx: Edmx xmlns.

However, if a service is inactive, you will see an error. The response in this case, would start with <error xmlns.

In case you find all the services to be active, please skip this step and move to Step 4.
However, if you find some URLs are returning error code, follow the bellow mentioned steps based on the services that don’t work.

Now let's take a step-by-step look at how you can activate these services in case if they are not active on your SAP S/4HANA system.

TASKPROCESSING: Task Processing is an OData V2 service related to the My Inbox Application. And this service requires some additional customizing.
Refer to SAP Notes 2676990 - Release Information note for SAP Fiori My Inbox and 2424054 for more info on How to setup the My Inbox app.
C_SITNMYSITUATION_CDS: This is an OData V2 service and must be activated via the transaction /IWFND/MAINT_SERVICE. Follow the steps mentioned in the SAP Help doc : Activate OData Service in the SAP Gateway Hub to activate the OData service.
INTEROP: As mentioned above, this should be already up and running for you as it’s a part of the Launchpad itself.
However, in case you still do not see this, please ensure that you run the task list SAP_FIORI_LAUNCHPAD_INIT_SETUP to verify the launchpad configurations and the Task 'Activate Gateway OData Services for Launchpad (/IWFND/MAINT_SERVICE)' should take care of activating this service.
/UI2/INSIGHTS_CARDS_READ_SRV: This OData V4 service is a part of Service group /UI2/INSIGHTS_SRV, which is published via the Task Publish Service Groups Foundation (/IWFND/V4_ADMIN) of the Foundation Task list SAP_FIORI_FOUNDATION_S4.

Note : For INTEROP and /UI2/INSIGHTS_CARDS_READ_SRV, In case if you have never run the task list before, please refer to the Step 1, where we explained the steps required to execute a single task Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF) of the task list SAP_FIORI_FOUNDATION_S4.
Repeat the same steps for your desired task in the desired task list.

Step 4: Configuring Launchpad Parameters

After ensuring that all the underlying services required to run the My Home are in place, it’s time to configure the Launchpad Configuration Parameters.

SPACES
SPACES_MYHOME
SPACES_CUSTOM_HOME
SPACES_CUSTOM_HOME_COMPONENT_ID
UI5_INSIGHTS

The first two parameters should be already in place. In case if you don’t find them, please execute the task Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF) of the task list SAP_FIORI_FOUNDATION_S4 as described in the Step 1.

To maintain the other configuration parameters, process as following.

Navigate to the transaction code /UI2/FLP_CUS_CONF (Client Specific Launchpad Configuration Settings), and click on New Entries.
To enable the My Home, you must use the FLP config parameters: SPACES_CUSTOM_HOME and SPACES_CUSTOM_HOME_COMPONENT_ID.
The former parameter is used to declare that you have a custom home page to be enabled and the latter parameter is used to provide the component info (a SAPUI5 Component) for this custom home page. This is same UI5 Component which you activated as a part of Step 2 , i.e., ux.eng.s4producthomes1 having the BSP name as PRODUCT_HOMES1.
This My Home SAPUI5 component delivered by SAP also requires an FLP configuration parameter which would be used to enable the Insights Cards i.e., UI5_INSIGHTS.
Enter the following values on the "New Entries: Overview of Added Entries" screen, that opened after clicking New Entries. Then click Save.
Launchpad Property ID
Property Value
SPACES_CUSTOM_HOME
true
SPACES_CUSTOM_HOME_COMPONENT_ID
ux.eng.s4producthomes1
UI5_INSIGHTS
true

After creating these 3 new entries, confirm that you have all the 5 configuration parameters (including SPACES and SPACES_MYHOME) setup correctly.

Step 5: Adding relevant authorizations i.e., Target Mapping and OData Authorizations via a PFCG Role

This is the final step and as a part of this process, you will include authorizations to these My Home building blocks (including the OData services and the Target Mapping) to a PFCG Role that will be used to provide complete access to My Home to users.

Navigate to transaction PFCG, enter a role name, for example Z_MY_HOME and click on the Create Single Role button.
Document the role description and click on the Menu tab. Save the role if prompted. Click on Insert node button and choose Authorizations Default.

Now you will add the authorizations for the above-discussed OData services to this role.
- TASKPROCESSING (namespace /IWPGW/) for My Inbox
- C_SITNMYSITUATION_CDS - for My Situations (Standard only supported for now)
- INTEROP - for personalization service. (But don’t worry too much about this as it is always available with the basic role required to run the launchpad ex SAP_FLP_USER or classical SAP_UI2_USER_700 ).
- /UI2/INSIGHTS_CARDS_READ_SRV (Service Group /UI2/INSIGHTS_SRV)
Start by adding the OData V2 services by using the menu Insert Node --> Authorization Default
Choose the option SAP Gateway Business Suite Enablement - Service from the Authorization Default drop down. Use the value help to add TASKPROCESSING V2 Service to the same.

Although you just need Version 0002 for My Home to work, you can add both the versions (0001 and 0002) of the service for now. The view of Role Menu should look something like the following screenshot.
Repeat the steps for menu Insert Node --> Authorization Default, but this time select the Authorization Default type object as Service Gateway: Service Groups Metadata i.e., IWSG, after adding the authorization default, the Role Menu should look something like below.
Similarly add the Authorization Defaults for other OData V2 services as well i.e., C_SITNMYSITUATION_CDS and INTEROP.
In case of a OData V4 service, the entire service group needs to be authorized. Therefore, for the OData V4 service /UI2/INSIGHTS_CARDS_READ_SRV, you must add the authorizations to Service Group /UI2/INSIGHTS_SRV.
This is done by using the menu Insert Node --> Authorization Default and selecting the option SAP Gateway OData V4 Backend Service Group & Assignments.

After adding the Insights service group, the role menu should appear as the following screenshot.

With this step, the backend set up is complete and now must perform the front-end configuration. For this you must provide authorizations to My Inbox and My Situations apps. You can assign these authorizations by creating a Launchpad Catalog and assigning it to your Z_MY_HOME role.
Navigate to the SAP Fiori Launchpad Content Manager: Client Specific (transaction /n/UI2/FLPCM_CUST). Click on the Catalogs Tab (that should be preselected) and then click Create.
Enter a new Catalog ID and title (in the New ID and the New Title fields) and click Continue.Enter a customizing request if prompted for.
Now switch to the Tiles/Target Mappings tab and search for the following two Fiori Apps using their IDs, one by one:
- My Inbox: F0862
- My Situations: F4154
After finding the Tile + TM for My Inbox, select the row and click on Add TM Reference (text: Add Reference to Catalog).
On the Add Tiles/Target Mappings as Reference screen, Search for the catalog (Created in subset 8 above) i.e., ZC_MY_HOME, and click on the Add TM Reference button.
Repeat the steps for the My Situations: F4154 to add the Target Mapping to our catalog ZC_MY_HOME
Finally, you can assign this Catalog ZC_MY_HOME to our business role.

Navigate to the transaction code PFCG, Enter the Role name Z_MY_HOME click on Change.

In the Menu tab, Click on Insert Node button, choose SAP Fiori Launchpad and select Launchpad Catalog
Enter the Catalog name on the screen Assign SAP Fiori Launchpad Catalog and click Continue.
Finally Save your role, and you are done.
Assign the role to the desired user master record and you can see the My Home.

Note: Please ensure that sufficient Business Roles are added to the user and that these roles contain spaces and pages.

Becoming a SAP Fiori for SAP S/4HANA guru

You’ll find much more on our SAP Fiori for SAP S/4HANA topic page

Configuring SAP CI/CD pipeline for Deploying ReactJS application in Cloud Foundry

2024-05-07T09:59:07.961000+02:00

In this blog, we will discuss how to integrate SAP CI/CD pipeline for deploying ReactJS application on SAP Cloud Foundry environment.

You will learn,

How to create and build a ReactJS application.
How to configure and run SAP CI/CD Pipeline service.
How to create GitHub Webhook for automatically build, test and deploying the code changes.

Prerequisites

You have an SAP BTP Global or trial account.
Node installed in your system.
You have a GitHub account.

Setting up React Application

step 1: Create your react application using the create-react-app. The create-react-app is an excellent tool which allows you to create and run React project very quickly by wrapping all the required dependencies.

npx create-react-app reactcicd

step 2: To ensure that the application is running as expected, open the terminal and navigate to the application folder and type the below command. The application gets automatically hosted in the default server localhost:3000 and you’ll get the following screen.

npm start

step 3: Now create manifest.yml file for determining the Cloud Foundry app configurations and paste the below contents.

 ---
applications:
- name: your-app-name
path: build/
instances: 1
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
memory: 256M

step 4: Build the application using the below command, you will see the build folder getting added to your project.

npm run build

Also create a Staticfile with the following content in the build folder as shown below

step 5: Now create a repository in your GitHub and push the changes. Make sure to remove build folder from the gitignore file since it is added default while creating the react project, we require it for deployment. For more details on how to deploy react application refer this link react-CF-deploy

Enable SAP Continuous integration and Delivery Service

step 1: Login into SAP BTP Cockpit and choose the subaccount to which you want to deploy your application.

step 2: Select Service Marketplace from the side pane and search for Continuous Integration and Delivery service. Click the create button.

step 3: Create popup will appear then choose the plan you want to and click create button at the bottom. Choose View Subscription and wait until the status changes to Subscribed.

step 4: Once the status is changed to subscribed navigate to Security → Role Collections from the left-hand pane. Choose role collection CICD Service Administrator and click edit.

step 5: Navigate to users section click edit then Add a new row in the Users section table, enter your user id, Keep the identity provider as default and click save.

Configure your credentials

step 1: Go to Services → Instances and Subscriptions from the pane. Choose the application icon located next to the Continuous Integration & Delivery subscription. Now we need to add credentials for GitHub, CF and Webhook.

step 2: Let’s first go with GitHub credentials. If your GitHub repository is private, you will need to provide with the necessary credentials to access it. You can skip this in case of public repository.

step 3: In Create Credentials popup make sure you give unique name within the subaccount. Select the type as basic authentication and provide your git credentials. Use personal access token as a password. Then choose create.

step 4: Now repeat the same steps for adding CF credentials. Here you have to provide your SAP BTP cockpit username and password.

step 5: For configuring webhook credentials change the type from Basic Authentication to Webhook Secret. Then generate the webhook secret copy it somewhere safe and finally choose Create.

Add a CI/CD job

step 1: Navigate to the Jobs tab and choose the icon to add a new job. Provide unique name for the job.

step 2: Click on the icon inside the Repository input field. You will get a popup then choose add repository., Enter your git repository clone URL. You can add any name of your choice. It need not to be matched with your repo. Choose your saved credentials for git and webhook.

step 3: For Branch, enter the GitHub branch of your repository from which you want to receive push events. In this example, master. Select Cloud Foundry Environment from the dropdown in the Pipeline field.

step 4: In the BUILD section choose npm as your build tool. For Build Tool Version, select the latest node version.

step 5: Under the Release section, switch on the execution of the Deploy to Cloud Foundry Space. Since we have already given name in the manifest file, we can skip the name field.

Replace the placeholders API Endpoint, Org Name and Space with the values in the Cloud Foundry environment to which you want to deploy. You can get the values from your subaccount overview in the SAP BTP cockpit.

step 6: For Deploy Type, choose standard and select your previously created CF credentials. Leave remaining fields default then finally choose create.

Create a GitHub Webhook

GitHub webhooks allow you to automate CI/CD builds. Whenever you push changes to your GitHub repository, a webhook push event is sent to the service to trigger a build of the connected job.

step 1: To create a webhook in GitHub, you need payload URL. Select your repository and choose Webhook Data from the right pane. You will see a below popup:

step 2: Now sign in into your GitHub account. In your project, go to the Settings tab.

step 3: From the left pane, choose Webhooks then Add webhook. Enter the Payload URL, Content type from the popup and the Secret that you had saved previously. For all other settings, leave the default values and add.

Verify your Build

You have to trigger your job manually the first time after creation.

step 1: In Jobs tab, select your job and choose Run. Verify that a new tile appears in the Builds view. This tile should be marked as running.

step 2: Wait until the job has finished and verify that the build tile is marked as successful.

step 3: Navigate to your space in the SAP BTP cockpit and check the list of installed applications. Now you can see your application got added.

step 4: Select your application and launch it with the application route. You can see the react application deployed.

You have now successfully created a CI/CD pipeline and deployed your ReactJS application to SAP BTP. From now on for every commit you can see the job getting triggered with commit id displayed under builds section.

SAP Fiori for SAP S/4HANA - Finding business process improvements with SAP Signavio

2024-05-21T11:01:14.634000+02:00

As a UX specialist in the SAP S/4HANA Regional Implementation Group, I’m privileged to work with many of our SAP S/4HANA customers.

As a customer running SAP S/4HANA, you probably fall into one of the following categories:

New to SAP S/4HANA and only using SAP GUI.
Implemented SAP S/4HANA with some SAP Fiori exposure but not sure you are using the right apps.
Implemented SAP S/4HANA and you want to identify areas for improvement.
You are aware of new business processes only available in SAP S/4HANA, and you want to find out which SAP Fiori apps to use with these business processes.

Good news! SAP S/4HANA offers LOTS of standard functionality ‘’Out of the box’’ content, including:

More than 3K SAP Fiori apps
More than 1.5K embedded analytics apps
More than 125 Situation Handling templates.
New business models only available in SAP Fiori
Mix and match more than 10 classic UIs

You can see with significant standard functionality listed above, it can be easy to be unsure as to where to start.

Even more good news! There is now new and improved tooling so you can learn where to start with SAP Fiori and how to identify which business process improvements will bring you new business value.

Here we will introduce the following tools to help implement business process improvements and bring new value to your business:

SAP Signavio Process Navigator – find the Best Practice recommendations (SAP Fiori roles and apps) for each business process.
SAP Signavio Process Insights - evaluate your current usage based on industry benchmarks to find priority target areas for improvement.

SAP Signavio Process Navigator is a free service that is integrated into SAP for Me to provide access to the following:

SAP Solution Scenarios, such as Lead to Cash or Plan to Fulfil; respective Solution Processes; contextual process information such as integrations, applications, and implemented solution capabilities.

SAP Signavio Process Navigator provides flow diagrams for solution values and solution processes with the following:

Detailed solution activities
Test scripts (these include which SAP Fiori apps and roles to use with each business process)
Setup instructions
Localization-specific implementation details
Required solution components.
Other implementation information

All this helps YOU to achieve tangible value as quickly as possible. Information available in SAP Signavio Process Navigator is structured in line with SAP's Enterprise Architecture methodology providing you with a consumer-grade experience with a modern and intuitive user interface (UI).

You can use the SAP Signavio Process Navigator to assist you in your scoping. SAP Process Signavio Navigator contains process diagrams and test scripts per Line of Business function that will help you understand:

Which SAP Business Roles are relevant to your business processes
Which SAP Fiori apps and classic UIs are recommended for your SAP S/4HANA release

Each solution process has a test script with details on BOTH the SAP Fiori roles to use and an overview table of recommended SAP Fiori apps associated with the solution process.

Using SAP Signavio Process Navigator, YOU can easily find this information as follows, here we will use the Solution Process Accounts Payable (J60) as an example:

Logon to SAP Signavio Process Navigator and click on the Solution Scenarios tile:
Locate the Solution Scenario for SAP S/4HANA Cloud Private Edition (Note: This Solution Scenario can also be used for SAP S/4HANA on-Premise)
Follow the menu path shown Finance->Financial Operations->Accounts Payable (J60). Select the Accounts Payable (J60) link:
From the Accelerators tab, click on the test script and this will download a document (in this case called J60_S4HANA2023_BPD_EN_DE.docx) to your downloads folder
Open the document downloaded in step 4 and view the Table of Contents. Here we can see the following:
- Roles that contain the SAP Fiori apps for this business process (section 2.2 in this case)
- An Overview Table of the SAP Fiori apps for this business process (section 3 in this case)
Here in section 2.2, we can see a full list of the roles that contain the SAP Fiori apps for this business process: [Note: Role SAP_BR_AP_ACCOUNTANT is noted here, this will be used in the example in step 8].
Here in section 3, we can see a full list of the roles that contain the SAP Fiori apps for this business process. [Note: SAP Fiori app F1861 Display Supplier List is noted here, this will be used in the example in step 8].
With this information, you can review the SAP Fiori app details in the SAP Fiori apps reference library which can be found here: https://url.sap/fiori-apps-library
The SAP Fiori apps reference library contains detailed information on all SAP Fiori launchpad content for SAP S/4HANA and SAP S/4HANA Cloud including:
- SAP Fiori apps
- Classic Web Dynpro apps
- Web Client UI
- Classic SAP GUI transactions
Based on what you found in the SAP Signavio Process Navigator in step 6 and step 7, proceed as follows using the SAP Fiori apps reference library to search by Role or SAP Fiori App ID.
a) Search by role: All apps for SAP S/4HANA -> by Roles-> SAP_BR_AP_ACCOUNTANT
b) Search by SAP Fiori App ID: All apps for SAP S/4HANA ->F1861

NOTE: In some cases you can even view the relevant SAP Fiori apps from the Business Process Model (BPM diagram so you do not even need to look at the test script, this make it VERY EASY to find the SAP Fiori Apps. For example, in SAP Signavio Process Navigator / Solution Scenario / SAP Best Practices for SAP S/4HANA Cloud Public Edition, you can see directly from the BPM diagram in Solution Process Basic Credit Management (BD6) that SAP Fiori App ID F4596 is used:

Conclusion: You now have enough information to plan for and implement the SAP Fiori apps that will bring business process improvements.

SAP Signavio Process Insights is a process analytics solution that helps YOU rapidly discover areas for improvement and automation within your SAP business processes.

What can I achieve with the product?

Get a better understanding of your processes.
Find the root cause of your problems.
Obtain faster value discovery pre-, mid-, or post-transformation.
Increase process transparency and process standardization.
Reduce transformation time and risks.
Start exploring with SAP Signavio Process Insights, discovery edition (see below):

SAP Signavio Process Insights is the fastest path to process improvements.
The SAP Signavio Process Insights solution is a process analytics solution that helps you rapidly discover areas for improvement and automation.

SAP Signavio Process Insights helps you understand your current business process performance and identify new functionalities from SAP S/4HANA, SAP Fiori apps, automation, and intelligent technologies to support your business goals, including:

Unique tailored insights into your current operational business process performance, based on data from your SAP ERP or SAP S/4HANA system.
Specific insights and recommendations are segmented by line of business and end-to-end processes
More functionalities, automation, intelligent technologies, SAP Fiori apps and all the SAP cloud solutions with SAP S/4HANA
Build your case for SAP S/4HANA in SAP Signavio Process Insights, discovery edition and secure the buy-in from the business

Refer to SAP Signavio Process Insights, discovery edition now in General Availability!

For release dates for SAP Signavio Process Insights refer to SAP Note 3399700 SAP Signavio Process Insights - Planned Release Dates

Becoming an SAP Fiori for SAP S/4HANA guru

You’ll find much more on the community topic page for SAP Fiori for SAP S/4HANA

Other helpful links in the SAP Community:

Follow our tag SAP S/4HANA RIG for more from the SAP S/4HANA Customer Care and RIG
See all questions and answers about SAP Fiori for SAP S/4HANA
Follow SAP Fiori for SAP S/4HANA for more blogs and updates
Ask a Question about SAP Fiori for SAP S/4HANA

Brought to you by the SAP S/4HANA Customer Care and RIG.

FPM Team: Transport of BICS Bookmarks and SEARCH UIBB Views

2024-05-30T10:59:05.911000+02:00

Dear SAP Community,

In 2021, the Web Dynpro Multidimensional Data Grid App replaced the SAP Design Studio app as default reporting tool for drill-down reporting in SAP S/4HANA. This app is using the Search UIBB provided by FPM for variable selection.

For the two components Grid and Search used in the Web Dynpro Multidimensional Data Grid it is possible to save the actual state (search View for the variables and Bookmark for the Grid (Layout for the grid and if wanted variables of the search)) in the actual system. These bookmarks and saved searches are stored in the system locally and cannot be transported automatically to other systems.

We from the FPM team, have now made it possible to transfer views and bookmarks from one system to another.

The source and the target system needs to be at last on a special Support Package level (for the saved searches SAP_UI 7.57SP006, SAP_UI 758 SP001 (note 3386445) and Release SAP_BW 757 SP003 for the bookmarks in the BICS Grid note 3336542).

For both components there are reports available which allow the user to collect the bookmarks/Saved searches and write them on a customizing request as well as reports in the target system to import them into the environment.

For the Search UIBB the reports are

FPM_SEARCH_TRANSPORT_VIEWS (Source system report)
FPM_SEARCH_IMPORT_SSEARCH (Target system report)

The source system report needs to be called within transaction SE38.
The user has to enter a search configuration ID ( e.g. FPM_TEST_SEARCH_E_SFLIGHT_H_CC for the first SEARCH in the FPM_TEST_SUITE or CCONS_FPM_SEARCH_MATRIX_CFG for a non generic BICS application) or the APP_KEY for the generic BICS Configuration ( to find the correct APP_KEY please check the query for which you want to export the search views e.g. 0D_FC_AE_VAR_Q01 and add the prefix "§_" to get the APP_KEY "§_0D_FC_AE_VAR_Q01" FPM_BICS_SEARCH_GENERIC for the BICS Grid standard configuration) for which the public search views should be transported.
The search IDs can be selected from the list as well as the deleted views which should be deleted in the target system.
These views will be written on a customizing request and can be imported into the target system with the target system report after the transport has reached the target system.
This importing report can be started via transaction SE38 and has an option to run a test first.

Please note that your system needs to be configured correctly for customizing request (transaction SCC4)

For the GRID the reports to transport the bookmarks are

FPM_BICS_TRANSPORT_BOOKMARKS (Source system report)
FPM_BICS_IMPORT_BOOKMARKS (Target system report)

When calling the source system report for the BICS Grid you need to know the query for which the bookmarks should be transported. The name of the query can be found on the query information tab in section Technical Information field “Query Technical Name” in your application.
For the importing report there is test run available and some more options like you have for the search UIBB views.

Now you have learned how to transport saved searches and bookmarks from one system to another.

Please note that the transport of saved searches not only works for variable selection for the BICS Grid but for all Search configurations.

SAP Event Mesh vs. SAP Integration Suite, Advanced Event Mesh

2024-06-17T08:16:42.765000+02:00

This blog focuses on the differences of the "SAP Event Mesh" versus the powerhouse "SAP Integration Suite - Advanced Event Mesh" which will help to make an informed decision to optimize event-driven integration within your organization's specific requirements.

Event-Driven Integration in the Digital Age

Modern businesses navigate a data-driven landscape, demanding seamless integration between ever-expanding application portfolios. Traditional methods struggle to keep pace, necessitating a shift towards real-time, event-based integration approaches.

SAP's Event Mesh vs. Advanced Event Mesh, IS

SAP offers two compelling solutions for event-driven integration: SAP Integration Suite, Advanced Event Mesh (AEM), and SAP Event Mesh. While both leverage event brokers for integration, they cater to distinct use cases.

AEM goes beyond basic integration, offering robust event management capabilities. It empowers you to:

Govern the events throughout their lifecycle, ensuring data integrity and compliance
Design, publish, and discover events, fostering collaboration and reusability
Deploy flexibly across various public clouds (AWS, Azure, GCP), on-premises, or at the edge
Maintain data consistency through event transactions
Replay messages for troubleshooting or new applications
Handle large payloads and storage for demanding use cases

On the other hand, SAP Event Mesh provides a lightweight solution for the core event streaming and integration. It would be great choice in below scenario's:

Simple integration scenarios within the SAP ecosystem
Cost-effective implementation with usage-based pricing
Straightforward deployment on SAP Business Technology Platform

In conclusion, One can choose right fit based on below pointers -

1. Complexity - AEM tackles the complex event-driven architectures, while Event Mesh targets simpler integrations

2. Event Governance - AEM prioritizes event management for control and compliance

3. Deployment - AEM offers broader deployment options, while Event Mesh resides within SAP BTP

4. Data Volume - AEM handles larger payloads and storage for extensive data flows. AEM Can handle message size upto 30 MB with a storage of 6TB while Event Mesh can handle message size upto 1 MB with a storage support of 10 GB

Blast Off! UI5 Web Components 2.0 is Now Live!

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

A Journey of Innovation and Growth

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

Picture 1: UI5 Web Components timeline

The Evolution of UI5 Web Components

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

Announcing UI5 Web Components 2.0! 🎉

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

Key Benefits of UI5 Web Components 2.0

UI5 Web Components 2.0 introduces several substantial improvements:

Embracing New Standards: Future-proofing UI5 Web Components.

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

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

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

What's New in UI5 Web Components 2.0?

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

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

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

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

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

Picture 2: Preview of UI5 Web Components 2.0 new components

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

Picture 3: Preview of UI5 Web Components 2.0 new features

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

Picture 4: UI5 Web Components 2.0 new website

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

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

Live code editing

TypeScript support

Code completion for components in HTML

Sample download

Easy sharing

Theming options

Predefined examples

Picture 5: UI5 Web Components 2.0 full-screen playground

Adoption and Breaking Changes

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

Notable Breaking Changes:

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

Ongoing Support for Version 1.x

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

Get Help and Engage with the Community

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

Call to Action

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

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

UI5 Tooling 4.0

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

UI5 Tooling 4.0

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

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

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

Node.js and npm Requirements

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

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

Specification Version 4.0

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

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

UI5 2.x

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

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

New Feature: Automatic Generation of Locale Information

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

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

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

Learn more about this new feature in the builder documentation.

Upgrade Today

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

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

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

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

Also update your global install using:

npm i --global @ui5/cli@latest

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

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

specVersion: "4.0"
[...]

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

Smart and flexible: sap.ui.mdc released for productive use

2024-08-15T18:54:20.562000+02:00

Your patience has paid off: The sap.ui.mdc library is available for productive use in SAPUI5 and OpenUI5 since version 1.124!

What you get

As previously announced in this blog, the library helps to build enterprise-ready smart controls or applications with SAP Fiori Design user experience, no matter which back-end technology you are using. It offers a flexible and comprehensive reuse approach with implementable delegates for the sap.ui.mdc controls. Using specific protocols like FHIR or even a plain REST service is now possible without having to start from scratch.

Here's another interesting fact: sap.ui.mdc enables SAP Fiori elements to provide the powerful floorplans and the versatile flexible programming model for OData V4. Each sap.ui.mdc control has a corresponding building block, which you can find in the flexible programing model explorer. It is no surprise that the SAP BTP Developer’s Guide recommends SAPUI5 and SAP Fiori elements as the technology for developing user interfaces.

On top of everything we have added a nice bonus package for the official release: You can now explore and test many more features in the additional samples in the Demo Kit under Metadata-Driven Controls (sap.ui.mdc), for example, sap.ui.mdc overview.

Start your deep dive into the sap.ui.mdc world by following our tutorial: SAP-samples/ui5-mdc-json-tutorial. A recording is available from Devtoberfest, where we demonstrated the tutorial live. You can check it out here.

Outlook

You might wonder what comes next. We are still working on some aspects of the library. Those include the chart, which remains in experimental state for now. We have also planned to provide a metadata-driven form, which should make it easy to allow users to create new entities. Isn’t that exciting? We keep you informed about any updates.

For more information about the controls in sap.ui.mdc, see also the API Reference and the Documentation in the Demo Kit. We would love to hear from you about your experience with the library. Leave a comment with your feedback or questions!

For more information on UI5

Exchange knowledge: SAP Community | Slack
Learn more: SAPUI5 Demo Kit | openSAP | UI5 NewsCast | UI5ers live
Try UI5 for free: SAPUI5 | OpenUI5 | OpenUI5 on NPM | SAPUI5 on NPM
Follow us: X | YouTube | LinkedIn

Smart choices for your UI: When to use sap.ui.mdc

2024-09-19T16:51:09.253000+02:00

Choosing the right technology is crucial when building UIs for SAP and other applications. What seems straightforward at first can become more complex as you explore the variety of possibilities. By choosing SAPUI5 you are already one step closer to the solution. Its wide range of controls and built-in support for data binding, especially for OData, make it the proven framework of choice for SAP S/4HANA and other SAP products.

sap.ui.mdc is a specialized library within SAPUI5. It is designed to enhance user experience with advanced controls and features, helping you build metadata-driven controls (like smart controls) and applications. If you need tables, filter bars, value helps, or semantic links, it might be for you. Let's explore the scenarios where it could be the right choice for your project. Refer to the following diagram for help with your decision.

Using sap.ui.mdc: Implementation options

If you’ve concluded that sap.ui.mdc is appropriate for your needs, there are two different approaches to consider. You should check out the documentation and try our tutorial first to gain a general understanding of the library and its capabilities.

The metadata-driven approach

Imagine you're developing a data-heavy application for an ERP system. sap.ui.mdc is ideal for generating most of your app based on a set of metadata (comparable to OData metadata and annotations) and for reusing your sap.ui.mdc implementations across multiple apps.

Requires a considerable investment in developing the sap.ui.mdc delegates and reusable assets.
Delegates act as interpreters between the control and the service with its metadata.

The freestyle approach

Suppose you're working on an application that requires a filter bar and a table with personalization options and variant management. Maybe you also need semantic links or value helps but do not want to build reuse capabilities or specific metadata interpretations.

Requires a moderate investment in developing the sap.ui.mdc delegates.
Delegates are app-specific with hard-coded information.
If only personalization with simple filtering is required, it is better to use vanilla SAPUI5 with the personalization assets.

Summary

In conclusion, sap.ui.mdc offers powerful features for SAPUI5 applications, particularly when it meets your project’s requirements. By assessing the scenarios and implementation approaches you can enhance your application's functionality and user experience while keeping the development effort as low as possible.

For more information and best practices, explore our detailed samples or reach out, for example, by leaving a comment.

For more information on UI5 and sap.ui.mdc

Release blogpost: sap.ui.mdc released for productive use
Introduction blogpost: A New Generation of Smart Controls
SAP Fiori elements: Developing apps with SAP Fiori elements | flexible programming model (blogpost)
Exchange knowledge: SAP Community | Slack
Learn more: SAPUI5 Demo Kit | openSAP | UI5 NewsCast | UI5ers live
Try UI5 for free: SAPUI5 | OpenUI5 | OpenUI5 on NPM | SAPUI5 on NPM
Follow us: X | YouTube | LinkedIn

Dynamic Data Filtering in CDS Views Based on User Input

2024-09-30T08:44:12.935000+02:00

In SAP ABAP, Core Data Services (CDS) views provide a powerful way to model and consume data. However, one of the common requirements is to filter data dynamically based on user input. This capability allows users to view tailored data without requiring multiple static views. In this blog, we’ll explore how to achieve dynamic data filtering in CDS views based on user input and provide a complete coding example.

Why Use Dynamic Data Filtering?

Dynamic data filtering enables:

Flexibility: Users can filter the results based on the criteria they choose at runtime.

Performance: Only the relevant data is fetched, which reduces unnecessary data transfer and enhances performance.

Interactivity: Applications become more user-centric by allowing dynamic input for filtering.

What We’ll Build:

We’ll create a CDS view that filters customer data based on user-provided input for:

Customer ID

Country

We’ll then expose this CDS view for consumption and demonstrate how to pass dynamic filter values through the view.

Step 1: Define the CDS View with Input Parameters

Here’s how you can define a CDS view with input parameters for dynamic filtering:

Explanation:

Parameters (p_cust_id and p_Country): These input parameters allow users to specify the customer ID and country for filtering.

WHERE Clause: The filtering is done dynamically based on the input. If a parameter is not provided (i.e., is null), that condition is ignored.

@odata.publish: true: This exposes the CDS view as an OData service, allowing it to be consumed via SAP Fiori or other front-end tools.

Step 2: Testing the CDS View with Dynamic Inputs

To test the CDS view, you can use SAP GUI or any OData client to pass the input parameters dynamically. Below is how you can do this:

p_custid and p_cntry: These are dynamic inputs provided at runtime.

lt_results: The filtered results based on user input are stored here.

Once the CDS view is exposed as an OData service, you can query it from a browser or postman using the following URL:

/sap/opu/odata/SAP/ZRH_CUSTOMER_SRV_01/ZRH_CUSTOMER_FILTERSet(Custid='0001000005',Country='IN')

Custid ='0001000005' filters by the customer ID.

Country ='IN' filters by the country.

Step 3: Sample Output Based on Dynamic Input

Case 1: Input - Customer ID and Country Provided

In this case, only the customer with Custid = '0001000005' and Country = 'IN' is returned.

Case 2: Input - Only Country Provided

Here, the filter is applied only for the Country = 'US', and all customers in the US are returned.

Case 3: Input - No Input Provided

When no input is provided, all customers are returned as the filter conditions are ignored.

Conclusion

Dynamic data filtering in CDS views based on user input allows you to create flexible, interactive applications that provide users with exactly the data they need. By using input parameters in your CDS views, you can build powerful, performance-optimized filters that adjust based on runtime inputs. Whether you're building an SAP Fiori application or an OData service, this technique enhances both performance and user experience.

Accessibility in SAPUI5

2024-10-01T00:10:29.269000+02:00

Hello, and Welcome! Embracing Accessibility for All.

Introduction

In our fast-paced digital age, ensuring that everyone can engage with the world around them is more important than ever. Here Accessibility plays a major role in the Quality or Characteristic of the Application that makes it possible to approach, enter, or use it. It refers to the possibility for everyone, including differently-abled people, to access and use information technology products.
Web Content Accessibility Guidelines (WCAG) explains how to make web content more accessible for everyone.

Why Accessibility Matters

Comprehensive for All
Wider Audience Reach
Commitment to Equality
Enhanced Usability and UX

Accessibility in SAP Fiori

Accessibility features are essential for users with disabilities. In an ongoing approach, SAPUI5 controls aim to comply with various product standards such as screen reader support, high-contrast theming, and keyboard handling.
Features designed for accessibility, like clear navigation and captions, improve the overall experience for everyone, not just those with specific needs.
In SAPUI5 Accessibility is incorporated at two levels :
- Framework Level
  Screen Reader Support for SAPUI5 Control
  Keyboard Handling for SAPUI5 UI Elements
  Visualization
  - Minimum Contrast
  - Consistency of Icons
  - Focus Visualization Design
  - Layout Adaptation for Different Devices
  - Support for Text Resizing up to 200%
  High Contrast Themes for SAPUI5 Controls
  Messaging Patterns
- Application Level
  Many requirements are already covered at the framework level, but design approaches that are related to the ease of use of applications at the end-user level are more important and it depends upon design teams.
  - Understanding
  - Initial focus position
  - Structure and fast navigation
  - Keyboard shortcuts

Any changes in the framework definitions can impair accessibility. ex. Custom controls or Custom theming.
You can read the full information in Accessibility Documentation at SAP SDK.

Steps to Improve Accessibility

Accessibility Audits: This can help to check areas of improvement in the product.
Consider Color Contrast: Ensure there is adequate contrast between text and background colors to improve readability.
Keyboard Navigation: Creating keyboard-friendly interfaces involves designing with the user experience in mind, allowing seamless interaction through the keyboard alone.
Use Alt Text, Tooltips for Images, Buttons, etc: Help screen reader users by providing detailed information about the accessed area.
Example :

Conclusion

Accessibility is not just a checkbox to tick; it’s a promise to cultivate a world where everyone can Advance.
Thank you for taking a moment to consider the importance of accessibility.
As we progress, let’s prioritize accessibility in our design and decision-making processes. Ultimately, a more accessible world is advantageous for all.

I hope you found this helpful! Feel free to share any comments or suggestions for improvement.

Thank you 😊

Creating a Lookup Service For a Field Using CDS And OData In SAP

2024-10-04T15:01:23.467000+02:00

Why Use CDS and OData for Lookups?

CDS Views: Provide a high-level abstraction for modeling data and implementing business logic in a standardized way.

OData Services: Offer a protocol for querying and updating data through REST-based APIs. Exposing CDS views as OData services allows consumption in SAP Fiori, mobile apps, or external systems.

The combination of CDS and OData provides flexibility, scalability, and easy integration, which is critical for modern web-based lookup services.

Step 1: Create database table and Define the CDS View for Product Lookup

The first step is to Create database table and define a CDS view that will serve as the basis for our lookup service. The CDS view will fetch relevant fields from the product master data and allow filtering using input parameters.

Step 2: Activate and Expose the OData Service

Once the CDS view is created, the next step is to activate the OData service.

Steps to Activate the OData Service:

Go to SAP Gateway Service Builder (transaction code SEGW).

Activate the service by navigating to System Alias → Activate and Maintain Services.

Find the newly created OData service corresponding to your CDS view (e.g., ZNA_LOOKUP_SERVICE).

Activate the service and ensure it’s available for consumption.

Once activated, you can now consume this OData service in any client to perform product lookups.

@AbapCatalog.sqlViewName: 'ZNA_VALUE'
@AbapCatalog.compiler.compareFilter: true 
@AbapCatalog.preserveKey: true 
@AccessControl.authorizationCheck: #NOT_REQUIRED 
@EndUserText.label: 'lookup service for Product table' 
@Metadata.ignorePropagatedAnnotations: true 
define view zna_value_help as select from zna_t_product 
{ 
@Consumption.valueHelpDefinition: [{ entity: {element: 'Id',name: 'ZNA_T_PRODUCT' } }] 
key id as Id, 
@Consumption.valueHelpDefinition: [{ entity: {element: 'Name',name: 'ZNA_T_PRODUCT' } }] 
name as Name, 
@Consumption.valueHelpDefinition: [{ entity: {element: 'Category',name: 'ZNA_T_PRODUCT' } }] 
category as Category, 
@Consumption.valueHelpDefinition: [{ entity: {element: 'Price',name: 'ZNA_T_PRODUCT' } }] 
price as Price 
}

Here in Data model, Choose Reference--> Data Source and Provide CDS Entity name.

Here we can Observe that CDS Entity is Added here.

Here Just we have to Select Entity set and Perform Get Operation then Click On Execute.

Here we can See the Data.

Conclusion

In this blog post, we’ve walked through how to create a lookup service for product details using CDS and OData. This service allows applications to dynamically query product information based on user input, making it highly flexible and interactive.

By combining CDS views with OData, you can easily expose SAP data for external consumption while benefiting from the performance and flexibility of SAP HANA. Whether you’re building an SAP application or integrating with external systems, this approach ensures a smooth and efficient lookup experience.

Custom Chatbot Widget in SAPUI5 [ using Expression Binding ]

2024-11-05T13:39:07.070000+01:00

Hi all,

This is a part of Chatbot Blog series and focuses on how to build Chat Assistant Widget in Fiori using Freestyle UI5.

The Chat Assistant in Industry is way more complex and has tons of features, I am trying to keep the focus of this blog on building basics features with minimal efforts.

To Add a Chat Assistant Widget in your existing app, a placeholder is required.

there are many options to add widgets in Fiori portal or standalone UI5 apps.

For Fiori Portal, Adding a button in ShellBar with a popover would be a great option. The Popover contains Chat Assistant widget. Since ShellBar remains constant in the fiori Launchpad, it can be accessed by all fiori application. ( I found a blog for this. check this link for more info. )

For standalone UI5 applications, there are two best ways to add Chat Widget either in the Side Panel or as a button in bottom right corner with a popover containing chat widget. This is widely adopted by all chatbot providers.

I think, sap.f.SidePanel is one of the most suitable UI5 control for adding such widgets.

Widget on Side Panel

Lets see how sap.f.SidePanel works.

Side Panel has two aggregations called mainContent and sideContent. mainContent Aggregation contains actual page containing Business Object while sideContent contains more details on selected property or object or utility/ support/ helper tools.

Copy below code and add original website content in mainContent aggregation.

<mvc:View controllerName="your-namespace.controller.View1"
	xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
	xmlns:core="sap.ui.core"
	xmlns:f="sap.f"
	xmlns="sap.m" 
        class="viewPadding">

	<Page id="page">
	  <content>

	    <f:SidePanel id="id_sp" sidePanelResizable="true" 
                                          toggle="onToggle" 
                                          sidePanelPosition="Right" 
                                          sidePanelWidth="30rem">
	      <f:mainContent>					
                ... Add your main Content here...
	      </f:mainContent>
	      <f:items>

	        <f:SidePanelItem icon="sap-icon://wounds-doc"          
                                  text="ChatAssistant" class="spi">
		  <f:content>
		    <VBox width="100%">
		      <IllustratedMessage id="id_illuMsg" 
                                          title="Chat Assistant" 
                                          class="sapUiLargeMarginTop"
                                          description="Ask me anything" 
                                          illustrationType="tnt-FaceID"
                                          illustrationSize="Scene">
                        <additionalContent>
                          <Button text="Lets go" press="onPressHide"/
                        </additionalContent>
                      </IllustratedMessage>

                      <ScrollContainer id="id_SC" visible="false" 
                                       width="100%"
                                       height="500px" 
                                       vertical="true">
                        <List id="id_List" items="{path:'chatbot>/list'}"
                                          noDataText="No Chat history..">    
                          <items>
                            <FeedListItem text="{chatbot>text}" 
                                  icon="{= ${chatbot>type} === 'query' ?                                        
                                  'sap-icon://customer' : 'sap-icon://da-2' }">
                            </FeedListItem>                        
                          </items>
                        </List>
                      </ScrollContainer>
                      <VBox id="id_box" visible="false" width="100%">
                        <Input width="100%" 
                               placeholder="Type your query here.."
                               submit="onSubmitQuery"/>
                      </VBox>
                    </VBox>
                  </f:content>
                </f:SidePanelItem>
              </f:items>
            </f:SidePanel>
          </content>
        </Page>
</mvc:View>

Digression on Expression Binding :

I have used basic expression binding using ternary operator for choosing which icon to show based on the value of property "type".

If it is Query asked by User, then display icon would be Customer

if not, that means it is a response from the bot, then icon would be da-2 ( symbol of SAP Joule )

<List id="id_List" items="{path:'chatbot>/list'}"
                   noDataText="No Chat history..">    
  <items>
    <FeedListItem text="{chatbot>text}" 
                  icon="{= ${chatbot>type} === 'query' ?                                        
                  'sap-icon://customer' : 'sap-icon://da-2' }">
    </FeedListItem>                        
  </items>
</List>

Some UI Finally.

Initially, display only Illustration and hide other content of the sidePanel.

on click of "lets go" button, hide the Illustration and display both the ScollContainer and Input conrols.

Create and set an empty JSON Model to the view. Add below code in the onInit method.

that.jsonModel = new JSONModel();
this.getView().setModel(that.jsonModel, "chatbot");

Same Model is bound to the items property of the List control in the View.

Since there is no value in JSON Model initially, List Control would display "No Chat History.." as it is set in NoData property of the List.

When you type something in the Input box, it calls external API and gets response from the assistant.

Add below code in your controller file to make an API Call.

onSubmitQuery: function (oEvent) {
        var oInput = oEvent.getSource();
        var sQuery = oInput.getValue();
        oInput.setValue("");

        // Add User query to the model
        that.aList = that.jsonModel.getProperty("/list");
        if (!that.aList) {
          that.aList = [];
        }

        var oJsonObj = {
          text: sQuery,
          type: "query",
        };
        that.aList.push(oJsonObj);
        that.oJsonModel.setProperty("/list", that.aList);

        // Add Bot Response to the model
        // fetch existing model
        that.aList = that.oJsonModel.getProperty("/list");
        var sUrl;

        sUrl = "<your-api-endpoint>/query";

        this.postAPI(sUrl, sQuery)
          .done(function (result) {
            var aList = Array.isArray(result) ? result : [result];
            that.oJsonModel.setProperty("/list", that.aList.extend(aList));
          })
          .fail(function (result) {
            var aList = [];
            var oJsonObj = {
              text: "Failed to connect to backend!",
              type: "response",
            };
            that.aList.push(oJsonObj);
            that.oJsonModel.setProperty("/list", that.aList);
          })
          .always(() => {
          });
      }

Note : postAPI is just another custom function to make API call.

Final Result, This is how it would look like.

Conclusion :

This is how you can add a chat assistant widget in a page of your existing UI5 application.

What's next ?

There is still room for UI improvement.

Check below blog on How to display Query on right hand side and Response from the assistant on left hand side.

Next Blog : Dynamic Query Response Handling with Factory Function

Upcoming Blogs : [ Adaptive Cards, Action Items and many more ... ]

Update : AI tools and Chatbot as copilot for develoepers

Stay tuned for more blogs on this series.

Designing with Code - Update to Version 2 of UI5 Web Components

2024-11-18T17:33:37.613000+01:00

Designing with Code – Why Should I?

In my article series Designing with Code, I shared my experience of spending six months working within a product design team. By stepping out of my comfort zone—my beloved design tool—and diving into creating first prototypes using UI5 web components, I found myself much more connected to the actual end result. Using my entry-level coding skills, I gained insights into what happens behind the pixels, which greatly improved my discussions with developers.

In subsequent articles, I introduced how designers can leverage web components, CSS, JavaScript, and HTML to create interactive prototypes. This hands-on approach not only deepens your understanding of components but also allows you to experience how they behave in real-world scenarios.

To clarify: I am not a front-end developer. But just as a basic understanding of design benefits developers, designers can work more efficiently by grasping the basics of coding. This is particularly helpful when exploring how components interact or how screen readers interpret your designs. For me, it was a true eye-opener.

I hope this inspires you to get started! You might want to revisit Part 3, where I cover a simple prototyping setup, or Part 4, which introduces the model-view-controller pattern.

An Update: Why Some Examples No Longer Work

Unfortunately, the examples in my previous articles are now outdated due to two major changes:

Updated UI5 Documentation: The UI5 team migrated their documentation to a new system, integrating a sleek playground feature. This allows you to view live example code, make modifications, and preview results directly in the browser. If you haven’t tried it yet, I highly recommend it! However, this migration rendered the old links to the UI5 web components library invalid, breaking the examples in my articles.
Release of UI5 Web Components Version 2: A new version of UI5 web components introduced several improvements, including refactoring and stabilization, as well as exciting new components.

Given these changes, I’ve updated the examples in the GitHub repository to align with the latest version:

GitHub Repository – Designing with Code

Disclaimer: The prototyping setup described here is not intended for production use. For building production-grade applications, please refer to the official UI5 documentation.

Simple Prototyping Setup

Building production-ready applications often involves complex tools like build systems, testing frameworks, and dependency management. For designers, this can be overwhelming and time-consuming. Thankfully, there are simpler alternatives for prototyping:

Playground

The UI5 playground allows you to experiment with components by editing code and seeing instant results. This is sufficient for most exploratory tasks. However, the playground doesn’t allow for permanent saving or advanced interactions.

Local Prototyping Setup

For more complex prototypes or continuous work, a local setup offers greater flexibility. Below, I outline a minimal installation and configuration process that avoids heavy tools while providing key advantages:

No need to manage tools or packages locally.
No build steps—simply refresh your browser.
Easy sharing of prototypes.

Setting Up the Prototype: Key Changes in the New Approach

Import Map vs. Bundle

Previously, we imported a single bundle that included all libraries, making every component available but at a performance cost. The new approach uses an import map, which loads only the components you explicitly reference, improving efficiency and compatibility with real deployments.

To include a component, locate the <script> tag in the UI5 playground under the expanded code header. Copy and paste it into your HTML file.

I recommend using the sources available on the GitHub repository to get started. These files might also serve you as basis for your own projects going forward. The previous examples are still available. I have added an updated version in parallel folders:

Old Setup: Part-03-SAP-Web-Components/01_button
New Setup: Part-03-SAP-Web-Components 2.0/01_button

Manual Imports

With the new setup, you must manually import each required component. Create a main.js file in the same folder as your index.html and add the relevant imports. For example, to use a button component:

import "@ui5/webcomponents/dist/Button.js";

If a component doesn’t render as expected, double-check your imports.

The import statement, that is needed to import a component can be found in the documentation under the section “ES6 Module Import”. Figure 3 shows the import statement in the documentation for the Avatar component.

Running the Prototype: HTTP Server Required

Modern browsers require HTTP servers to dynamically load resources. You can use:

Visual Studio Code with Live Preview

Install the Live Preview extension for an integrated HTTP server in Visual Studio Code.

(Recommended for simplicity)

Node.js and http-server

http-server is a lightweight alternative for more control over your setup.

Is It Worth the Effort?

Admittedly, this new setup requires more effort compared to the old bundle-based approach. However, it offers significant advantages:

Lightweight and Portable: Avoid managing local installations while benefiting from version control. Share your prototypes easily using platforms like GitHub Pages.
Realistic Testing: Standalone prototypes allow you to test interactions like keyboard behavior, screen reader support, and resizing without playground constraints.
Developer-Ready Code: The new setup aligns more closely with production code, enabling developers to reuse your prototypes effectively.

For quick experiments, the playground remains the fastest option. But for long-term projects or detailed explorations, this setup strikes a great balance between simplicity and functionality.

My Home in SAP S/4HANA - A Deep Dive as of 2408

2024-11-21T18:05:08.085000+01:00

My Home is your personalized entry page within SAP S/4HANA, that provides you with easy access to the business insights, tasks, and applications you need to do your job with greater speed and agility. My Home lets you access and manage your to-dos, your favorite pages, your favorite apps, and your insights on any device. It builds on the functionality of the SAP Fiori launchpad and leverages Spaces and Pages (as a prerequisite). The new My Home was first released with the SAP S/4HANA Cloud Public Edition 2208 release. Since its first release, there have been great improvements in its functionality and user experience. In this blog, we’ll revisit the features of My Home that will enhance your user experience and productivity.

Video: Welcome to the My Home in SAP S/4HANA

My Home in SAP S/4HANA Cloud

My Home Sections

The My Home entry page is divided into different sections. You can personalize the content of each section to fit your specific needs.

To-Dos

The To-Dos section provides an overview of your daily tasks. It combines your tasks from the My Inbox application and your situations from the standard and extended My Situations applications. The tasks display relevant business information about your assigned workflow items. It enables you to process your tasks without ever having to leave My Home. If Collaborative ERP is enabled on the system, you can collaborate directly with colleagues via MS Teams to resolve issues about your tasks quickly.

Video: Managing the To-Dos Section

SAP S/4HANA My Home To Do Section

News

The News section keeps you updated on your company's latest news, or SAP S/4HANA system news. If SAP S/4HANA system news is displaying, you can shuffle through system news from different lines of business. You can manage SAP S/4HANA system news by choosing a line of business that interests you to stay focused on relevant information.

Video: Personalizing the News section

SAP S/4HANA My Home News Section

SAP S/4HANA My Home System News articles

Pages

The Pages section provides you with quick access to your favorite or most used pages. You can manage the visibility of your pages and order them in a way that enhances your productivity.

Video: Personalizing the Pages section

SAP S/4HANA My Home Pages Section

Apps

The Apps section provides easy access to your favorite, most used, recently used, and recommended applications. The Apps section improves the discoverability of your applications. The Recommended tab offers app suggestions using SAP Business AI, based on your user-specific role assignment. You can add apps to the Favorites tab from your most used, recently used, and recommended applications. You can organize and categorize your favorite applications by using the grouping, ordering and color-coding functionality so you can access them even more efficiently.

Video: Personalizing the Apps section

SAP S/4HANA My Home Apps Section

Insights Tiles and Insights Cards

The Insights section allows you to manage and monitor your company’s activities. It shows critical business information through KPIs and micro charts. This section is broken into two sections: Insights Tiles and Insights Cards. Insights cards and tiles display dynamic content at a glance. They provide quick and easy access to the applications that can provide more detailed information. Insights tiles offer analytical information, such as charts or KPIs. Insights cards are similar to Insights tiles but provide more detailed analytical information in the form of charts, tables or lists from supporting overview page-, list report-, and analytical list page-based applications. Thanks to this information, you can assess what is happening at any time and take action when needed. You can customize the Insights section to display information that enables you to do your job with speed and agility.

Video: Personalizing the Insights Tiles Section

Video: Personalizing the Insights Cards Section

SAP S/4HANA My Home Insights Section

The My Home Layout and Advanced Settings

You can personalize the individual My Home sections, and another key feature is the ability to customize the layout of these sections on My Home. This personalization capability allows you to prioritize the information that is most important to you. You can manage the visibility and the display order of each of the My Home sections.

Video: Personalizing the Layout of My Home

Once you have personalized the My Home sections you can easily share your personalized content with co-workers who have the same or a similar role as you. This enables them to also work with speed and agility.

Video: Sharing the Personalized Content

Now that we have given you a recap of the available My Home functionality in SAP S/4HANA, we hope you enjoy working with My Home in SAP S/4HANA and reap its benefits. You can look forward to more enhancements that will improve your My Home experience even further in future releases of SAP S/4HANA.

Note: Innovations appear first in SAP S/4HANA Cloud Public Edition. The demos in the videos were recorded on SAP S/4HANA Cloud Public Edition in September 2024.

Stay tuned!

Caroline Welsh and Anna Freitag

Product Managers of My Home, Cloud ERP UX Engineering.

SAP S/4HANA Cloud Public Edition 2502亮点前瞻：用户体验（User Experience）

2025-01-29T01:00:00.057000+01:00

在SAP S/4HANA Cloud Public Edition 2502版本中，关于用户体验（User Experience）方面的重要变化如下：

更改公司徽标Logo

在SAP ERP公有云Fiori界面的左上角，默认显示的是SAP的徽标。

从2408版本开始，添加了一个新的系统参数选项：用于将SAP徽标替换成客户自己的徽标。管理员可以在管理快速启动板设置应用中找到参数COMPANY_LOGO_URL，上传新徽标的文件图片即可。更改完之后的新徽标将对所有用户可见。

如需改回SAP的徽标，可以到管理快速启动板设置应用中，点击“编辑”，重置恢复成缺省值即可。

右键快速移动部分（Section）

在编辑模式下，你现在可以快速移动页面上的一个部分（Section），点击右键，选择Move Section Up或者Move Section Down：

默认显示“复制到剪贴板”按钮

现在在表格中，会默认显示“复制到剪贴板”按钮。可以让用户选择表格中的特定某些单元格，并复制到剪贴板中。只有当用户选择了表格中的内容时，这个按钮才会可用。这项功能针对所有表格类的页面都适应。

更改前：

更改后：

与Microsoft Teams的集成：待办事项的通知

有了这个功能，你就可以在Microsoft Teams中收到你在SAP S/4HANA Cloud Public Edition我的主页中待办事项里的任务和情况的通知。你就可以在Teams中直接处理了。

Visualizing Data with SAP Analytics Cloud

2025-03-27T16:13:20.067000+01:00

This article is part of a blog series on Dashboard Design BestPractices, created to assist you in designing and building meaningful dashboards with SAP Analytics Cloud. Click here to open the Dashboard Design Best-Practices blog series hub page in a new window

Content
This blog page focus on the art of visualizing data through the selection of appropriate
chart types to convey the intended message:

Comparison
Time-Analysis
Part-to whole
Cumulation
Deviation
Distribution
Correlation

First, let’s start with some general rules of thumb and quotas that you may consider when creating analytical content.

Show the necessary information comprehensively.
Everything on the screen has to make sense.
Support data comparison capabilities.
Everything that belongs together is grouped visually.
Show variances.
Use graphics whenever possible.
Use consistent terms.
Group with empty space.
Provide clear support of the information hierarchy.
Place time-series on the x-axies
Visually highlight the most important information.
Provide clear info where the action is actually needed.
Focus on aesthetically pleasing, clear visual design.
Avoid abbreviations (unless these are colloquial).
Do not use semantic colors in the design, e.g., green, yellow, and red (unless it's company branding).
Lead with purpose (guide the user to the appropriate actions).

Quotes

„The pieces on the dashboard have to be arranged in relation to one another“ - Stephan View
"Overview first, zoom and filter, then details-on-demand"
-> Visual information seeking mantra by Ben Shneiderman"
"Perfection is achieved, not when there is nothing more to add,
but when there is nothing left to take away"
-> Antoine de Saint-Exupéry from "The little Prince"
"Less is faster" - Hick´s Law

Chart Types

Chart types are important tools for data visualization because they help transform raw data into visual formats that are easy to understand, analyze, and communicate. The correct chart type depends on the type of data you're working with and the message you want to convey.

1. Comparison (Structure Analysis)

Choose Bar and Column Charts as the most effective visualization for structure analysis, also called nominal comparison or category comparison.

Note:
When showing development over time, always use charts with horizontal category axes (Column Chart).
This is one of the most well-known guidelines established by IBCS (International Business Communication Standards) in its practical guidelines for the consistent design of reports.

They also propose the usage of semantic patterns to visually distinguish different types of values when comparing them.

Actual Values: What values are (solid pattern with dark color).
Previous Year Values: What values were (solid pattern with neutral grey color).
Forecast Values: What values might be (hatch pattern).
Plan Values: What values should be (empty pattern).

2. Time Analysis

Use a line chart if you want to emphasize the trend over time.

Use a column chart if you want to emphasize the values themselves.

Note that there are other time-related categories that have an intrinsic order and indicate progression or trend, such as age and age group.

3. Part-to whole

When thinking about visualizing parts of a whole, you are likely to turn to pie or donut chart.
However, in many cases bar chart is a far better option because you can:

Compare parts to each other
Display category labels and value labels associated with each part
Display multiple values
Display small values in a better way
Cut down on the usage of colors and corresponding legends you have to use

Part-to-Whole Analysis by Bar Chart

Part-to-Whole Analysis by Stacked Percentage Bar Chart

Donut Chart

Donut charts work best with a small number of categories (5-7).
Too many categories can make the chart hard to interpret (see Pic. 1).

Note that when using pie or donut charts, you should be careful when enabling the "Top N" options, as this will change the original percentage values and recalculate each segment's contribution to the total of the "Top N" categories (see Pic. 2).
Instead, use the group remaining function in chart widget menu to create a segment that represents the "Others" category (Pic. 3)

Tree Map

Tree map is a good visualization to present hierarchical data, with nested figures rendered by rectangles of different sizes.

In the example below, each rectangle signifies a department and its size in proportion to the number of department employees. You can use colors to differentiate employee genders, but here the chart displays only female employees.

4. Cumulation

You can use waterfall charts to analyze cumulative values. A waterfall chart accumulates successive values and shows how the cumulative value changes from an initial state to a final one.

Variance waterfall chart in vertical orientation displays the variance between different scenarios in structure.
In the example below, the variance waterfall chart shows the net sales in Europe from previous year (PY) to this year (AC). You can see that this year's net sales value is 14 million USD higher than the previous year and the difference in Spain is the largest.

Variance waterfall chart in horizontal orientation displays the variances across different time periods.
In the example below, you can see that shipping cost keeps growing from Q1 to Q4 in the whole year.
Q4 is expanded to show changes in months.

5. Deviation

Deviation charts, also known as variance charts, are used to visually display how a value deviates from a baseline or expected target.
They are particularly helpful for understanding the differences between actual results and a reference point, such as a goal, target, or historical data.

Actual and Plan Values and Deviation in Bar Charts Side by Side

Numeric and Percentage Deviation in Table with In-Cell Charts

Focus on Trend
If you want to focus on the trend of the variation, you can use a line chart as the examples below.

6. Distribution

Histogramm
A histogram displays the numbers of data points that lie within respective ranges, which is extremely helpful in emphasizing data frequency. In the left example, the axis displays age groups, and the columns show the numbers of employees that fall in different age ranges.

Column Chart
If your use case is to display the distribution of employees of each age group in percentage,
a column chart is a good option.

Stacked Column Chart
Distribution of Two Series by Stacked Column Chart.

You can use a frequency polygon with multiple lines when you want to compare the distribution of multiple sets of values.

Box plot
A Box Plot is an ideal option for displaying the concentration of data, which is constructed from minimum, first quartile, median, third quartile and maximum.

7. Correlation

Scatterplot and bubble chart are the most frequently used chart types to visualize correlation,
though line chart or bar chart side by side is also an acceptable solution.

SAP Fiori for SAP S/4HANA - Simplifying My Home Activation from SAP S/4HANA 2023 FPS02 or higher

2025-04-30T10:20:12.802000+02:00

Innovation made easier! Enabling My Home for SAP S/4HANA has been streamlined from SAP S/4HANA 2023 FPS02. Save time and effort by using the settings in task list SAP_FIORI_FOUNDATION_S4.

In our previous blog, "SAP Fiori for SAP S/4HANA - Empowering Your Homepage: Enabling My Home for SAP S/4HANA 2023 FPS01", we explored the detailed steps required to enable My Home in SAP S/4HANA 2023 FPS01. We walked through the structure, technical components, configuration steps, and necessary authorizations to activate My Home manually.

IMPORTANT : If you are looking to understand the structure of My Home i.e. its main components”, or its building blocks and technical components, please refer to our previous blog.

With the SAP S/4HANA 2023 FPS02 release, the process of enabling My Home has been further streamlined. As a part of this blog, we will focus on the enhancements introduced in FPS02, where Steps 1 through Step 4 described in the previous blog are now automated via the SAP_FIORI_FOUNDATION_S4 task list. This significantly reduces manual effort, making My Home activation quicker and more efficient.

Comparison of SAP_FIORI_FOUNDATION_S4 Task List Across SAP S/4HANA 2023 FPS01, and FPS02

Simplified My Home Activation with SAP S/4HANA 2023 FPS02

Automation via the SAP_FIORI_FOUNDATION_S4 Task List

With the SAP S/4HANA 2023 FPS02 release onwards, Steps 1 through 4 explained in the pervious blog are now automated as part of the SAP_FIORI_FOUNDATION_S4 task list. This task list consolidates these key setup steps into a single run, simplifying and streamlining the activation process.

Note:If you have already activated SAP Fiori foundation on your SAP S/4HANA 2023 FPS02 using Rapid Activation and executed the SAP Fiori - Initial Setup for Fiori Application S/4 (SAP_FIORI_FOUNDATION_S4) task list, the following tasks are automatically included as part of the default task list run, and no additional manual execution is required.

However, if you have upgraded from SAP S/4HANA 2023 FPS01 (or lower releases of SAP S/4HANA) to SAP S/4HANA 2023 FPS02, you must re-execute the following four tasks (from the SAP_FIORI_FOUNDATION_S4 task list ) described in this blog to ensure My Home is fully enabled with the latest updates.

Step (described in the previous blog)	Corresponding task from the SAP_FIORI_FOUNDATION_S4 task list	Automation Details
1 - Enabling Spaces and Pages Layout	Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF)	Configures FLP property SPACES with system setting checks.
2 - Activating the My Home UI5 Component	Activate HTTP Services Foundation	Activates the SAPUI5 Component ux.eng.s4producthomes1 (SICF node: BSP PRODUCT_HOMES1).
3 - Activating the Required OData V2 and V4 Services	Activate Gateway OData Services Foundation (/IWFND/MAINT_SERVICE) & Publish Service Groups Foundation (/IWFND/V4_ADMIN)	Publishes the following service groups: - /IWNGW/NOTIFICATION (Notification) - /UI2/INSIGHTS_SRV (Insight Cards) Note: TASKPROCESSING (My Inbox) and C_SITNMYSITUATION_CDS (Situation Handling) are NOT included in this automation and must be activated manually if required. Please refer to Step 4 from the previous blog for manual activation steps.
4 - Configuring Launchpad Parameters	Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF)	Configures all necessary FLP parameters for My Home page, including enablement of the page, Custom Component, and UI5 Insights.

Step 1 through Step 4 can be executed cumulatively on SAP S/4HANA 2023 FPS02 (or higher)

Navigate to the transaction STC01 (Task Manager for Technical Configuration).
STC01 : Task Manager for Technical Configuration
Enter the Task List name as SAP_FIORI_FOUNDATION_S4 (which is used to activate Fiori foundation) and click on the Generate Task List Run (F8) button.
On the next screen with generated task list, uncheck all the tasks using Skip All Tasks (F7) button and then only Select the task Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF). After selecting the task, You will get an Information popup that the activation step has dependencies on other steps like creating transports, activating services etc., click Continue for all the dependent steps.

Skip all tasks for SAP_FIORI_FOUNDATION_S4 and select 'Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF)' task

By clicking on the Change Parameters button for this task, you could configure the following Fiori Launchpad Parameters required for My Home enablement, which have been highlighted already as a part of the blog. For now, you could just leave them as-is to default and continue.

Change Parameters for the task 'Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF)'
Additionally, also select the task Publish Service Groups Foundation (/IWFND/V4_ADMIN) which would publish the /IWNGW/NOTIFICATION (Notification) and /UI2/INSIGHTS_SRV (Insight Cards) OData V4 services.

After selecting this task, only the following 5 task should remain selected.
- Create / Select Customizing Request (SE09)
- Activate and Configure FLP for Spaces and Pages (/UI2/FLP_CUS_CONF)
- Activate Gateway OData Services Foundation (/IWFND/MAINT_SERVICE)
- Publish Service Groups Foundation (/IWFND/V4_ADMIN)
- Activate HTTP services Foundation
Click on the Start/Resume Task List Run in the Dialog button to start the task list run.

IMPORTANT: As mentioned above, the task list SAP_FIORI_FOUNDATION_S4 available with SAP S/4HANA 2023 FPS02 would not activate the optional functionality like My Inbox and Situation Handling related OData services. Please follow the references mentioned in the original blog should you be interested to activate them.

Step 5: Assigning Relevant Authorizations via a PFCG Role

The role creation and authorization setup for My Home in SAP S/4HANA 2023 FPS02 remains the same as FPS01. You can follow the same steps described in the previous blog to create and configure the required PFCG role.

For a quick summary, here are the key steps:

Create a PFCG security role (e.g., Z_SR_MY_HOME)
- Navigate to transaction PFCG, enter a role name, and click Create Single Role.
- Provide a role description and switch to the Menu tab.
Add the Required OData Services
- TASKPROCESSING (for My Inbox)
- C_SITNMYSITUATION_CDS (for Situations)
- INTEROP (for personalization, should already be active)
- /UI2/INSIGHTS_CARDS_READ_SRV (for Insights Cards)
Assign Target Mappings for My Inbox and My Situations
- Use SAP Fiori Launchpad Content Manager (UI2/FLPCM_CUST).
- Create a Launchpad Catalog (Z_BC_MY_HOME).
- Add Target Mappings for My Inbox (F0862) and My Situations (F4154).
Assign the Role to Users
- Open the Role Maintenance transaction PFCG, go to the User tab, and assign the role to business users.

Note: Ensure that users have business roles containing spaces and pages, so My Home functions correctly.

Note :

Becoming a SAP Fiori for SAP S/4HANA guru

You’ll find much more on our SAP Fiori for SAP S/4HANA topic page

SAP Fiori for Web v6.0

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

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

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

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

Check it out here

SAP Figma Community

What’s New - and What’s Evolved? 

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

9+ New components:

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

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

Form has been added to streamline structured data input.

Form component

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

Calendar with Legend

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

Button with Attention Badge

Variables:

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

Component Improvements:

Additional variants have been added to existing components.

What This Means for You

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

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

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

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

Launchpad Property ID	Property Value
SPACES_CUSTOM_HOME	true
SPACES_CUSTOM_HOME_COMPONENT_ID	ux.eng.s4producthomes1
UI5_INSIGHTS	true