SAP Community - HTML5

How to enable SUBMIT Button in Fiori app – Verify Currency Adjustments (F4670)

2023-03-28T11:44:54+02:00

Hello,

In this blog we will learn How to enable the SUBMIT button in Fiori app - Verify Currency Adjustments (F4670).

Issue: When we click at Create Button, It navigates to the Fiori app - Post Currency Adjustments(F1606). Here SUBMIT Button is disable but end user wants to SUBMIT the Data.

Prerequisites: User must have access to all three apps

Verify Currency Adjustments(F4670)

Manage Workflows for Journal Entry Verification - In General Ledger (F2720)

Manage Teams and Responsibilities for Journal Entry Verification - In General Ledger (F3932)

Steps to enable the SUBMIT Button

Go to Fiori launchpad and launch the Fiori app – F4670 (Verify Currency Adjustments) and Click at Create Button.

2. It will navigate to the Fiori app F1606 (Post Currency Adjustments).

3. Fill all required details, but as we can see SUBMIT Button is not enabled.

4. To enable the SUBMIT Button go to the Fiori app – F2720 (Manage Workflows for Journal Entry Verification - In General Ledger)

Select the workflow Type as Currency Adjustment Verification from Dropdown.

If Currency Adjustment Verification is available so no need to perform any action.

Else there is no data regarding this -> Create the new entry for this.

Now we can see the entry of Currency Adjustment Verification.

5. Go to Fiori launchpad (/n/ui2/FLP) --> Fiori app (Manage Teams and Responsibilities for Journal Entry Verification - In General Ledger).

Need to check Entry is maintained or not. If entry is not maintained, please create entry and fill required data and Save.

6. Go to Fiori app --> F4670 (Verify Currency Adjustments) and Click at Create Button. Perform the steps 2 & 3. Now we can see that SUBMIT Button is enable in our application (F1606).

More Information:

Verify Currency Adjustments

Conclusion

SUBMIT Button is enable in our Fiori application Post Currency Adjustments- (F1606).

With this we come to an end of this blog. Hope you find it useful.

Keep learning & Keep Sharing!!

Fancy Emails from SAP Integration Suite(CI) and BTP Alert Notification Service

2023-09-03T14:50:38+02:00

A few years ago one of the client team asked me can PI/PO able to send other than plain/text EMAIL notifications for standard CBMA/MAIL receiver scenarios?.

The answer was YES, PI/PO can able to sent more organized and feel good mails which can present the required data in the tabular form or more colorful or more catchy. Have done it and showed how it was working.

Recently again the same question was asked by another client does CPI/CI able to send more attractive emails instead of plain and text emails?.

The answer is YES. Its not only Integration Suite(CI) but also the BTP Alert Notification Service can able to sent more fascinating emails. Just embed few lines of HTML tags in the actual MAIL BODY thats it!!! But remember don't use the unnecessary tags in order to "keep the core clean". Also the same email body can be explicitly set using groovy script but i personally do no suggest always relying on scripts when things can be done in standard way why to make the maintenance difficult.

It so happens if some ABAP or FIORI screens are been used by the client-user to get to know the capabilities of SAP. What if the end user is not really connected with the background processing of their enterprise data where SAP is leveraged at its BEST. Might be for one of the usual business case of notifying the User about the technical/functional error alerts or some important ORDERS receivable/processing by the middleware system or some other very critical bank interfaces processing updates. Whatso ever that notification email plays the extra cosmetic advantage of not only representing the calibrated tool efficacy but also the puzzling question what's running behind the screens for the new or non-sap users. In this AI-Gen world nothing goes waste even the word of mouth considered to be a unrealistic publicity.

Let us checkout some of the CI cases where this can be a promising approach of fine tuning the USP of the BTP as a product.

From Integration Suite(CI):

Case-1:

How can the emails be send in the tabular format with the required data passed dynamically from the specific interface to global exception interface?

If there is a global exception interface the below can be kept inside the MAIL receiver channel and for some scenarios where direct MAIL should be sent for some ORDER updates then that IFLOW actual MAIL receiver channel should be configured with the same as below

MAIL RECEIVER

The MAIL BODY should be as below.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>EMAIL</title>

  <style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>

<p>Hi,<br><br>

Please find below details for Interface Message failure.<br>

<table>

  <tr>

    <td><span style="font-weight:bold">BTP-CI Environment</span></td>

    <td>${header.CPIEnvironment}</td>

  </tr>

  <tr>

    <td><span style="font-weight:bold">Message ID</span></td>

    <td>${header.MessageId}</td>

  </tr>

  <tr>

    <td><span style="font-weight:bold">SenderSystem</span></td>

    <td>${header.SenderSystem}</td>

  </tr>

  <tr>

    <td><span style="font-weight:bold">ReceiverSystem</span></td>

    <td>${header.ReceiverSystem}</td> 

  </tr>

  <tr>

    <td><span style="font-weight:bold">Timestamp</span></td>

    <td>${header.Timestamp}</td>

  </tr>

  <tr>

    <td><span style="font-weight:bold">Error Message</span></td>

    <td>${header.ErrorMessage}</td> 

  </tr>

</table><br>

Do Not Reply to this mail. Please contact SAP-Integration Team for further investigation.<br><br>

Regards,<br>

SAP Integration Team.

</p>

</body>

</html>

The BODY MIME Type should be "TEXT/HTML" instead of "TEXT/XML".

After execution the OUTLOOK or GMAIL or any other exchange server will be received the mail as below

EMAIL FORMAT

Case-2:

How can the emails be send in the tabular format with some colors embedded and main text highlighted in required color?

Modify the table style declaration and required row with span

<table style="background-color:LightGray;">

<td><span style="color: red;">Your Input Data</span></td>

Case-3:

How can the emails be differentiated based on the environments?

Well there was the time while using the SAP systems through GUI , consultants used to keep different screen colors for each environment. For example DEV: GREEN, QA: ORANGE and PROD: RED.

Similarly we can make a notifiable difference in the mails received from which environment its sent from. However there will be the subject or some row in the body indicating that environment specific information but if its added with some background color on top of normal text which will be very much helpful. As most of them will set the outlook=>layout=>folder pane=>normal where the mail body will be noticed immediately this can be achieved by using the below.

Modify the body tags as below

<body style="background-color:MediumSeaGreen;"> in DEV CI Interface Mail Channel
<body style="background-color:Orange;"> in QA CI Interface Mail Channel
<body style="background-color:Tomato;"> in PROD CI Interface Mail Channel

This can be useful when the mail recipient list is the same for all or any two CI environments.

From SAP BTP Alert Notification Service:

While configuring for the Alert Notification Service any type of alerts can be configured. Among all the available action types " EMAIL " and " EMAIL with Custom SMTP Server " can used for different subscription sources and accordingly the conditions can be configured.

Once the Action Type "EMAIL" is selected then the below options to be used to configure the email with the HTML embedded body

Use HTML checkbox to be selected.

Payload Template should be inserted with the required custom payload template.

Conclusion:

There are different types of HTML tables, styles, formatting, colors, symbols, emojis etc., which can be used as per the requirement and embed those lines of tags in the EMAIL BODY with dynamic and static values.

SAP always suggests to follow the standard so when this can be done using a simple html tags better to use the same tags using the dynamic properties directly in the EMAIL BODY and not relying on other groovy scripts as the maintenance will be difficult.

Also for S4 HANA or AIF any SAP products where the standard or custom alerts are possible just check for HTML support. If its present then similar configurations can be done over there and make the emails more fancy!!!

Disclaimer:

This article is only for informational purpose that usage of HTML tags inside the MAIL BODY gives more attractive EMAILS to the recipients.

Few cases are shown as an example but no limitations in any perspective.

SAP Integration Suite Enhanced Monitoring

2023-10-19T20:36:25+02:00

Scenario Overview

Using the standard monitoring capabilities from SAP Integration Suite sometimes has its downsides. Each one of us has faced at some point the need to persist or store trace logs or even save the logs of a job that's running outside of business hours.

Together with my colleague and dear friend codrinz we started to think at way to persist the much needed trace logs that are only available for one hour on the SAP Integration Suite Tenant.

This idea came from a need we had while doing tests on several artifacts, and because they were scheduled somewhere around 4 AM I was not there when they ran and in the morning we had to face plain/short error messages.

Using the standard payload logging as attachments has its limitations, because in the end attachments would pile up in the backend and it will slow down the tenant, so we had to think at a different way of accessing the much-needed logs.

By integrating SAP Business Technology Platform products we have managed to create an application that can schedule a trace log for a specific iFlow artifact, scan for any runs in the specified interval and save it into a SAP HANA Database. Also, with the help of openAI, we get suggestions on how to fix the captured errors.

All the SAP products are being used on a trial environment, so if you do want to do anything similar to what we did make sure to read the SAP Tutorials for Developers.

Architecture Overview

The following picture gives an overview of the solution architecture :

Solution Overview

The end user can use the html page exposed by the SAP CAP application for configuring and inspecting the logs saved.

Video short demo

Technical setup

SAP CAP Application Backend

Trial dev space

The application was created in SAP Business Application Studios using NodeJS, express and HDB connections to the SAP HANA Database and it consists of creating multiple services and functions which are being called from the html page and SAP Integration Suite.

Below are the entities we exposed in the catalog service, which are being used to communicate with the database.

Catalog services

The services are binded to the data model created below.

Data model

By also creating some dummy CSVs for sample data, we were able to push the application to Cloud Foundry, generate the HDB container/tables and deploy it.

SAP CAP Application Frontend

Application Home Screen

The frontend was designed in HTML combined with Javascript. It consists of 3 pages and each one has buttons that trigger several REST calls to the SAP HANA Database or to the SAP Integration Suite endpoint that controls the behavior of several functionalities.

Below is a sample Javascript code used to populate, filter and update a table .

<input type="text" id="searchInput" placeholder="Search for iFlow name..." onkeyup="filterTable()">

        <br><br>



        <table id="dataTable">

            <thead>

                <tr>

                    <th onclick="sortTable(0)">iFlow name</th>

                    <th onclick="sortTable(1)">StartDate</th>

                    <th onclick="sortTable(2)">StartTime</th>

                    <th onclick="sortTable(3)">EndDate</th>

                    <th onclick="sortTable(4)">EndTime</th>

                    <th>Action</th> <!-- Add a new column for delete buttons -->

                </tr>

            </thead>

            <tbody id="dataBody">

                <!-- Table content will be added dynamically -->

            </tbody>

        </table>



        <!-- Sorting options dropdown -->

        <div class="sorting-options" id="sortingOptions">

            <a href="#" onclick="sortTable(0, 'asc')">Sort Ascending</a>

            <a href="#" onclick="sortTable(0, 'desc')">Sort Descending</a>

            <a href="#" onclick="sortTable(1, 'asc')">Sort Ascending</a>

            <a href="#" onclick="sortTable(1, 'desc')">Sort Descending</a>

            <a href="#" onclick="sortTable(2, 'asc')">Sort Ascending</a>

            <a href="#" onclick="sortTable(2, 'desc')">Sort Descending</a>

            <a href="#" onclick="sortTable(3, 'asc')">Sort Ascending</a>

            <a href="#" onclick="sortTable(3, 'desc')">Sort Descending</a>

            <a href="#" onclick="sortTable(4, 'asc')">Sort Ascending</a>

            <a href="#" onclick="sortTable(4, 'desc')">Sort Descending</a>

        </div>



        <script>

            // Function to delete a row when the delete button is clicked

function deleteRow(row) {

    const iFlowName = row.cells[0].textContent.trim(); // Extract iFlow name from the first column



    // Make a GET request with query parameters to delete the corresponding iFlow

    deleteIFlow(iFlowName);



    // Remove the row from the table

    row.remove();

}



// Function to make a GET request to delete an iFlow

function deleteIFlow(iFlowName) {

    // Define the URL and headers for the GET request

    const apiUrl = 'https://${DispatcherURL}';

    const apiKey = '${apiKey}';

    const step = 'DeleteScheduleTraces';



    // Construct the full URL with query parameters

    const url = `${apiUrl}?Step=${step}&Name=${iFlowName}`;



    // Fetch data using the GET request

    fetch(url, {

        method: 'GET',

        headers: {

            'ApiKey': apiKey

        }

    })

        .then(response => {

            if (!response.ok) {

                throw new Error('Network response was not ok');

            }

            return response.text();

            // alert(response.text())

        })

        .then(data => {

            // Handle the response as needed (e.g., display a confirmation message)

            const resp2 = data;

            alert(resp2);

            console.log('iFlow deleted:', data);

            

        })

        .catch(error => {

            const resp3 = 'Error deleting iFlow: ${error}';

            alert(resp3);

            console.error('Error deleting iFlow:', error);

        });

}

            // Function to filter the table based on the search input

            function filterTable() {

                const searchInput = document.getElementById("searchInput");

                const filterText = searchInput.value.trim().toUpperCase();

                const table = document.getElementById("dataTable");

                const rows = table.getElementsByTagName("tr");



                for (let i = 1; i < rows.length; i++) { // Start from index 1 to skip header row

                    const cells = rows[i].getElementsByTagName("td");

                    let matchFound = false;



                    // Only search in the first column (iFlow Name)

                    const textValue = cells[0].textContent || cells[0].innerText;



                    // Perform a partial search (check if the text contains the filter text)

                    if (textValue.toUpperCase().includes(filterText)) {

                        matchFound = true;

                    }



                    if (matchFound) {

                        rows[i].style.display = "";

                    } else {

                        rows[i].style.display = "none";

                    }

                }

            }



            // Function to make the GET request and populate the table

            function loadTableData() {

                // Define the URL and headers for the GET request

                const apiUrl = '${apiUrl}?Step=ScheduledTraces';

                const apiKey = '${apiKey}';



                // Fetch data using the GET request

                fetch(apiUrl, {

                    method: 'GET',

                    headers: {

                        'ApiKey': apiKey

                    }

                })

                    .then(response => {

                        if (!response.ok) {

                            throw new Error('Network response was not ok');

                        }

                        return response.text();

                    })

                    .then(data => {

                        // Parse the XML response

                        const parser = new DOMParser();

                        const xmlDoc = parser.parseFromString(data, 'text/xml');

                        const iFlows = xmlDoc.querySelectorAll('iFlow');



                        // Populate the table with data

                        const tableBody = document.getElementById('dataBody');

                        tableBody.innerHTML = ''; // Clear existing rows



                        iFlows.forEach(iFlow => {

                            const iFlowName = iFlow.querySelector('iFlowName').textContent;

                            const startDate = iFlow.querySelector('StartDate').textContent;

                            const startTime = iFlow.querySelector('StartTime').textContent;

                            const endDate = iFlow.querySelector('EndDate').textContent;

                            const endTime = iFlow.querySelector('EndTime').textContent;



                            // Create a new table row and cells

        const row = document.createElement('tr');

        const iFlowNameCell = document.createElement('td');

        const startDateCell = document.createElement('td');

        const startTimeCell = document.createElement('td');

        const endDateCell = document.createElement('td');

        const endTimeCell = document.createElement('td');

        const deleteCell = document.createElement('td'); // Add a cell for the delete button



        // Set cell values

        iFlowNameCell.textContent = iFlowName;

        startDateCell.textContent = startDate;

        startTimeCell.textContent = startTime;

        endDateCell.textContent = endDate;

        endTimeCell.textContent = endTime;



        // Create a delete button and set its attributes

        const deleteButton = document.createElement('button');

        deleteButton.textContent = 'Delete';

        deleteButton.classList.add('delete-button'); // Add a class to identify the delete button

        deleteButton.addEventListener('click', () => {

            // Call the deleteRow function when the delete button is clicked

            deleteRow(row);

        });



        // Append cells to the row

        row.appendChild(iFlowNameCell);

        row.appendChild(startDateCell);

        row.appendChild(startTimeCell);

        row.appendChild(endDateCell);

        row.appendChild(endTimeCell);

        deleteCell.appendChild(deleteButton); // Append the delete button to the cell

        row.appendChild(deleteCell); // Append the delete button cell to the row



        // Append the row to the table body

        tableBody.appendChild(row);

    });



                        // After populating the table, call the filter function to show all data

                        filterTable();

                    })

                    .catch(error => {

                        console.error('Error loading table data:', error);

                    });

            }



            // Call the function to load table data when the page loads

            window.addEventListener('load', loadTableData);

        </script>

        <button onclick="exportTableToExcel()">Export to Excel</button>

        <P></P>



        <script>

            // Function to export the table data to an Excel file

            function exportTableToExcel() {

                const table = document.getElementById("dataTable");

                const ws = XLSX.utils.table_to_sheet(table);



                // Create a new workbook and add the worksheet

                const wb = XLSX.utils.book_new();

                XLSX.utils.book_append_sheet(wb, ws, "Table Data");



                // Save the workbook as an Excel file

                XLSX.writeFile(wb, "table_data.xlsx");

            }

        </script>

There are several javascript codes involved in coding the buttons and tables. All the REST calls are made using the Express application framework, and the CSS is pretty simple, using public bootstrap and custom made layouts.

SAP HANA Database

We are using a trial SAP HANA Database instance on Cloud Foundry, and as a prerequisite for this we had to create SAP HANA Schemas & HDI Container + SAP HANA Cloud services.

The database is a simple one, without a Data Lake, in which we created a table in order to store the logs.

SAP HANA Database

For testing locally, we used a sample csv in order to generate my hdbcalculationviews and tables.

For deployment to Cloud Foundry we used the MTA Module Template to generate the mtar file, and then with mbt build and cf deploy commands we were able to deploy it to Cloud Foundry.

openAI Chat Completions API

We have used the API to get suggestions on the errors captured by the scheduled trace. The suggestions are purely as a point of reference, since the generative AI uses public knowledge related common issues and errors.

{

    "model": "gpt-3.5-turbo",

    "messages": [

        {

            "role": "user",

            "content": "Write advice for a developer on how to fix this SAP CPI error, maximum ${property.lengthOfResponse} characters: ${in.body}"

        }

    ]

}

Sample request body

SAP API Management and SAP Integration Suite

In order to access SAP Integration Suite endpoints, we had to run the call through an API created with SAP API Management, because we had to cope with the CORS policies.

API Created

All the steps required to do this are listed in this tutorial, and it involves creating an API, a Product and generate an APIKey for it.

All the REST calls coming from the frontend run through SAP API Management and end up in a Dispatcher that routes the message to the specific iFlow based on the query parameter that contain a step name.

const apiUrl = "https://${apiURL}?Step=GetTenantIflowList";

                const apiKey = "${APIKEY}";



                fetch(apiUrl, {

                    method: "GET",

                    headers: {

                        "ApiKey": apiKey

                    },

                })

Sample code for a REST call

SAP Integration Suite Calls Dispatcher

Email integration

Besides having the full table available with detailed errors, we have added the functionality of sending an email containing all the neccesary details for solving and identifying the issue to a list of recipients. We thought this application could be used by a functional consultant that has no technical knowledge to solve the SAP Integration Suite issue, and it would be helpful for him to send the details to a developer that has the proper knowledge to fix it, so we used the public Gmail SMTP to send mails. Below is a screenshot with one of the emails sent by the application.

Email sent by the application

Conclusions

All these functionalities we have created would help not only the integration developers, but also functional consultants. The tool can be really helpful in UAT phases as well, since you can store indefinitely the step contents and be able to access all the data that is flowing through the integration artifacts.

Of course, it might have some limitations regarding performace, since we used some dummy artifacts that are relatively small in size and do not deal with huge payloads, but in time it might be tweaked in a way that you could control what is being saved, what steps to watch and what headers/properties to log.

I hope you liked the article and feel free to reply with any suggestions here or on in the SAP Integration Suite Question section.

Thank you !

SAP BTP Help Shorty - HTML5 Configuration issue "Failed to get Metadata - 400"

2023-11-30T14:06:35+01:00

Hello fellow developers,

this will be another quick help blog post. I did not find any information for this error and I hope this might help someone else waste less time than me.

I recently redeployed a SAPUI5 MTA to the space it has been in before. The changes included the alteration of the xsappname in the xs-security.json. In any way, there was some change that altered the UAA properties of the MTA.

After the redoyplement, nothing was working and this shown as a warning:

I tried everything in my toolbox: Redeploying with --delete-service flag, manual deletion of the instances and so on and so forth.

Some time later, I rechecked the error message and decided to take a look at the UAA properties in the mta.yaml.

Lo and behold, there was one tiny setting which I think came from the template I used:

If the property existing_destination_policy is set to ignore, the deployment will not overwrite the old properties with new values. It has to be set to update in order to set new values.

More Information can be found here: https://help.sap.com/docs/connectivity/sap-btp-connectivity-cf/create-destinations-using-mta-descriptor

So in conclusion: If you ever want to change something, make sure the changes are applied to the target.

Integrate app into Work Zone from a different subaccount

2024-01-29T10:26:44.538000+01:00

I'm Julian Kuipers, a Full Stack SAP Developer in The Netherlands, currently working with a company called INNOV8iON. We focus on creating new and better ways to use SAP.

Introduction

Not long ago, I was given a task that looked easy at first but turned out to be quite a puzzle. My job was to integrate a custom Fiori application, which has its own standalone approuter, into SAP Build Work Zone, standard edition. The tricky part was that the Fiori app and the SAP Build Work Zone were in different subaccounts, which made things more complicated.

To figure out how to do this, I first looked at the official SAP instructions, which you can find here: SAP Help Portal. These instructions are pretty good, but I found they didn't cover everything I needed to know.

So, I came up with my own plan to make it work:

Turn on something called allowListService in the Fiori app: This is like saying, "It's okay for this app to be used in the SAP Build Work Zone."
Use whitelistService in the standalone approuter: This makes sure the router activates the whitelist-service.
Add specific user-provided variables to the app: This will add Work Zone as trusted URI to embed this app as an iFrame.
Make a trusted connection in the subaccount for the app: This is like making sure the app has a secure line to talk on.

I also learned a couple of important tips along the way:

SAP says it's best if the app and the Work Zone use the same custom domain. This makes a lot of the setup simpler because you don't have to do extra steps to make them work together.
The way I made it possible for users to log in isn't the fanciest solution, but it works well if you're only using one IDP (Identity Provider).
This project really made me think and helped me learn a lot about how SAP works and how to make different parts of it work together. I wanted to share what I learned so others who might be trying to do the same thing can find it a bit easier.

Solution

Following the steps outlined in the SAP Documentation, along with the additional instructions I’ll provide, will ensure a smooth integration process for your custom Fiori application into SAP Build Work Zone. Let's break down these steps for clarity and implementation ease:

1. Activate the allowListService in the Custom Fiori App

To activate the allowlist service in your application, you'll need to insert a specific script before the sap-ui-bootstrap code in your HTML file. This script configures the allowlist service, enabling the application to determine if it's allowed to run within a given frame. Here's the code snippet you should place:

<script> 
    window["sap-ui-config"] = { 
        allowlistService: '/allowlist/service', 
        frameOptions: 'trusted', 
        frameOptionsConfig: { 
            callback: function (bSuccess) { 
	        if (bSuccess) { 
	            console.log("App is allowed to run!"); 
	        } else { 
	            console.error("App is not allowed to run!"); 
	        } 
            } 
        } 
    }; 
</script>

index.html

This snippet ensures your application checks if it's permitted to run, based on the allowlist service configuration. For further details, visit the SAPUI5 SDK Documentation.

2. Activate the whitelistService in the Standalone Approuter

In your standalone approuter configuration, add the following segment to activate the whitelistService, pointing to the allowlist service endpoint:

"whitelistService": { 
    "endpoint": "/allowlist/service" 
}

xs-app.json

This configuration enables your approuter to utilize the whitelist service, ensuring it recognizes and permits communications from your Fiori application. For comprehensive instructions, refer to the SAP Documentation.

3. Add User-Provided Variables to the Application

To allow the SAP Work Zone to embed your application in an iFrame securely, you must specify certain variables and HTTP headers. This involves declaring a whitelist of origins that are permitted to frame your content without risking click-jacking attacks. Here's how you configure it:

properties:
    CJ_PROTECT_WHITELIST: '[{"host":"<WORKZONE_RUNTIME_HOST>"},{"host":"<WORKZONE_RUNTIME_HOST_CUSTOM_DOMAIN>"}]'
      httpHeaders:
        - X-Frame-Options: ALLOW-FROM <WORKZONE_RUNTIME_HOST_CUSTOM_DOMAIN> <WORKZONE_RUNTIME_HOST>
        - Content-Security-Policy: frame-ancestors <WORKZONE_RUNTIME_HOST_CUSTOM_DOMAIN> <WORKZONE_RUNTIME_HOST>

mta.yaml

This configuration ensures that your application can only be framed by the SAP Work Zone, enhancing security and compliance with SAP's guidelines. More details on these settings can be found in the SAP Developer Guide.

4. Adding Work Zone Host as a Trusted Domain

The last piece of our integration puzzle is to ensure that the Work Zone runtime host is recognized as a trusted domain by the XSUAA service of the Fiori app. This step is vital for embedding the app securely within the SAP Build Work Zone environment, ensuring that authorization and authentication flows are handled correctly without compromising security.

To accomplish this, you'll need to follow the guidelines outlined by SAP for configuring trusted domains specifically for the SAP Authorization and Trust Management service. The detailed steps for this configuration can be found in the SAP documentation: Configure Trusted Domains for SAP Authorization and Trust Management Service. This resource provides a comprehensive guide on how to add your Work Zone host as a trusted domain, ensuring that your custom Fiori app can be securely embedded and accessed within the SAP Build Work Zone.

Implementing these steps will facilitate the integration of your custom Fiori application with SAP Build Work Zone, ensuring both functionality and security are maintained.

Conclusion

As I've journeyed through the process of integrating a custom Fiori application into SAP Build Work Zone, it's clear that while the steps are straightforward once understood, there's a particular aspect of this integration that merits a closer look—the propagation of user login information, especially in contexts where multiple Identity Providers (IDPs) are involved.

This workaround is okay for now if you're just dealing with one IDP. It's not the slickest solution, but it does the job. However, if you're trying to make things work with several IDPs, that's where it gets trickier. If you're stuck in this spot, I found a blog that might just be your lifesaver. It's all about figuring out SAP Cloud Identity Services and making them work with SAP Build Work Zone when you've got multiple IDPs. Check it out right here: De-mystifying SAP Cloud Identity Services Integration.

Now for some good news—SAP's got our backs and is working on making this whole process a lot easier. They've hinted at some new improvements that are on the way, which you can sneak a peek at in their roadmap right here. I'm all in for seeing how they're going to make our lives simpler in the near future.

So, as we wrap this up, I just want to say it's been quite the ride figuring out all these SAP integration quirks. The thought of SAP making things smoother down the road is something I'm really looking forward to. In the meantime, we've got our workarounds and the helpful tips we've shared along the way.

Thanks for sticking with me through this journey. Here's to making things work and looking forward to easier days ahead!

Kind regards,

Julian Kuipers

Automating Advanced Event Mesh Broker Creation

2024-02-08T09:07:53.387000+01:00

Introduction

The need to reduce costs associated with operating and maintaining an active message broker led to the creation of a tool that automates the generation and configuration any time the need for asynchronous event-based messages arises.

This article will showcase a method of creating an event broker in Advanced Event Mesh by leveraging the REST endpoints provided by Solace and SEMP configuration. The solution will allow the system to request a broker creation, monitor the status, re-generate the queues and topics and extract the endpoints for sending or receiving data. Besides that, a UI has been set up that simplifies the broker configuration and allows users to persist or modify configurations.

Scenario Overview

All the necessary steps for broker creation are done in SAP Integration Suite using multiple iFlow artifacts for each process step, JMS Queues for handling connection errors, timeouts and message routing, Datastore for saving broker configurations and a main page that acts as a user interface for setting up everything.

Architecture Overview

Picture 1 - Architecture Overview

UI Configuration Page

Picture 2 - UI Configuration Page

The configuration page is a HTML page exposed as a REST endpoint, containing multiple sections that allow the user to generate new configurations, use existing ones and even check the status of the already-deployed broker creation jobs.

Picture 3 - Deployment Page

On this page, we can see the status of the active or pending brokers on the cluster. I also added the ability to delete the broker on demand.

Technical Setup

The process of creating an event broker has been detailed in the Managing Services with the SAP Integration Suite, Advanced Event Mesh REST API section and it consists of several REST calls in order to create a broker, get the connection details and check the creation status.

The most important parameters that allow us to continue with the next steps are :

serviceId - the id of the service cluster generated
msgVpnName - the internal id of the broker
defaultManagementHostname - the hostname that will be used for queue, topic and rest delivery point creation

In order to create an event broker :

HTTP POST https://api.solace.cloud/api/v0/services

{
   "name": "Broker Name",
   "datacenterId": "<Data Center Id>",
   "serviceClassId":"developer",
   "serviceTypeId": "developer",
   "adminState": "start"
}

The authentication for this endpoint is made via an authorization token generated in the Cluster Manager.

Picture 4 - API Token Management

In order to create a queue object :

HTTP POST https://<defaultManagementHostname>/SEMP/v2/config/msgVpns/<msgVpnId>/queues

{
"accessType": "exclusive",
"egressEnabled": true,
"ingressEnabled": true,
"msgVpnName": "<msgVpnId>",
"owner": "all",
"permission": "consume",
"queueName": "<queue-name>"
}

In order to create a topic subscription object :

HTTP POST https://<defaultManagementHostname>/SEMP/v2/config/msgVpns/<msgVpnId>/queues/<queue-name>/subscriptions

{
"msgVpnName": "<msgVpnId>",
"queueName": "<queue-name>",
"subscriptionTopic": "<topic/name>"
}

In order to create a rest delivery point object :

HTTP POST https://<defaultManagementHostname>/SEMP/v2/config/msgVpns/<msgVpnId>/restDeliveryPoints

{
    "clientProfileName": "default",
    "enabled": true,
    "msgVpnName": "<msgVpnNameId>",
    "restDeliveryPointName": "<restDeliveryPointId>"
}

If everything is correctly triggered, we should be able to see in the Cluster Manager our newly created broker, and as well in the broker console the queues and topics.

Picture 5 - Cluster Manager

Picture 6 - Queues

Picture 7 - Topics subscribed to a queue

Adapter for inserting/consuming events

By using the recently published adapter for Advanced Event Mesh integrations, we can insert and consume events from our brokers. Below is a sample iFlow artifact that connects to a specific topic and consumes messages from there.

Picture 8 - iFlow artifact for topic message consumption

Conclusions

Using the SAP Help documentation was the key behind the success, because the product is rather new on the market and we did not really heard of other use cases yet. By following the steps we were able to easily connect two Business Technology Platform products and we were able to leverage event-based integration far more powerful than the traditional SAP Event Mesh.

For any questions or suggestions, feel free to post here or in the special Q&A Section.

Thank you!

CSRF Token Validation Error

2024-03-15T07:00:20.587000+01:00

Hello fellow developers,

recently we ran into an issue which we gave us a very hard time.

Scenario

A UI5 application runs in the #SAP Workzone Standard Edition# and uses the SAP Managed Approuter to connect to the workflow runtime servie as well as a backend SAP Gateway destination with principal propagation.
Everything worked fine in regards to the workflow requests as well as the GET requests to the Gateway system. What did not work were any requests that required a valid CSRF Token, like POST or UPDATE.
The app did sent requests with a valid CSRF token to the backend, but the system refused to accept it.

The app worked like this: When it is opened with a certain URL, the app loads some information from the workflow runtime and needs a CSRF token for this. The xs-app.json looked like this:

You can see the route for the workflow runtime as well as the SAP Gateway System and its destination. It was set up just like you would expect to find this on any tutorial.

Solution

We had to set the csrfProtection to false for the SAP Gateway destination.

With this settings the csrf token for the ODataModel was then issued by the SAP Gateway.

Consuming SAP with SAP Build Apps - Web App in SAP Build Work Zone, standard edition

2024-05-02T03:19:46.516000+02:00

This blog post is the fourth in a series of posts that cover the connectivity options available for SAP Build Apps to interface with SAP systems. The series will cover connecting SAP Build Apps with the following:

CAP-based services
S/4HANA systems
ABAP systems

The format of this post is similar to a tutorial. However, I'll provide more comprehensive details, tips and the opportunity for you to provide feedback. Based on the feedback we will be able to adjust and enhance this post and future parts of the series, and might even be able to improve the products involved as well.

Introduction

Before we get into the details of setting up connections between SAP Build Apps and SAP Systems, I intend to introduce a couple of SAP technology components in each post that are relevant for the use cases covered in the series.

SAP Build Work Zone

SAP Build Work Zone is a digital workplace experience that enables users to build and customise business sites that provide centralised access to business application information from any device.

Key capabilities are:

Quickly create corporate websites providing secure and central access for apps, tasks, notifications, information and communication.
Easily connect with SAP and third-party enterprise applications.
Provide a personalised and role-based user experience.
Provide an extensible framework for development, customisation and branding.

The service is currently available in 2 editions:

Standard edition - this is basically the same as what we previously called the SAP Launchpad service. This is the edition we will use in this blog post. It has a strong focus on integration of business applications.
Advanced edition - this is what we previously referred to as the SAP Work Zone service. It includes additional capabilities on top of what is available in the standard edition. The information in this blog post can be applied in this edition as well. You typically subscribe to only one edition. The advanced edition adds capabilities around workspaces, knowledge management and user engagement.

MTAR

A multitarget application (MTA) is comprised of multiple parts (also referred to as "modules"), created with different technologies and deployed to different targets, but with a single, common lifecycle.

A multitarget application archive (MTAR) is an archive that contains a deployment descriptor, configuration files, and module and resource binaries. The archive follows the JAR file specification. A JAR file is essentially a zip file that contains an optional META-INF directory.

An example relevant for the use cases in this blog series is an MTAR created in SAP Build Code that contains the Destination, a node.js based CAP service, and a HANA database deployment application for setting up the persistency layer. All are deployed during a single deployment action, for a specific version of the archive.

Use case D : Consume the CAP service with a web app provided in SAP Build Work Zone

For this use case, we will make use of the previously created basic CAP service in SAP Build Code. In the previous blog post, we have created dedicated mobile apps for the iOS and Android platforms to consume this service with SAP Build Apps. We will now use the exact same UI application to build and deploy a web application to SAP Business Technology Platform. After that, we will configure SAP Build Work Zone to provide access to the application.

Solution diagram

Like in the previous blog post, we will start with a quick look into what needs to change in our solution overview to accommodate for web apps. Building upon the solution diagram created earlier, we now add SAP Build Work Zone, standard edition. The design time environment of SAP Build Apps will deploy the web application to the HTML5 Application Repository service. The application is made available to end users through SAP Build Work Zone, which is configured separately. End users can access the web app from any device. The web app authenticates with the Identity Authentication service (IAS) and accesses data via a Destination. Only users who have the correct Roles assigned will be able to access the data provided in the CAP-based data service.

Building the web app in SAP Build Apps

As the application we have developed so far is actually a cross-platform app, we don't need to change anything in the app itself. We simply need to build it for a different runtime. And for this, we will again make use of the cloud build service we have utilised in the previous blog post.

Starting in SAP Build Apps, navigate to the Launch tab and select Open build service.

Next, select CONFIGURE for the Web App.

For the Bundle Settings, select MTAR and click NEXT.

In the Image Assets tab, upload a 32 x 32 pixel icon image (PNG file) for the Favicon and click NEXT.

On the Plugins tab, you can add React Native plugins for your app. For our app you can see a few plugins have been selected by default, based on the functionality we have already added in the app. We can use the default selection in this case and click NEXT.

Now that we have completed configuring the web app build settings, select BUILD.

Select MTAR and the Client runtime version. Provide a version number for your application. Select BUILD.

Once the build is done, you will be able to download the MTAR file, or simply deploy the MTAR.

Select DEPLOY MTA.

Select the Cloud Foundry API endpoint of your target subaccount. In our case, we will use the same subaccount as the one we have set up in the first blog post of this series.

Once you've selected your target Cloud Foundry organisation and space, select DEPLOY MTA TO <your space name>

The deployment process will start and your web application will be deployed to the HTML5 Application Repository Service. You can track the progress in the logs.

Once the deployment finishes, the URL to your application will be shown.

When you try to open the URL, you are quite likely greeted with the message "Internal Server Error". Looking into details in your browser's developer tools, you can find a response code 500. This indicates something has not been set up correctly (yet). Not to worry ... we'll fix this in the following steps.

If your subaccount was correctly configured, then you should actually see the web app.

Provide access to the web app in SAP Build Work Zone

We are now going configure SAP Build Work Zone. There are multiple ways to access this. In the context of SAP Build, we can start from the SAP Build landing page. On the landing page, select the Create button.

What would you like to do ? Well, we'd like to Build a Business Site !

Select Configure Site in Admin Console.

Note that in the screenshot below the tile "Manage Workspages and Workspaces" is marked as 'Not Subscribed'. This is because I am using the standard edition of SAP Build Work Zone, which was subscribed through the "Get started with SAP Build Apps" booster. If you have a subscription to the Advanced Edition, then this tile can be selected as well.

Alternatively, if you are not using SAP Build, you can configure SAP Build Work Zone by opening the link in your subaccount's cockpit.

As prerequisite, please check whether your user has the Role Launchpad_Admin assigned.

Once configured (and you might need to log out & log in to activate that Role), navigate to the subscriptions and open the link to SAP Build Work Zone, standard edition.

SAP Build Work Zone configuration

Now, let's set up a business site that includes our app. Select Create Site.

Provide a name for the Site and click Create.

Navigate to the Content Manager tab and select the Content Explorer button.

The Content Explorer will open.

Click on HTML5 Apps to see which apps have been deployed to the HTML5 Application Repository. You will see the app we've created in SAP Builds Apps. Besides that, you will also notice the Launchpad for the products service we've deployed from SAP Build Code. Select the app created and deployed with SAP Build Apps and click the Add button.

Going back to the Content Manager, select the Create button and create a new group. Give the group a name and assign the previously added app to the group.

Go back to the Content Manager and select the Everyone Role. Enable the previously selected app to be accessible for everyone. Note that this will give users access to the web app itself. Access to the data service is still limited to those having the Role we have configured in the second blog post of this series.

Resolving the "Internal Server Error"

And now for the previously mentioned 500 response code, resulting in "Internal Server Error". This happens when the authentication mechanism for SAP Build Work Zone and SAP Cloud Portal service uses XSUAA, while your subaccount is actually configured to use a custom IdP (IAS). To switch to Identity Authentication, navigate to the Settings, select the Identity Authentication tab and click Enable (please read the notes before doing this, and confirm that you've completed the required trust configuration).

Accessing the web app in SAP Build Work Zone

The link to the site can be found on the Site Directory.

Depending on how you've configured your site in SAP Build Work Zone, it might look a bit different. But you should have the tile of your app visible on your site.

Clicking on the tile will open our web app. Notice the SAP BTP authentication happening before opening the app. Also note that you can open the URL on any device; on mobile as well as desktop devices.

In case you are wondering where the icon ended up: check your web browser's tab.

Alternatively, you can also open the URL provided in SAP Build Apps, or find a link to your app in your subaccount, under the tab HTML5 Applications.

Summary – use case D

In this use case we have built and deployed our cross-platform app as a web app to SAP BTP. Building and deploying the app in the cloud is easy, as you don't need to install any tools on your local development machine.

SAP Build Apps deploys the application to the HTML5 Application Repository service. Using the web app, end users authenticate with IAS. Only users who have the correct Role assigned will be able to access the data provided in the CAP-based data service, which we can access through the BTP Destination.

Access to the app requires configuration of the Identity Authentication in the subaccount.

We have set up a simple business site in SAP Build Work Zone, to provide end-users easy access to the app.

And again, all the above was done without writing a single line of code.

What's next

In the next blog post, we will continue on the connectivity topic and connect to an S/4HANA system.

Displaying Customer Location with Custom HTML Builder Using RESTful Webservice and API

2024-06-26T18:14:28.616000+02:00

Hello All,

In this Blog I would like Exhibit a Scenario Where the RESTful webservice is used to Display SAP Data using MAPS API. In this Blog, Displaying the Location of SAP Entity like Plant, Distribution Center, Warehouse, Vendor Location on Google Maps.

We need to Fetch Latitude and Longitude (Geo Coordinates) information for the given entities and then further we need to pass Geo Coordinates to the Google Map API in an HTML Block, Here I would pass Route as parameter in the URL then will retrieve customer location and display them on Google Map.

API

While working with Google Maps API, I’ll be passing locations as Addresses or Co-Ordinates. I need to specify the start of address and end of address. If you have Stopover in between you can also define them as Waypoints. I will pass all the details to the API, and it will process all the rest.

To Use Google Product API, I need to get an API Key. This API key is free up to certain usage Limit. If we go Beyond, we need to pay for licensing. We can Object an API Key ourselves Obtaining Google Maps API Key

To Learn More about Google Maps API and Geo Coordinates, we can look up Google Maps JS API

RESTful WS

I Would use RESTful Web Service to Expose our data. I Will Build up the response message in HTML containing the JavaScript. The JavaScript code will call Google Maps API with Selected Geo Co-Ordinates.

Within the Handler Method for the RESTful WS,

Extract the parameter from URL

Get the Data or Prepare the Data

Build Up JavaScript and HTML Code

Send the Response

For this Scenario I will create a Service ZAL_DEMO in Transaction code SICF and assigned a Handler Class ZCL_AL_DEMO_HANDLER within it and a Standard Interface IF_HTTP_EXTENSION to Handle the HTTP.

First Step I will Navigate to Transaction SICF

After Navigating to Transaction SICF we can see the screen Define Service as below, then we need to click on Execute Button

We can Create a New Node whenever we are creating RESTful WS as we can create different services under that Node. We shouldn’t Use default_host/sap/bc/srt as it required to have SOAMANAGER Configuration, which I will be not using for our Service.

So, I will place the cursor on desired node and Click on Drop Down

Default_host--->sap--->bc--->ZAL_DEMO

I will Right click on “bc” and create a Sub-Element, Further I will Enter the name of the Service in Next Popup. In the subsequent screen I’ll provide the Description.

Next, I’ll Provide the Necessary Credentials in Logon Data Tab like Description, Client which I’ll be working on, User ID and Password.

In the Handler Tab I’ll assign a custom class which would be used to handle the request coming from the web. This class should Implement the standard Interface IF_HTTP_EXTENSION and to gain access of the request and also required method.

Now I’ll add the Interface IF_HTTP_EXTENSION in my Handler class and Implement the Method.

HTML Build

For HTML Body we can load our template in Transaction SMW0

But I Have chose to Manually Build Utility HTML class within ABAP. This utility wraps the logic for building HTML Tags and string manipulation within itself for simple client access.

---> Template with Static Data = like Main CSS, Headers, Table Headers

---> Place Holders for Dynamic Data = Table Details

CREATE ELEMNT – Create any HTML element, Here I need to pass HTML Tag as Parameter. This should be the very first to get called after object Instantiation.

ADD_ATT – Add Attribute to a HTML Tag like CSS class, style, ID

ADD_INNER_HTML – Add Inner HTML to the Tag, Here I’ll specify the HTML Content which is visible on the Document like text of link on Tag

APPEND_CHILD – Append HTML object to parent HTML object like creating a <P> Tag within <DIV> Tag

GET_HTML – This Method will return the HTML Text. Method Traverse through all child Nodes of any Given Node. Method is based on Composite Design Pattern, So I need to call this method for my Parent or Root Node If I need to get any specific HTML, I can call it for any Node.

I Will create 3 Private Attributes which can be accessed through above methods.

TAG – This can contain type of the tag like <DIV> which is set by CREATE_ELEMNT.

INNER_HTML – This contains the Visible text of the HTML Tag set by ADD_INNER_HTML

ATTR – Table containing pair of with name of attribute and a value

CHILDREN – Table Containing all Child Nodes for a given node.

Now I’ll Create a Global Class with the Above Methods and Attributes.

METHODS

ATTRIBUTES

METHOD IMPLEMENTATION

Preference in Local Class

CLASS lcl_html DEFINITION.
  PUBLIC SECTION.
   METHODS : create_elemnt IMPORTING tag TYPE string,
             add_att IMPORTING attr TYPE string
                                     val TYPE string,
             add_inner_html IMPORTING val TYPE string,
             append_child IMPORTING io_tag TYPE REF TO lcl_html,
             get_html RETURNING VALUE(rv_string) TYPE string.

  PRIVATE SECTION.
   DATA : tag TYPE string.
   DATA : inner_html TYPE string.
   TYPES : BEGIN OF ty_attr,
           attr TYPE string,
           val  TYPE string,
           END OF ty_attr.
   DATA : attrs TYPE STANDARD TABLE OF ty_attr.
   DATA : children TYPE STANDARD TABLE OF REF TO lcl_html.

ENDCLASS.

CLASS lcl_html IMPLEMENTATION.

METHOD create_elemnt.
  me->tag = tag.
ENDMETHOD.

METHOD append_child.
  APPEND io_tag TO me->children.
ENDMETHOD.

METHOD add_att.
  DATA : ls_attr LIKE LINE OF me->attrs.

  ls_attr-attr = attr.
  ls_attr-val = val.

  APPEND ls_attr TO me->attrs.
ENDMETHOD.

METHOD add_inner_html.
  me->inner_html = val.
ENDMETHOD.

METHOD get_html.
  DATA : lv_string TYPE string.
  DATA : lv_attr_val TYPE string.
  DATA : ls_attr LIKE LINE OF me->attrs.
  DATA : lo_child TYPE REF TO lcl_html.
  DATA : lv_child_html TYPE string.

*opening bracket

    lv_string = |<{ me->tag }|.

  LOOP AT me->attrs INTO ls_attr.

    lv_attr_val = |{ ls_attr-attr }='{ ls_attr-val }'|.

    lv_string = |{ lv_string } { lv_attr_val }|.

  ENDLOOP.

    lv_string = |{ lv_string }>|.

*Inner HTML

    lv_string = |{ lv_string }{ me->inner_html }|.

*Child

  LOOP AT me->children INTO lo_child.
    lv_child_html = lo_child->get_html( ).
    lv_string = |{ lv_string }{ lv_child_html }|.
    CLEAR lv_child_html.
  ENDLOOP.

*Closing
     lv_string = |{ lv_string }</{ me->tag }>|.

*Back the HTML

     rv_string = lv_string.

ENDMETHOD.

ENDCLASS.

IMPLEMENTATION

In this Implementation part I'll Use the HTML Builder Class in IF_HTTP_EXTENSION~HANDLE_REQUEST Method of my Handler Class ZCL_AL_DEMO_HANDLER.

DATA:
  lv_path TYPE STRING,
  lv_cdata TYPE STRING,
  lv_param TYPE STRING.

  DATA: lt_request TYPE STANDARD TABLE OF STRING.
  DATA: lv_route TYPE char10.

* get the request attributes
  lv_path = server->request->get_header_field( NAME = '~path_info' ).
  SHIFT lv_path LEFT BY 1 PLACES.
  SPLIT lv_path AT '/' INTO TABLE lt_request.
  READ TABLE lt_request INTO lv_param INDEX 1.

* Get Customer associated to ROute
* Get Geo Codes for those customers
  TYPES: BEGIN OF lty_geo,
           kunnr TYPE kna1-kunnr,
           lon   TYPE STRING,
           lat   TYPE STRING,
         END   OF lty_geo.
  DATA: li_geo TYPE STANDARD TABLE OF lty_geo.
  DATA: lwa_geo LIKE LINE OF li_geo.

*  DEFINE append_data.
*    lwa_geo-kunnr = &1.
*    lwa_geo-lon = &2.
*    lwa_geo-lat = &3.
*    APPEND lwa_geo TO li_geo.
*  END-OF-DEFINITION.
*
*  append_data: '1001' '33.042342' '-96.768866',
*               '1002' '33.057954' '-96.772127',
*               '1003' '33.060364' '-96.796782',
*               '1004' '33.030794' '-96.795516',
*               '1005' '33.027699' '-96.790152',
*               '1006' '33.027771' '-96.768866'.

  li_geo = value #( ( kunnr = '1001' lon = '33.042342' lat = '-96.768866' )
                    ( kunnr = '1002' lon = '33.057954' lat = '-96.772127' )
                    ( kunnr = '1003' lon = '33.060364' lat = '-96.796782' )
                    ( kunnr = '1004' lon = '33.030794' lat = '-96.795516' )
                    ( kunnr = '1005' lon = '33.027699' lat = '-96.790152' )
                    ( kunnr = '1006' lon = '33.027771' lat = '-96.768866' ) ).

* Build up JavaScript
  DATA: lv_tot  TYPE i.
  DATA: lv_from TYPE i.
  DATA: lv_to   TYPE i.
  DATA: lv_start TYPE STRING.
  DATA: lv_end   TYPE STRING.
  DATA: lv_wp     TYPE STRING,
        lv_pair   TYPE STRING,
        lv_iw     TYPE STRING.

  lv_tot = LINES( li_geo ).
  IF lv_tot GT 2.
    lv_from = 2.
    lv_to   = lv_tot - 1.
  ENDIF.

* start / end point
  READ TABLE li_geo INTO lwa_geo INDEX 1.
  CONCATENATE 'var startpoint = new google.maps.LatLng('
    lwa_geo-lon ',' lwa_geo-lat ');' INTO lv_start.
* Info window
  lv_iw = 'var infoWindow;'.
  CONCATENATE
    '    infoWindow = new google.maps.InfoWindow();'
    '    infoWindow.setOptions({'
    '        content: "<div>First Customer to Visit :' lwa_geo-kunnr '</div>",'
    '        position: startpoint,'
    '    });'
    '    infoWindow.open(map); '
    INTO lv_iw.

  READ TABLE li_geo INTO lwa_geo INDEX lv_tot.
  CONCATENATE 'var endpoint = new google.maps.LatLng('
    lwa_geo-lon ',' lwa_geo-lat ');' INTO lv_end.
  CONCATENATE
    lv_iw
    '    infoWindow = new google.maps.InfoWindow();'
    '    infoWindow.setOptions({'
    '        content: "<div>Last Customer : ' lwa_geo-kunnr '</div>",'
    '        position: endpoint,'
    '    });'
    '    infoWindow.open(map); '
    INTO lv_iw.

* Way points
  LOOP AT li_geo INTO lwa_geo FROM lv_from TO lv_to.
    CONCATENATE `location:"` lwa_geo-lon `,` lwa_geo-lat `",`
      INTO lv_pair.
    CONCATENATE
      lv_wp
      ' waypts.push({'
*      '   location:"33.077842,-96.820428&#8243;,'
      lv_pair
      '   stopover:true'
      ' });'
      INTO lv_wp SEPARATED BY cl_abap_char_utilities=>cr_lf.
  ENDLOOP.

  DATA: lv_js TYPE STRING.
  CONCATENATE
    '<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />'
    '<style type="text/css">'
    '  html { height: 100% }'
    '  body { height: 100%; margin: 0; padding: 0 }'
    '  #map_canvas { height: 100% }'
    '</style>'
    '<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>'
    '<script'
    ' src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">'
    '</script>'
    '<script type="text/javascript">'
    'var directionsDisplay;'
    'var directionsService = new google.maps.DirectionsService();'
    'var map;'
    lv_start
    lv_end
    'function initialize() {'
    ' directionsDisplay = new google.maps.DirectionsRenderer();'
    ' var myOptions = {'
    '   zoom: 16,'
    '   mapTypeId: google.maps.MapTypeId.ROADMAP,'
    '   center: startpoint'
    ' }'
    ' map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);'
    ' directionsDisplay.setMap(map);    '
    ' var waypts = [];'
*    ' waypts.push({'
*    '   location:"33.077842,-96.820428",'
*    '   stopover:true'
*    ' });'
    lv_wp
    ' console.log(waypts);'
    ' var request = {'
    '   origin:startpoint,'
    '     destination:endpoint,'
    '   waypoints: waypts,'
    '   optimizeWaypoints: true,'
    '   travelMode: google.maps.TravelMode.DRIVING'
    ' };    '
    ' directionsService.route(request, function(result, status) {'
    '   if (status == google.maps.DirectionsStatus.OK) {'
    '     directionsDisplay.setDirections(result);'
    '   }'
    ' }); '
    lv_iw
*    '    var infoWindow = new google.maps.InfoWindow();'
*    '    infoWindow.setOptions({'
*    '        content: "<div></div>",'
*    '        position: startpoint,'
*    '    });'
*    '    infoWindow.open(map); '
    '}'
    '</script>'
    INTO lv_js SEPARATED BY cl_abap_char_utilities=>cr_lf.

* Body HTML
  DATA: lv_body TYPE STRING.
  DATA: lv_html TYPE STRING.

  DATA: lo_body  TYPE REF TO zcl_html.
  DATA: lo_table TYPE REF TO zcl_html.
  DATA: lo_thead TYPE REF TO zcl_html.
  DATA: lo_tbody TYPE REF TO zcl_html.
  DATA: lo_tr    TYPE REF TO zcl_html.
  DATA: lo_td    TYPE REF TO zcl_html.
  DATA: lo_tag   TYPE REF TO zcl_html.
  data: lo_button TYPE REF TO zcl_html.
  DATA: lv_val TYPE STRING.

  CONCATENATE '<html>'
              '<head><title>Route Map</title>'
              '<style>body{ font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; }</style>'
              INTO lv_html.

 CREATE OBJECT lo_body.
  lo_body->create_elemnt( 'body' ).
  lo_body->add_att( attr = 'onload' val = 'initialize()' ).

  CREATE OBJECT lo_tag.
  lo_tag->create_elemnt( 'h3' ).
  lo_tag->add_inner_html( 'Generated Route Map from SAP' ).
  lo_body->append_child( lo_tag ).

  CONCATENATE 'Route:' lv_route INTO lv_val SEPARATED BY SPACE.
  CREATE OBJECT lo_tag.
  lo_tag->create_elemnt( 'p' ).
  lo_tag->add_inner_html( lv_val ).
  lo_body->append_child( lo_tag ).

  CREATE OBJECT lo_table.
  lo_table->create_elemnt( 'table' ).
  lo_table->add_att( attr = 'style' val = 'float:left' ).
  lo_body->append_child( lo_table ).

  CREATE OBJECT lo_thead.
  lo_thead->create_elemnt( 'thead' ).
  lo_table->append_child( lo_thead ).

  CREATE OBJECT lo_tr.
  lo_tr->create_elemnt( 'tr' ).
  lo_thead->append_child( lo_tr ).

  CREATE OBJECT lo_td.
  lo_td->create_elemnt( 'td' ).
  lo_td->add_inner_html( 'Customer' ).
  lo_tr->append_child( lo_td ).

  CREATE OBJECT lo_td.
  lo_td->create_elemnt( 'td' ).
  lo_td->add_inner_html( 'Long' ).
  lo_tr->append_child( lo_td ).

  CREATE OBJECT lo_td.
  lo_td->create_elemnt( 'td' ).
  lo_td->add_inner_html( 'Lat' ).
  lo_tr->append_child( lo_td ).

  CREATE OBJECT lo_tbody.
  lo_tbody->create_elemnt( 'tbody' ).
  lo_table->append_child( lo_tbody ).

  LOOP AT li_geo INTO lwa_geo.
    CREATE OBJECT lo_tr.
    lo_tr->create_elemnt( 'tr' ).
    lo_tbody->append_child( lo_tr ).

    lv_val = lwa_geo-kunnr.
    CREATE OBJECT lo_td.
    lo_td->create_elemnt( 'td' ).
    lo_td->add_inner_html( lv_val ).
    lo_tr->append_child( lo_td ).

    lv_val = lwa_geo-lon.
    CREATE OBJECT lo_td.
    lo_td->create_elemnt( 'td' ).
    lo_td->add_inner_html( lv_val ).
    lo_tr->append_child( lo_td ).

    lv_val = lwa_geo-lat.
    CREATE OBJECT lo_td.
    lo_td->create_elemnt( 'td' ).
    lo_td->add_inner_html( lv_val ).
    lo_tr->append_child( lo_td ).
  ENDLOOP.

  CREATE OBJECT lo_tag.
  lo_tag->create_elemnt( 'div' ).
  lo_tag->add_att( attr = 'id' val = 'map_canvas' ).
  lo_tag->add_att( attr = 'style' val = 'width: 100%, height: 100%' ).
  lo_body->append_child( lo_tag ).

  lv_body = lo_body->get_html( ).

  CONCATENATE lv_html lv_js '</head>' lv_body INTO lv_html.

  lv_cdata = lv_html.

* Send the response back
  server->response->set_cdata( DATA = lv_cdata ).

Now I’ll Use this ZCL_AL_DEMO_HANDLER Class in my Service in the Tab Handler List which was created in Transaction SICF.

OUTPUT

For the Output Firstly, we should activate the service and then we can Execute URL or Test the Service which generates Nice Representation on Google Map.

SAP GUI HTML / Browser control use F12 Development tools

2024-08-21T08:42:08.278000+02:00

How to get the F12 browser dev tools open for SAP GUI HTML Browser control?

Works for SAP GUI HTML / Browser control via Edge (based on Chromium) so WebView2.

Create these Win Registry Keys either manual

Path: Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments

Name: saplogon.exe
Value "--auto-open-devtools-for-tabs"

or via admin powershell

New-Item 'HKCU:\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments' -Force | `
 New-ItemProperty -Name saplogon.exe -Value "--auto-open-devtools-for-tabs" -Force

I needed it to debug some cookie issue.

btw the user dir and cookies folder is here:

"C:\Users\tsoadmin\AppData\Local\SAP\SAP GUI\EdgeUserData\EdgeUserDataSystemAware\EBWebView\Default\Network\Cookies" (SQL lite DB) but chrome has exclusive lock on the file so can't be read while open.

Here the full cmd of a running WebView2 instance.

"C:\Program Files (x86)\Microsoft\EdgeWebView\Application\127.0.2651.105\msedgewebview2.exe" --embedded-browser-webview=1 --webview-exe-name=saplogon.exe --webview-exe-version="800 Final Release - 64bit" --user-data-dir="C:\Users\tsoadmin\AppData\Local\SAP\SAP GUI\EdgeUserData\EdgeUserDataSystemAware\EBWebView" --noerrdialogs --embedded-browser-webview-dpi-awareness=1 --edge-webview-custom-scheme=sap-cust,1,1,sapevent,1,1,saphtmlp,1,1,sapr3,1,1 --enable-features=MojoIpcz,msSingleSignOnOSForPrimaryAccountIsShared --mojo-named-platform-channel-pipe=9484.10484.18364521422129778599

"C:\Program Files (x86)\Microsoft\EdgeWebView\Application\127.0.2651.105\msedgewebview2.exe" --type=renderer --noerrdialogs --user-data-dir="C:\Users\tsoadmin\AppData\Local\SAP\SAP GUI\EdgeUserData\EdgeUserDataSystemAware\EBWebView" --webview-exe-name=saplogon.exe --webview-exe-version="800 Final Release - 64bit" --embedded-browser-webview=1 --embedded-browser-webview-dpi-awareness=1 --edge-webview-custom-scheme=sap-cust,1,1,sapevent,1,1,saphtmlp,1,1,sapr3,1,1 --video-capture-use-gpu-memory-buffer --lang=en-US --device-scale-factor=1 --num-raster-threads=2 --enable-main-frame-before-activation --renderer-client-id=5 --js-flags="--harmony-weak-refs-with-cleanup-some --expose-gc --ms-user-locale=" --time-ticks-at-unix-epoch=-1723655821980318 --launch-time-ticks=529510535327 --field-trial-handle=3568,i,14546398177687338828,8625289174098165138,262144 --enable-features=MojoIpcz,msSingleSignOnOSForPrimaryAccountIsShared --variations-seed-version --mojo-platform-channel-handle=3580 /prefetch:1

here another method [via utility called IEChooser.exe ]

https://community.sap.com/t5/application-development-blog-posts/obscure-productivity-tips-debug-javascript-running-within-sapgui-browser/ba-p/13390663

Example how it looks (for content server document viewer with HTML Control)

example of F12 debug

SAP CAP Lessons Learned: Deploy app on HTML5 Repository

2024-12-30T22:16:54.957000+01:00

Good day fellow CAPpers,

Today I'll share one of the lessons I've learned working with CAP, something that may not be clear in the current tutorials or documentation. It's about deploying the front-end, the UI, of your CAP application in the SAP BTP's HTML5 Repository instead of creating an AppRouter, a separate Cloud Foundry application, for it.

Pre-requisite on BTP:

To display or run HTML5 applications, your BTP SubAccount will need to have one of these services enabled/subscribed:

SAP Build Work Zone, standard edition
SAP Build Work Zone, advanced edition
SAP SuccessFactors Work Zone
SAP Cloud Portal service

I recommend SAP Build Work Zone, standard edition, because it's the simplest to setup. It will be used in this guide.

Assumption about your CAP project:

The guide will assume you have the standard project structure for an MTA application:

/project
 /app
  /my-app
   ...
   package.json
   ui5-deploy.yaml
   ui5.yaml
 /db
 /srv
 package.json
 mta.yaml

Note: the database module is optional.

Considering this, your mta.yaml will require 3 modules:

A module for the app itself, with type: html5 and path: app/my-app
- Each different app will require one of these modules
- It effectively zips the application and stores in the /resources folder
A deployer module with type: com.sap.application.content
- This module can be reused for different apps, but needs a parameter for each app
- It takes the .zip files from /resources folder and sends to the HTML5 Repo
An app-content module with type: com.sap.application.content that will effectively do the setup of the HTML5 Repository
- This module is unique and don't need to be edited if new apps are added.
- It sets up the connection between your app and the HTML5 Repository service and the service bindings

These modules will require 3 resources:

Repo Host: the service for HTML5 Repository Host
Destination: the service that allows your UI (/app) to communicate with the service (/srv)
XSUAA: User Authorization and Authentication. You can make it work without this service, but I wouldn't recommend.

The resulting mta.yaml would look like this:

_schema-version: "3.1"
ID: cap-app-id
description: CAP app with UI on HTML5 Repo
version: 1.0.0

# build parameters added by the generator
parameters:
  deploy_mode: html5-repo
  enable-parallel-deployments: true
build-parameters:
  before-all:
    - builder: custom
      commands:
        - npm install
        - npx cds build --production

modules:
  # srv
  - name: my-srv
    type: nodejs
    path: gen/srv
    build-parameters:
      builder: npm
    parameters:
      buildpack: nodejs_buildpack
      readiness-health-check-http-endpoint: /health
      readiness-health-check-type: http
      routes:
        - route: ${space}-my-srv.${default-domain}
    provides:
      - name: srv-api
        properties:
          srv-url: ${routes/0/route}
    requires:
      - name: my-auth
      - name: my-destination-service

  # app content deployer
  - name: my-deployer
    type: com.sap.application.content
    path: .
    requires:
      - name: my-repo-host
        parameters:
          content-target: true
    build-parameters:
      build-result: resources
      requires:
        - artifacts:
            - my-app.zip
          name: myapp
          target-path: resources/
        - artifacts:
            - my-other-app.zip
          name: myotherapp
          target-path: resources/

  # my app itself
  - name: myapp
    type: html5
    path: app/my-app
    build-parameters:
      build-result: dist
      builder: custom
      commands:
        - npm install
        - npm run build:cf
      supported-platforms:
        []

  # my other app itself
  - name: myotherapp
    type: html5
    path: app/my-other-app
    build-parameters:
      build-result: dist
      builder: custom
      commands:
        - npm install
        - npm run build:cf
      supported-platforms:
        []

  # app html5 repo host
  - name: my-app-content
    type: com.sap.application.content
    build-parameters:
      no-source: true
    requires:
      - name: my-auth
        parameters:
          service-key:
            name: my-auth-key
      - name: my-repo-host
        parameters:
          service-key:
            name: my-repo-host-key
      - name: my-destination-service
        parameters:
          content-target: true
    parameters:
      content:
        instance:
          existing_destinations_policy: update
          destinations:
            - Name: my-repo-host
              ServiceInstanceName: my-html5-srv
              ServiceKeyName: my-repo-host-key
              sap.cloud.service: my.app
            - Name: my-auth
              Authentication: OAuth2UserTokenExchange
              ServiceInstanceName: my-auth
              ServiceKeyName: my-auth-key
              sap.cloud.service: my.app

resources:
  - name: my-repo-host
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-name: my-html5-srv
      service-plan: app-host
  - name: my-destination-service
    type: org.cloudfoundry.managed-service
    requires:
      - name: srv-api
    parameters:
      config:
        HTML5Runtime_enabled: true
        init_data:
          instance:
            destinations:
              - Authentication: NoAuthentication
                Name: ui5
                ProxyType: Internet
                Type: HTTP
                URL: https://ui5.sap.com
              - Name: app-dest # defined in the apps xs-app.json
                Authentication: NoAuthentication
                ProxyType: Internet
                HTML5.ForwardAuthToken: true
                HTML5.DynamicDestination: true
                Type: HTTP
                URL: https://~{srv-api/srv-url} # reference to the service
            existing_destinations_policy: update
        version: 1.0.0
      service: destination
      service-name: my-destination-service
      service-plan: lite
  - name: my-auth
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      path: ./xs-security.json
      config:
        xsappname: my-app # update as required
        tenant-mode: dedicated

EDIT: Very important: Remember to set the resources repo-host parameter HTML5Runtime_enabled to true. It generates as false and may cause you a headache until you find it.

May this post help you on your troubleshooting. Reply if you find any issues so I, and the community, can help.

Lucas Magrini Rigo

SAP Business Technology Platform SAP Cloud Application Programming Model HTML5 SAP Fiori Launchpad SAP Build Work Zone, standard edition

SAP BTP: Cloud Application Programming Model

2025-03-04T07:09:41.141000+01:00

SAP Cloud Application Programming (CAP) Model exposes the ability to extend standard Cloud, on-premises and hybrid application functionality with flexible custom business logic scripted using the developer’s choice of programing language (SQL, SQL Script, Python, Node.js and JavaScript) and exposing the functionality to various user interfaces (UIs) e.g. Microsoft Power Bi, SAP Fiori, Dataiku and Google Big Query using various integration frameworks e.g. OData v4,JDBC/ODBC depending on the case study.

The developer takes pride in delivering a scalable extended functionality, embedding robust real-time monitoring capabilities to ensure a health life cycle and protecting the functionality with secure authentication protocols e.g. OAuth 2.0, JWT Bearer, SAML version 2.0 and RFC Specification.

Furthermore, the developer ensures a reliable and robust solutions by implementing continuous integration and continuous delivery CI/CD pipelines that automates testing, building and deployment of code changes this strategy ensures a speedy development and delivery cycle.

Traditionally developers extended business logic directly on-premises on the ABAP application server. With the ever-changing world of technology, digital transformation has become essential for organization to say afloat of competitors and therefore the programming model paradigms and capabilities of extending SAP solutions have evolved drastically and provides a seamless experience into the cloud.

Figure 1:

Architectural Paradigm Shift from Classic ABAP App server to CAP App server

Source: Thomas Jung, SAP HANA Extended Application Services blog, URL: https://community.sap.com/t5/technology-blogs-by-sap/sap-hana-extended-application-services/ba-p/12963426/page/4

The SAP Cloud Application model comes with a rich set of languages, libraries, and tools for building enterprise-grade services and applications. It guides developers along a 'golden path' of proven best practices and a great wealth of out-of-the-box solutions to recurring tasks:

Figure 2:

SAP Cloud Application Model Architecture

Source HTTPS://Cap.cloud.sap , URL: https://cap.cloud.sap/docs/about/

The below diagram categories the skill set of SAP Cloud Developer based on the scope of the development either being ABAP or Non-ABAP. Each with its unique set of tools and methodologies:

Figure 3:

SAP Cloud Developer skill set

Source: Building side-by-side extensions on SAP BTP, URL: https://learning.sap.com/learning-journeys/build-side-by-side-extensions-on-sap-btp/identifying-the-need-for-side-by-side-extensibility_f1e838f0-f02a-43b4-8896-cedc25a7d5d0

The Cloud Application Programming model enables a collaboration of agile cross functional teams inclusive of but not limited, depending on the scope of the development: citizen developers (low-code/no-code), Professional developers (Scripting, OOP), business analysts, data engineers and application specialists to model robust data models:

Figure 4:

Agile cross functional team

Source: Investigating the Impact of Cross-Functional Teams on Business Success

URL: https://www.iienstitu.com/en/blog/cross-functional-teams

SAP Cloud Application Programming (CAP) Model enables a culture where people regardless of their title or background, work together to imagine, develop, deploy, and operate a solution. This strengthens the trust between employees and authentic healthy work relationships.

Thank you all for taking a glimpse into the above Content. Please don’t for get to like, comment and share.

Abbreviations:

APP: Application

CAP: Cloud Application Programing

CDS: Core Data Services

CI/CD: Continuous Integration and Continuous Delivery

JWT: JSON Web token

OData: Open Data Protocol

RFC: Remote Function Call

SAML: Security Assertion Markup Language

SQL: Structured Query Language

UIs: User Interfaces

Deploying a CAP app with Fiori app standalone (HTML5 Repo Host)

2025-04-22T10:49:56.264000+02:00

Typically, a CAP app with a Fiori frontend is deployed using SAP Workzone or Launchpad. You just need to run "cds add portal" or "cds add workzone" to extend the configuration and deploy the app to Cloud Foundry (Deploy to Cloud Foundry | capire). The application will then be listed in the HTML5 tab of your subaccount. However, this approach is only applicable if you are subscribed to SAP Workzone or Launchpad (see below). A few months ago I was asked how to deploy a standalone CAP application with UI. Here is a step-by-step guide to deploying a CAP app with frontend.

There are at least two different approaches. The first exposes the frontend application through the approuter. The other exposes the frontend application to the HTML5 Repo Host (SAP Discovery Center Service - HTML5 Application Repository Service). This has several advantages over the approuter:

Zero Down-Time Enablement, the frontend application is decoupled from the application router, meaning that content updates do not require a restart of the application router.
The service supports versioning and permissions.
Improved availability and performance.

How to deploy a Fiori-CAP app to the html5-repo-host:

For simplicity, we will set up a new tiny bookshop example. Based on this backend, we will generate a simple Fiori List Page app.

cds init bookshop --add tiny-sample
cd bookshop

Run the commands below to add some features. We will extend the configuration of the components later.

cds add hana,html5-repo,approuter,mta
cds add xsuaa --for production

Now we are ready to add a Fiori List Report application. Right click on the mta.yaml and select 'Create MTA Module from Template'. The App Wizard will open and you will be able to configure a new Fiori app.

To make the html5 application accessible through the app router, we need to make some changes to its configuration. Locate the router configuration in the “app/router” folder. Add the “welcomeFile” and “authenticationMethod” properties to the xs-app file. In general, you can add a path to a file or the name of a Fiori app as a welcome file. The app router will redirect the user if accessing the app router. We need to add the name of the Fiori app as "welcomeFile" property. If you have defined a namespace when building the frontend app, make sure you include the namespace without delimiter. After deployment, the app router configuration below will redirect you to the Fiori app.

{
  "welcomeFile": "<Fiori app name>",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/(.*)$",
      "target": "$1",
      "destination": "srv-api",
      "csrfProtection": true
    }
  ]
}

Next, we need to extend the xs-app.json of the Fiori app itself. Add a new route for the odata service to make your cap service accessible from the Fiori app. Add the following snippet to the routes array before the html5-repo route.

{
   "source": "^/odata/(.*)$",
   "target": "/odata/$1",
   "destination": "srv-api",
   "csrfProtection": true
}

The app router applies the routes in the order given in the routes array, i.e. if the first route matches, the others are ignored. The target is the service name defined in mta.yaml. The xs-app.json should now look similar to this one.

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/odata/(.*)$",
      "target": "/odata/$1",
      "destination": "srv-api",
      "csrfProtection": true
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

Now we need to add the requires section below to the Fiori app's mta.yaml configuration. This snippet defines the service binding of the frontend app to the CAP service.

 - name: books
  type: html5
  path: app/books
  build-parameters:
    build-result: dist
    builder: custom
    commands:
    - npm install
    - npm run build:cf
    supported-platforms: []
  requires:
  - name: srv-api
    group: destinations
    properties:
      forwardAuthToken: true
      name: srv-api
      url: ~{srv-url}

If you are deploying to a BTP trial account, add the following snippet to the xs-security in the cap root folder. Make sure the link matches the cf api url for your environment.

"oauth2-configuration": {
    "redirect-uris": ["https://*.cfapps.us10-001.hana.ondemand.com/**"]
  }

Add the environment variable "COOKIE_BACKWARD_COMPATIBILITY" to the “app/router/default-env.json” file. The app asked me to add this configuration. For more information, see the app router documentation (@sap/approuter - npm).

{
  "destinations": [
    {
      "name": "srv-api",
      "url": "http://localhost:4004",
      "forwardAuthToken": true
    }
  ],
  "COOKIE_BACKWARD_COMPATIBILITY": true
}

We are all almost done! Install the dependencies, build the CAP app and deploy to Cloud Foundry.

npm i
mbt build
cf deploy …. (or context menu of the mta_archive)

After successfully deploying the application, retrieve the URL using the html5 cf plugin. Run the terminal command below. Add the app name (with namespace) and "index.html" to the URL to open the Fiori app.

cf html5-list -a <app name>-srv -u

Alternatively, navigate to the subaccount in the BTP Cockpit, access your app router and follow the application route. The router will redirect you to the Fiori app.

Find the app router on the application tab.

Follow the application route and access the fiori app.

Further information:

https://www.youtube.com/watch?v=Jbq6zaKEUyY

Introducing Application Frontend Service

2025-05-01T18:49:02.245000+02:00

As part of our exciting SAP Build release, we're happy to announce the release of Application Frontend service, a new SaaS application on SAP Business Technology Platform (BTP) for hosting, serving and operating frontend applications.

Next Generation Solution for hosting frontend applications

Application Frontend serves as a single point of entry for hosting, serving and operating frontend applications. By consolidating all aspects of UI application management under one managed service, Application Frontend simplifies the development experience and enhances custom application operations.

Bridging the Gap Between Neo and Multi-Cloud

If you have been around SAP BTP for more than 10 years then, most likely, you have used the Neo environment. If you developed an HTML5 application in Neo, then you probably used the HTML5 Runtime. Many customers we met in the past years have reported that the snappy experience they had in Neo, when developing and operating HTML5 applications, was lost when moving to the multi-cloud environment, where the HTML5 Application Repository and the managed application router (approuter) are used.
This feedback was received, noted and motivated us to come up with a new solution for managing HTML5 applications. A solution that will bring back the simplicity and flexibility customers liked so much in the Neo environment. With Application Frontend, we aim to bring that experience into the multi-cloud environment.

The first capabilities Neo fans will find familiar are host-based routing, the versioning concept and a direct deployment option. Additional capabilities like extended control from the SAP BTP cockpit will be added in the future.

But don’t get me wrong, Application Frontend is not a replica of HTML5 Runtime in Neo. It is a multi-cloud service compatible with the multi-cloud development model. We use the same descriptors used in HTML5 Repository and application router, ensuring that developers don't need to learn yet another paradigm.

Very high level architecture diagram

A New SaaS application

Application Frontend is a SaaS application which is not coupled to any specific SAP BTP runtime environment or other SAP BTP applications. You can find and subscribe to the service from the SAP BTP cockpit. Application Frontend is also equipped with a service broker to support interaction flows using service instances, for example when using MTA deploy in the CF environment.

While there is native support in the good old MTA concept for lifecycle management, Application Frontend also provides a command line interface (CLI) as a first-class tool for managing your applications. With the CLI, you can directly interact with the service and execute all actions supported by Application Frontend to enjoy fast response times and new integration opportunities.

Supported Use cases

At the moment, Application Frontend supports hosting of single tenant, stand-alone applications. (Stand-alone means applications that are not embedding other applications.)
In the future we will extend the supported use cases to cover more scenarios like applications dependencies, multi-tenancy, native SAP Build Work Zone integration, etc.
Application Frontend is perfect if you have a Build license and developing new HTML5 applications or migrating existing ones from Neo.
If the HTML5 Repository and application router are more suitable for your needs, please continue using them.

Application Frontend management UI in SAP BTP Cockpit

Next steps

Application Frontend service is starting its journey. We will continuously release additional features to support new scenarios and delight your experience.
In few weeks’ time, we will also make Application Frontend available in the SAP trial environment, so you can try it out more easily.
Note: Application Frontend will reside next to the HTML5 Repository, and the managed Application Router (approuter) hosted in SAP Build Work Zone. Both services will continue to be available, supported and developed as needed.

How to get started

SAP Build is available for subscription, more details in SAP Discovery Center
Once you purchased SAP Build, follow these steps for Application Frontend on-boarding.
Check out this intro tutorial for Simple UI Applications with Application Frontend Service

Simple UI Applications with Application Frontend Service

2025-05-08T10:43:31.479000+02:00

In the ever-evolving world of web UI applications, managed SaaS solutions are the preferred choice for hosting and serving UI applications. They offer efficiency and cost-effectiveness. SAP BTP provides robust solutions for UI applications from the early days of its cloud. The latest offering, Application Frontend service, combines the best legacy features with new advancements in technology and infrastructure. In this post I’ll share with you how to get started with Application Frontend service using the CLI, but MTA and API are supported as well.

Prerequisites

To proceed with this tutorial and try everything on your own, you’ll need a few things

An SAP BTP subaccount, where you have administrator privileges, with
- An entitlement to use the “build-default” of Application Frontend service
- Trust with SAP Cloud Identity tenant
Node.js v22.6.0 or later installed on your development environment
Application Frontend service CLI tool—afctl

To install the afctl, run

npm install -g @sap/appfront-cli

Setup

To start working with Application Frontend service, you need to subscribe to it and grant yourself the permissions to use it.

In the SAP BTP cockpit, in the subaccount, go to Services > Instances and Subscriptions. Then create a subscription the “build-default” of Application Frontend service.
In the subaccount, go to Security > Role Collections. Then create a role collection (for example, Application Frontend Developer). Open the newly created role collection and add yourself as a user. Make sure the user is from an “application users” identity provider. Add the “Application_Frontend_Developer” role to the role collection and save.

Development & Deployment

Let’s develop an application that prints “Hello, <NAME>!”, where the <NAME> is the first name of the logged-in user. We’ll use Application Frontend’s built-in current user REST API, which returns the attributes of the logged-in user as JSON.

Application Frontend service is agnostic to the tools, development model, and UI frameworks that are used to develop UI applications. However, some application configuration files are required:

The manifest.json file should, at a minimum, declare application name and version in the following format:

{
    "sap.app": {
        "id": "hello",
        "applicationVersion": {
            "version": "1.0.0"
        }
    }
}

The xs-app.json file, where the desired web server features, such as, the routing, the welcome file and authentication are configured. Some features, for example the authentication are enabled by default, and you have an option to switch them off in this file:

{
    "welcomeFile": "/index.html",
    "routes": [{
        "source": "^/user-api/currentUser$",
        "service": "sap-approuter-userapi"
    }, {
        "source": ".*",
        "service": "app-front"
    }]
}

With this example we configure 3 things:

If no specific path to the resource is present in the URL, send a redirect to /index.html
When the URL path is exactly /user-api/currentUser, send the JSON response with logged-in user attributes
For any other URL path, use the URL path as path to the static resource within deployed application

The index.html file would be the following:

<html>
<head>
    <style>
        body {
            display: grid;
            place-content: center;
            position: absolute;
            inset: 0;
        }
    </style>
</head>
<body>
    <h1>Loading...</h1>
    <script>
        fetch(
            './user-api/currentUser', 
            {credentials: 'include'}
        )
        .then(res => res.json())
        .then(user => {
            const h1 = document.querySelector('h1');
            h1.textContent = `Hello, ${user.firstname}!`;
        });
    </script>
</body>
</html>

To deploy the application, use afctl. The first thing, you need to do is to log in:

afctl login --sso -a <api_endpoint>

You can grab the <api_endpoint> from the Application Frontend service landing page. To open it, in the subaccount in the SAP BTP Cockpit, go to Services > Instances and Subscriptions, and click on the Application Frontend service link.

Now, let’s open the terminal in the root folder of our application containing these 3 files and deploy UI application, using afctl:

afctl push

After a few seconds, you should see the runtime URL of deployed application.

Open the link in the browser, log in with your SAP Cloud Identity (if you are not already logged in) and you’ll see “Hello, <NAME>!”, where <NAME> is the first name of the logged in user, in the middle of the web page.

That’s it! Very simple. No mess with infrastructure, servers, certificates, etc. Developing and deploying subsequent applications will be even simpler, since you already have everything set up.

What’s Next

In this post we covered only the very basics of Application Frontend service. In the upcoming posts from the series, we’ll take a look at more advanced Application Frontend capabilities, including:

Accessing back-end systems
Setting up authorization
Securing UI application (CSRF, click-jacking, verb tampering, CSP, CORS)
Developing and deploying full-stack applications (MTA)
Managing application versions
Local preview
Integration with SAP BTP services and tools (SAP BTP cockpit, Business Application Studio, SAP Build Work Zone, SAP Fiori tools)

Stay tuned to learn more about what Application Frontend service has to offer already now and the future features to come. Happy coding!

Fiori App Deployment in SAP BTP: Why Your App isn't where You think it is

2025-06-10T20:02:42.937000+02:00

Fiori App Deployment in SAP BTP: Why Your App Isn't Where You Think It Is

When you're delving into SAP Business Technology Platform (BTP), especially with a trial account, every successful deployment feels like a mini victory. You build a Fiori app in SAP Business Application Studio (BAS), connect it to a data source (like the SAP Gateway Demo System), deploy it to BTP, and then confidently embed it into SAP Build Work Zone. Success!

But then, you decide to level up your DevOps game by configuring Cloud Transport Management Service (CTMS). The goal: to understand how your precious Fiori app will move from a "development" environment to "QA" and "production" spaces. Naturally, you'd want to see your app residing in your initial "DEV" Cloud Foundry space to confirm its source.

This is where my recent learning journey took an interesting turn, and it's a confusion I want to clarify for others.

My "Where's My App?" Moment

After deploying my Fiori app, my logical next step was to go to the BTP Cockpit, navigate to my subaccount, select Cloud Foundry > Spaces, click into my "dev" space, and then look under Applications.

To my surprise, my Fiori app wasn't listed there! Panic. Did the deployment fail? Is it invisible? Yet, I could still access it perfectly fine from the HTML5 Applications section in the BTP Cockpit and, more importantly, it was fully functional within SAP Build Work Zone.

This discrepancy sparked a deep dive into how Fiori apps are truly deployed on BTP.

CHECK the BTP Deployment Model for Fiori Apps

The key to understanding this lies in the specialized nature of HTML5/UI5 application deployment on the Cloud Foundry environment within BTP.

When you deploy a Fiori/UI5 application from SAP BAS:

It's Not a Standalone Cloud Foundry Application (Usually): Unlike a typical backend service (e.g., a Node.js or Java application) that directly consumes Cloud Foundry resources and appears under "Applications" in a space, your Fiori app's static UI content (HTML, JavaScript, CSS, images) is usually not deployed as an independent Cloud Foundry application instance.
Enter the HTML5 Application Repository: Instead, your Fiori app's static content is deployed to the HTML5 Application Repository service. Think of this as a highly optimized, dedicated storage and serving mechanism specifically for front-end web applications. It's designed for efficient content delivery.
The Approuter's Role: Your Fiori project likely includes an approuter module (or leverages a managed approuter service). The approuter is a Cloud Foundry application instance that you will see listed in your space under Cloud Foundry --> Spaces --> space > Applications. This approuter acts as the single-entry point for your Fiori application. It handles:
- Authentication (often via XSUAA).
- Routing requests to your Fiori UI content (which is in the HTML5 Application Repository).
- Routing requests to any backend services your Fiori app consumes.

So, while the approuter is a visible Cloud Foundry application, your actual Fiori UI content lives in the HTML5 Application Repository, which is a service backing the HTML5 Applications view in the BTP Cockpit.

Checking Fiori App's True "Home"

To truly visualize where your deployed Fiori app content resides, you need to check the HTML5 Applications section:

Log in to your SAP BTP Cockpit.
Navigate to your Subaccount.
In the left-hand navigation, click on HTML5 Applications.
Here, you'll see a list of all your deployed HTML5 applications. Look for your Fiori app by its name.
Crucially, observe the "Space" column for your Fiori app. You should see your initial "dev" space listed there.

if you are unable to see, click on settings icon and add the space column there, by default it's not there

This confirms that your Fiori app's deployed content is indeed correctly placed within the HTML5 Application Repository associated with your dev space.

Points to Remember:

Fiori/UI5 apps are primarily deployed to the HTML5 Application Repository, not as direct Cloud Foundry application instances. The approuter is the Cloud Foundry application that serves them.
The HTML Applications section in the BTP Cockpit is your go-to place to monitor and confirm the deployment space of your Fiori apps.

#sap #sapcommunity #sapbtp #sapcloud #sapbas #BAS #BusinessApplicationStudio

Application Frontend Service now generally available in SAP BTP Trail Account [cf us10-XXX]

2025-06-23T17:44:52.329000+02:00

As part of our exciting SAP Build release, we're happy to announce the release of Application Frontend service, a new SaaS application on SAP Business Technology Platform (BTP) Trail account for US region for hosting, serving and operating frontend applications.

SAP BTP Trial accounts can be deployed with limited to five(5) applications per subaccount.

Now, you can enjoy the following benefits of Application Frontend Service

What is Application Frontend Service?

Host, serve, and manage frontend applications to extend SAP business solutions.

Application Frontend service lets you host and serve frontend applications. It serves as a single entry point for hosting web-based UI applications to extend SAP's business solutions. The service provides tools for deploying and managing applications, serving static resources, routing backend calls to defined targets, and observability tools.

Application Frontend service is included in the SAP Build.

Application Frontend service supports various channels for managing applications, such as the commonly used Generic Application Content Deployer (GACD) for multitarget applications (MTA), a dedicated UI in the cockpit, and a CLI. These options allow you to choose the channel that best suits your needs.

High Level Overview of Application Frontend Service - Deployment

Prerequisites to enable Application Frontend Serivce

Go to your SAP BTP Trail Account - Subaccount
Go to your Instance and Subscription - Subscribe for SAP Cloud Identity Services
Enable SAP IAS and Trust & Auth with enabled SAP IAS
Go to Entitlements - Select Application Frontend Service
Select 2 checkbox for enabling the Plan (Developer and Application)
Create a Role Collections and Assign to your User (SAP IAS enabled)

Go to Instances and Subscription - Select Application Frontend Service from dropdown with Plan - Trial

Go to Instances and Subscription - Select Application Frontend Service with Plan - Developer

Create a New Role Collection

Assign Role to newly created Role Collection

Application Frontend Service Library & CLI (Command Line)

npm install -g /appfront-cli

afctl login --sso -a <api_endpoint>

afctl push

Conclusion

Application Frontend Service is a game-changer for Cloud Foundry users. By simplifying UI development, enhancing scalability, and promoting consistency, AFS empowers developers to create high-quality applications more efficiently. As cloud-native development continues to evolve, integrating tools like AFS will be crucial in staying ahead of the curve and delivering exceptional user experiences.

For more detailed insights, you can check out the original blog posts :

Introducing Application Frontend Service : Application Frontend Service
Simple UI Applications with Application Frontend Service : DEV Community
Application Frontend Service Help Documentation : Guide and Development
Application Frontend Service Onboarding Service - AppFront trial on-boarding help page

Running a SAPUI5 App from a Previous Commit Without Affecting Remote Repository

2025-07-02T11:18:21.259000+02:00

Introduction

Ever needed to test or run your SAPUI5 application from an earlier commit without disturbing your current branch or affecting the remote repository? Whether it's for debugging, rollback testing, or feature validation, Git provides a safe and clean way to do this — using detached HEAD state and local branches. Here's a step-by-step guide to achieve just that.

Step-by-Step: Run an Older Version of Your SAPUI5 App Safely

Step 1: View Commit History

To identify which commit you want to revisit:

git log --oneline

This will display recent commits with their short hash and message. Identify the one that's 4 commits back or use:

git checkout HEAD~4

Step 2: Checkout the Older Commit

git checkout <commit-hash>

Or for 4 commits ago:

git checkout HEAD~4

This moves you into a detached HEAD state, a safe mode where changes don’t impact your current branch.

Step 3: Run Your SAPUI5 Application

Use your usual development server to run the app:

ui5 serve

npm start

Your app now runs exactly as it existed 4 commits ago.

Step 4: (Optional) Create a Local Test Branch

If you want to make edits or test features in that older state:

git checkout -b temp-test-branch

This lets you commit and experiment locally — no impact on the remote repo.

Step 5: Return to Your Latest Code

Once done, simply switch back to your latest working branch:

git checkout main

Why This Approach is Safe?

- No changes are pushed to the remote.

- The main branch and its history remain intact.

- You can safely test, debug, or demo older versions of your app.

- Great for testing fixes without branching off prematurely.

Conclusion

Testing previous versions of your SAPUI5 app doesn't need to be risky. By using Git's detached HEAD mode and optional local branches, you gain full control without affecting your project's main history or remote repo. It’s a clean, safe, and professional way to revisit and test the past.

Thank you for taking the time to read this blog!

If you found this helpful, feel free to share your thoughts, feedback, or questions in the comments! Let's keep learning and growing together. Happy coding!

Hello experts, please feel free to correct me if any information is inaccurate.

Version Control Made Simple with Application Frontend Service

2025-07-29T19:44:46.412000+02:00

As developers, we all know that deploying a new version of an application can be both exciting and risky. Whether you’re rolling out a minor UI fix or launching a major redesign, the ability to manage multiple versions with confidence is key to a smooth delivery process.

With Application Frontend Service, version management is built in from the start, letting you deploy, view, roll back, and promote frontend versions directly from the CLI or SAP BTP Cockpit. In this post, we’ll show you how it works and how to make the most of it.

Why Version Management Matters

Application Frontend Service allows you to host and serve UI applications in SAP BTP. But what happens when a bug slips through? Or when you need to test a new version without affecting your end users?

That’s where the versioning concept in Application Frontend Service comes in.

Application Frontend Service supports multiple coexisting versions of the same application, each one deployed independently and maintained separately.
In the manifest.json file of your application, you define the version name using the applicationVersion property. This allows you to deploy multiple versions of the same application, all sharing the same application ID but with different version identifiers.

Every version:

Has its dedicated version-specific URL
Can reference different services and codebases
Can be tested or validated in parallel with the current live version

Each application has exactly one active version at any given time. The active version is served from the application’s main URL. All other versions are accessible only via their version-specific URLs.
The active version is the version that is available to the end users.

When you deploy an application, it becomes the active version by default, served at the application’s main URL. But you can also deploy a version without activating it, test it safely, and switch to it later with a single command.

Real-Life Example: Test and Promote with Zero Downtime

Let’s say you’ve deployed version 0.0.1 of your application, myApp, and it’s running smoothly in production. You’re now working on version 0.0.2 with a few improvements or new features. With Application Frontend Service, you can deploy version 0.0.2 without making it active right away.

Each application in Application Frontend Service is assigned a unique main URL when it is first deployed. For example:

https://myapp-wscfr.eu10.appfront.cloud.sap

This main URL always returns the currently active version of the application.

In addition, each deployed version receives its version-specific URL, such as:

https://myapp-wscfr-v0_0_1.eu10.appfront.cloud.sap
https://myapp-wscfr-v0_0_2.eu10.appfront.cloud.sap

With Application Frontend Service, you can:

Deploy version 0.0.2 without activating it
Access it directly through its version-specific URL:
https://myapp-wscfr-v0_0_2.eu10.appfront.cloud.sap
Let your testers or internal users try it out
Keep version 0.0.1 active and served via the main URL
Once validated, promote version 0.0.2 to active, and your main URL: https://myapp-wscfr.eu10.appfront.cloud.sap will now serve the new version to all users

All of this happens without downtime, without breaking the existing deployment, and without overwriting any previously deployed version.

Controlling Activation During Deployment

In the previous example, we saw how useful it is to deploy a new version without activating it right away.
By default, any new deployment to the Application Frontend Service becomes the active version. But if you want to delay activation, for example, to perform internal validation, you can control this behavior in two ways, depending on how you deploy.

When deploying an application using the GACD (Generic Application Content Deployer) module

If you are deploying a multi-target application (MTA), you can prevent automatic activation by setting activateVersion: false under the parameters of the GACD module in your mta.yaml file:

...
  parameters:
    config:
      activateVersion: false
      destinations:
        - name: ui5
          url: https://ui5.sap.com

When deploying with afctl push

If you're using the Application Frontend service CLI to deploy applications, you can achieve the same behavior using one of the following options:

Pass the --no-activate (or-n) flag to the afctl push command:

afctl push <path-to-app> -n

Or set "activateVersion": false in the configuration file (e.g., conf.json):

{
  "activateVersion": false
}

Note: If both the CLI flag and the configuration file contain activation settings, the CLI flag takes precedence.

For example, the following command uses a configuration file that may contain "activateVersion": true, but the -n flag overrides it and prevents activation:

afctl push <path-to-app> -c conf.json -n

With either method, the new version will be deployed and accessible via its version-specific URL. Still, the application’s main URL will continue to serve the currently active version until you explicitly promote the new one.

Managing Application Versions in SAP BTP Cockpit

To access the Application Frontend UI in SAP BTP Cockpit, your user must be assigned the Application Frontend Viewer role. To activate or delete versions, you need the Application Frontend Developer role.

Viewing Your Applications

In the left-hand navigation bar of the SAP BTP Cockpit, choose HTML5 / Application Frontend.
You'll see a list of applications that have been deployed to the Application Frontend Service in your subaccount.
For each application, you can see its active version.
To open and run an application, you can click either the application name or the active version.
If you choose to delete an application, all of its versions (including the active one) will be permanently deleted.

Viewing and Managing Versions

To see all deployed versions of an application:

Click anywhere on the row of the application.
A detail pane will open on the right, showing all the deployed versions of that application.

Here you can activate versions, delete them, or view logs for a specific version.

To change the active version of an application:

Click the Activate version icon on the version you want to promote.
The active version indicator will move to that version.

Only one version of an application can be active at a time.

To delete a specific version of an application:

Click the Delete icon on the version you want to remove

Note: This action is permanent. Deleted versions cannot be recovered.

Additional Notes

You cannot delete an active version. To delete an active version, you must first activate another one.
An application can have a maximum of 10 versions. Once this limit is reached, you must delete older versions before deploying new ones.

Let’s see how all of this looks in a real example.

I have deployed an application called “employees.” It currently has a single version, 1.0.0, which was activated by default on deployment.

This is how the application looks:

Note the URL. This is the main URL of the application.

I can also run the same version using its version-specific URL:

Now I want to enhance the application by adding search and sort controls, and I also want to remove the “Employees Overview” title.

After making these changes, I deploy version 2.0.0 of the application using the --no-activate flag, meaning this version will not become active immediately.

At this point, two versions of the application exist:

Since the new version was not activated, the main application URL still serves version 1.0.0 - without the new features:

However, I can access and test version 2.0.0 using its version-specific URL:

The search and sort controls are visible, and everything is working as expected.

Next, I activate version 2.0.0.

Now version 2.0.0 is active.

The main application URL serves the updated version with the new features:

The previous version, 1.0.0, remains available through its version-specific URL, and I can roll back to it if needed:

Managing Application Versions with the Application Frontend Service CLI

You can perform the same version management actions using the Application Frontend service CLI.
To activate or delete versions, you need the Application Frontend Developer role.

Activate a version

To activate a specific version of an application, use:

afctl activate APPLICATION VERSION

Arguments:

APPLICATION – Name of the deployed application
VERSION – Name of the application version you want to activate

Delete a version

To delete a specific version:

afctl delete APPLICATION VERSION

Caution: If you don't specify an application version, all versions of the application will be deleted. This action cannot be undone.

View all versions
To view versions, your user must be assigned the Application Frontend Viewer role.

To list all deployed versions of an application:

afctl list APPLICATION

For example, if you run afctl list employees after activating version 2.0.0 in the example above, the output would show all available versions, including the active one.

As you can see, with built-in versioning and flexible deployment options, Application Frontend Service makes it easy to deliver updates with confidence.
Whether you work in the SAP BTP Cockpit or prefer the CLI, you can roll out changes safely without impacting the live version during development or testing.

SAP CAP Lessons Learned: Reject error message missing on HTML5 Repository app?

2025-11-28T15:41:23.691000+01:00

Good day fellow CAPpers,

Today I'll share one of the lessons I've learned working with CAP, something that may not be clear in the current tutorials or documentation. When running locally, or even in BTP on a Cloud Foundry-based front end, whenever you reject a request, you would expect that the message appears to the user:

The top bold message is in the front end SAPUI5 app, and the bottom, the description, comes from CAP, in the req.reject call:

try {
  const con = await cds.connect.to('SERVICE_SRV');
  let entry;
  // ...
  const result = await con.run(
    INSERT.into(EntitySet).entries(entry)
   );
} catch (err) {
   req.reject(500, err.message);
}

This executes as expected on CAP, both locally and on BTP. However, in the front end, the message is only displayed locally, not on BTP if the app is deployed on the HTML5 Application Repository:

This gave me a big headache, especially because a few weeks earlier it was displaying fine, whereas now the message is lost and replaced for "Internal Server Error".

I even debugged remotely the CAP app running on BTP to double check, and the error message was correctly set there, on the req.reject statement.

Finally, I resorted and opened a case (ticket, incident) for SAP. After providing the required test code, they gave me a solution: replace the 500 code for 400.

I chose 500 because out of the HTTP response status codes, 500 is for server errors. Since the error message I wanted to display was on the server side, I opted for 500. But apparently, you should always stick to 400 (client error) to make it work.

SAP failed to provide me an explanation to this behavior of the HTML5 Application Repository, and its behavior is like of a black box, where we can't see what's happening inside.

TLDR

Therefore, whenever you want to reject a request in CAP AND send the error message to the user with the details of the error AND you have deployed your app in the HTML5 Repo, use HTTP code 400.

May this post help you on your troubleshooting. Reply if you find any issues so I, and the community, can help.

Lucas Magrini Rigo

SAP Community - HTML5

How to enable SUBMIT Button in Fiori app – Verify Currency Adjustments (F4670)

Prerequisites: User must have access to all three apps

Steps to enable the SUBMIT Button

Go to Fiori launchpad and launch the Fiori app – F4670 (Verify Currency Adjustments) and Click at Create Button.

2. It will navigate to the Fiori app F1606 (Post Currency Adjustments).

3. Fill all required details, but as we can see SUBMIT Button is not enabled.

4. To enable the SUBMIT Button go to the Fiori app – F2720 (Manage Workflows for Journal Entry Verification - In General Ledger)

5. Go to Fiori launchpad (/n/ui2/FLP) --> Fiori app (Manage Teams and Responsibilities for Journal Entry Verification - In General Ledger).

6. Go to Fiori app --> F4670 (Verify Currency Adjustments) and Click at Create Button. Perform the steps 2 & 3. Now we can see that SUBMIT Button is enable in our application (F1606).

Conclusion

Fancy Emails from SAP Integration Suite(CI) and BTP Alert Notification Service

SAP Integration Suite Enhanced Monitoring

Scenario Overview

Architecture Overview

Technical setup

SAP CAP Application Backend

SAP CAP Application Frontend

SAP HANA Database

openAI Chat Completions API

SAP API Management and SAP Integration Suite

Email integration

Conclusions

SAP BTP Help Shorty - HTML5 Configuration issue "Failed to get Metadata - 400"

Integrate app into Work Zone from a different subaccount

Introduction

Solution

1. Activate the allowListService in the Custom Fiori App

2. Activate the whitelistService in the Standalone Approuter

3. Add User-Provided Variables to the Application

4. Adding Work Zone Host as a Trusted Domain

Conclusion

Automating Advanced Event Mesh Broker Creation

Introduction

Scenario Overview

Architecture Overview

UI Configuration Page

Technical Setup

Adapter for inserting/consuming events

Conclusions

CSRF Token Validation Error

Scenario

Solution

Consuming SAP with SAP Build Apps - Web App in SAP Build Work Zone, standard edition

Introduction

SAP Build Work Zone

MTAR

Use case D : Consume the CAP service with a web app provided in SAP Build Work Zone

Solution diagram

Building the web app in SAP Build Apps

Provide access to the web app in SAP Build Work Zone

SAP Build Work Zone configuration

Resolving the "Internal Server Error"

Accessing the web app in SAP Build Work Zone

Summary – use case D

What's next

Displaying Customer Location with Custom HTML Builder Using RESTful Webservice and API

SAP GUI HTML / Browser control use F12 Development tools

SAP CAP Lessons Learned: Deploy app on HTML5 Repository

SAP BTP: Cloud Application Programming Model

Deploying a CAP app with Fiori app standalone (HTML5 Repo Host)

Introducing Application Frontend Service

Simple UI Applications with Application Frontend Service

Prerequisites

Setup

Development & Deployment

What’s Next

Fiori App Deployment in SAP BTP: Why Your App isn't where You think it is

Fiori App Deployment in SAP BTP: Why Your App Isn't Where You Think It Is

My "Where's My App?" Moment

CHECK the BTP Deployment Model for Fiori Apps

Checking Fiori App's True "Home"

Points to Remember:

Application Frontend Service now generally available in SAP BTP Trail Account [cf us10-XXX]

What is Application Frontend Service?

High Level Overview of Application Frontend Service - Deployment

Prerequisites to enable Application Frontend Serivce

Create a New Role Collection

Assign Role to newly created Role Collection

Application Frontend Service Library & CLI (Command Line)