SAP Community - HTML5

Consuming ABAP Odata in SAP BAS (Business Application Studio)

2021-05-28T09:42:58+02:00

Hello Readers,

Hope everyone is doing well!

It's been a long that I haven't developed any blog post recently,

Hope you very well know the BAS(Business Application Studio) the new development toolkit provided by SAP.

Introduction:

SAP provides a new development tool(IDE) called “SAP Business Application Studio” (BAS) in the market and to the customers for developing SAP UI5 Applications in the Cloud Foundry environment.

without wasting more time let us all process the learning part,

If you haven't activated the BAS don't worry SAP provided the necessary Articles for this

1.Setup SAP Business Application Studio in Cloud Foundry environment.

Enable SAP Business Application Studio service subscription from Cloud Foundry environment.

https://developers.sap.com/tutorials/appstudio-onboarding.html

Create a Dev Space for SAP Fiori Apps.

https://developers.sap.com/tutorials/appstudio-devspace-fiori-create.html

2. Steps: create a destination in the cloud cockpit.

login into your SAP BTP and extend your trial account,

you will see the above screen then--> Enter to Your Trial Account

Global Trial Account

Then you need to enter your trial home of the sap BTP.

Cloud Connectivity

if you came to this screen then you very well know about to add the destinations of your systems.

3. Create a destination in cloud foundry for consuming any demo oData service.

Create a destination in cloud foundry for accessing OData service from ECC.

To create a destination, click on the New destination Button in the cloud foundry

all the details will be the same as you are creating any destinations for the WEB-IDE, like Additional Property and necessary stuff.

Destination Configuration

after adding all the details in the destination make sure you check your connection and it should be established and a green popup will execute.

4.Create SAP UI5 App using SAP Business Application Studio.

Open sap business application studio by clicking on SAP Business Application Studio.

SAP BTP Cockpit

after that, you will be redirected to the new screen with your SAP BAS with DEV Spaces.

SAP BAS Dev Spaces

from this there are multiple things that you are aware of.

if you are new to this then and you don't have any spaces just create one, for that, you need to click on Create Dev Space button on the Top Right you can see, after that, you have to write your DEV Space name, and some minor details.

if you have created your space then click on the▶ Play Icon as you see on this screen then only your space will start run as you start your car after seating in.

after this, your space will come in Starting then to Running Status from red to green color(if you are first time to this it will take time to start).

Then you have to click on space on the name you have created, after this you good to go.

SAP BAS welcome screen

after that Create your SAP UI5 project by selecting New Project from the template.

Select SAP Fiori Application and then click on the Start Button

App Generator

After that, you will see the below screen, then from the dropdown select SAPUI5 freestyle App Type and select SAP UI5 Application, then click on Next Button.

App Template

after that, you will be redirected to theData Source and Service Selection screen step.

Data Source and Service Selection

there are multiple options for us to connect with a sap system from the drop-down we have to select the Connect to an SAP System option from the dropdown, there are many other ways also to connect with an OData service but that we will use in our next blog post,

After that one new option, you will see on your screen named System with your ABAP system that you have configured in our earlier steps. in that select your ABAP system.

Service Details

from the above screen after selecting your ABAP system you have to fill your SAP ECC Credentials in the following manner and then click on the icon next to the Password field.

after that, there will be the list of oData service which are in your ABAP system in the dropdown, then select your desired service for which data you need to fetch.

after that give your view name and project name all the necessary kinds of stuff,

that you will see on your left there your project gets created and the main folders go to the web app folder that opens the view and your view.xml and take any ui5 control in which you wanted to fetch your data, here I have taken the simple m.table

 <Table id="getData" items="{/POHeaderSet}" growing="true">

                            <columns>

                                <Column >

                                    <Text text="Number"></Text>

                                </Column>

                                <Column>

                                    <Text text="Status"></Text>

                                </Column>

                                <Column>

                                    <Text text="PO Num"></Text>

                                </Column>

                            </columns>

                            <items>

                                <ColumnListItem>

                                    <cells>

                                        <Text text="{Ebeln}"></Text>

                                        <Text text="{Statu}"></Text>

                                        <Text text="{Bukrs}"></Text>

                                    </cells>

                                </ColumnListItem>



                            </items>

                        </Table>

please note that I have only done code in the XML file you did not want to do any extra code in your controller,

so now that's it run your project for that also in BAS we have to follow certain steps,

Click on the Run Configuration button from the left.

Run Configuration

Click on the Plus button to create an application configuration.

Select your HTML Application(UI5 App) –(name of the ui5 application)

then it will see a drill-down on the right side of the panel,

then follow the below steps to run the application

=> Select Index.html file

=> UI5 library version

=> Run html5 module.

after that, you will see the below screen,

Run Configuration

once you are done with this then the destination button status turns from grey color to green color.

After you view this type of in your left panel then just click on this Play button, after some time your project will be run ASAP.

Note: make sure in your browser pop-up a window is enabled.

Open App In New Tab

after that Open Application Preview on New Tab.

Finally, we can see the Application preview. in the browser.

after all this work we see it finally, once you habituate to these steps it won't be feeling lengthy as quickly as you create and bind oData in web-ide.

Final Application

Conclusion

Take advantage of this new tool for developing SAP UI5 Apps, FIORI Element Apps, CAP, Mobile application development.

so I hope every one of you has learned that how to bind an ABAP OData in the project.

if you face any kind of issues executing these steps kindly comment it down here,

I am always ready to help!!

Thanks for reading, Have fun! with safety!!!

Harshil Patel

SAP UI5/Fiori Consultant

Setup for SAP S/4HANA side-by-side UI Extension on SAP BTP

2021-07-02T10:11:26+02:00

Introduction

One of the most common extension scenarios is the consumption of a backend API by a cloud-based UI. Also, this is one of the simplest extension scenarios which can be used as a starting point to understand the end-to-end landscape setup and for building more complex scenarios in the future.

You can find this scenario as a Mission in SAP Discovery Center

Business Case

A Sales Executive of a company meets different Business Partners/Clients in various locations and wants to use a simplified, custom UI application which can run on a mobile device or a tablet.

With an side-by-side extension you can realize this without having a direct/VPN access to your digital core and provide your end users with a custom UI application which allows to view the details of business partners from the SAP S/4HANA system in a secured manner. Additionally, this use case explains how quickly a new custom UI application can be developed and run, fully managed by SAP BTP and describes the full end-to-end setup needed for a productive extension application.

This scenario can easily be adapted for other use cases like exposing product data, sales orders, or other APIs

Mission Content

This Mission shows all the necessary steps for the productive end-to-end landscape setup with principal propagation by building a simple UI application as a reference, this includes the following steps:

Enabling an OData API on SAP S/4HANA

Setting up SAP Cloud Connector and S/4HANA for principal propagation

Setting up a SAP BTP Subaccount using Booster

Developing of a simple Fiori Application with the SAP Business Application Studio

Deploying the application to the HTLM5 repository service

Integrating he application into the Launchpad service

Integrating the SAP Cloud CI/CD service

The content of the Mission is tested on a regular basis and will be kept up to date by integrating the latest services and features

Solution Diagram

Web Page with Hyperlink to SAP GUI Transaction

2022-01-10T20:41:32+01:00

Companies are currently implementing web based applications as side-by-side extensions to their core SAP Business Suite or SAP S/4HANA system in order to enhance or substitute legacy SAP GUI base processes. In some cases it might be beneficial to embed a link to a SAP GUI transaction into a HTML page, either to gap a functionality that is not yet available within the web application or to provide the end users with an alternative, familiar way to perform a specific action.

The following steps explain two alternative methods to add a hyperlink to your web page, which, when clicked, starts the SAP GUI and runs a transaction with parameters.

Step 1: Find the correct ok-code

First determine the ok-code that runs the SAP GUI transaction. If a transaction is supposed to be called without parameter, the ok-code is equal to the transaction code. In that case you can skip this step.

The ok-code must comply with the following syntax:

*<transaction code> <field1>=<value1>;<field2>=<value2>;

where <fieldN> is a dynpro fieldname of a selection screen field that should be filled in advanced with <valueN>.

The asterisk skips the initial screen. If you cannot specify all mandatory fields or you do not want to skip the initial screen or the transaction does not have an initial screen, leave the asterisk out.

If you do not know the dynpro fieldnames of the selection screen fields that are supposed to be filled, proceed as follows:

As an example, all batch jobs should be displayed that start with letter Z and that are owned by user HUGO. The appropriate transaction for that task is SM37.

In order to find the dynpro fieldname that correspond to parameter Job Name, click on the input field and press F1. The Performance Assistant pops up. Click on icon Technical Information (screw wrench). You find the dynpro fieldname under section Field Description, e.g. BTCH2170-JOBNAME.

Repeat this procedure to also find the dynpro fieldname for User Name.

Eventually, you can compile the ok-code as follows:

/nSM37 BTCH2170-JOBNAME=Z*;BTCH2170-USERNAME=HUGO;

This example will be used throughout this blog post.

Method 1: Download an SAP shortcut file

Create a download link to an SAP shortcut file. This methods works on all front end PCs where an SAP GUI is installed without further setup activity. However, a file may be downloaded every time a user clicks the link and the user must explicitly allow execution of the downloaded file.

Step 2.1: Create SAP shortcut file

In order to create an SAP shortcut file (extension *.sap), logon to the SAP GUI and run the transaction. Then select menu item

More → SAP GUI settings and actions → Create Shortcut...

Add parameters to the Transaction and specify the Location where the file should be stored. Afterwards, click Finish.

Step 3.1: Create download link to SAP shortcut file

Next you must create a download link to a SAP shortcut file. Considering the example above, assuming that the transaction should be run on SAP System PRD in client 100, the file content should look like shown below.

[System]

Name=PRD

Description=PRD - Production

Client=100

[User]

Name=HUGO

Language=EN

[Function]

Title=Job Overview

Command=SM37 BTCH2170-JOBNAME=Z*;BTCH2170-USERNAME=HUGO;

[Configuration]

WorkDir=C:\Users\Hugo\Documents\SAP\SAP GUI

[Options]

Reuse=1

Usually you would implement a HTML GET method on the server that sends the file as response with a HTTP header like:

Content-Disposition: attachment; filename=SAPShortcut.sap

For a HTML only solution it is not sufficient to store the SAP shortcut file on the server and put a hyperlink on the HTML page that references that file, because the browser will render the file content as text without actually downloading it. To get around this, add the file content as data URL to your hyperlink tag.

If the SAP shortcut file is "PRD Job Overview.sap" and resides in the current directory, you can generate a data URL using the following Windows PowerShell command.

&{$b=Get-Content -Encoding Byte -Path ".\PRD Job Overview.sap"; "data:text/plain;base64," + [Convert]::ToBase64String($b)}

Add a hyperlink to your HTML page with the generated data URL as reference as shown in the code snippet below. The user can use the hyperlink to navigate to the SAP GUI job overview screen.

<html>

<head>

<title>Link to SAP GUI transaction (download SAP shortcut file)</title>

</head>

<body>



<a href='data:text/plain;base64,W1N5c3RlbV0NCk5hbWU9UFJE ... xVzZT0xDQo=' download='SAPshortcut.sap'>

Job Overview

</a>



</body>

</html>

When the user clicks the link, the behavior depends on the web browser and its settings.

Either the SAP shortcut file SAPshortcut.sap is downloaded and afterwards the user must trigger execution of that file.

Or a popup window appears giving the user the option to select an application that should be used to open the file. The user has to select executable sapshcut.exe, which (on Windows) most likely resides in folder C:\Program Files (x86)\SAP\FrontEnd\SAPgui\.

In both cases the user should mark option "Do this from now on."

A security message appears where the user must allow execution of the displayed ok-code.

If an SAP GUI session for the user and client is already active, the SAP GUI transaction is brought up immediately. Otherwise the user must provide a password first.

Method 2: Configure a Custom URL

This second method to add a hyperlink that starts a SAP GUI works on Windows front end PCs only and needs some setup work. It implements a custom URL that can be used to navigate to the SAP GUI transaction the same way one can navigate to any web resource.

Step 2.2: Start SAP GUI transaction via SAPshortcut

Program sapshcut.exe is part of the SAP GUI installation and can be used to run an SAP GUI transaction. You can skip this step. However, is is recommended to run SAPshortcut from Windows PowerShell once to verify that all SAP GUI components have been installed correctly.

Start Windows PowerShell and change directory to the SAP GUI installation directory on your local PC.

cd "C:\Program Files (x86)\SAP\FrontEnd\SAPgui"

Assuming you want to run the transaction of the example above on system PRD in client 100, execute the following command from Windows PowerShell:

sapshcut -SYSTEM=PRD -CLIENT=100 -LANGUAGE=EN -REUSE=1 -TYPE=TRANSACTION -COMMAND="""SM37 BTCH2170-JOBNAME=Z*;BTCH2170-USERNAME=HUGO;"""

Parameter -COMMAND holds the ok-code (without prefix /n) that you want to run.

If the ok-code contains a whitespace, it must be specified as a quoted string. To pass a quoted string as command parameter inside the Windows PowerShell, you must quote that quoted string, where the inner quotes must be prefixed by the escape character, which is also a quote. Thus, you end up with triple quotes.

Step 3.2: Register protocol handler in Windows registry

Next you must register protocol handler sapgui for custom URLs that comply to the following scheme:

sapgui:<sapshcut.exe arguments separated by &>

For example, with the transaction from the previous step:

sapgui:-SYSTEM=PRD&-CLIENT=100&-LANGUAGE=EN&-REUSE=1&-COMMAND="""SM37 BTCH2170-JOBNAME=Z*;BTCH2170-USERNAME=HUGO;"""

To register a protocol handler and assign it to a shell command, open the Windows registry editor (regedit) and proceed as follows:

Add key HKEY_CLASSES_ROOT\sapgui

Add string "URL Protocol" to key HKEY_CLASSES_ROOT\sapgui

Next you need to add the command as a Windows Registry key as follows:

HKEY_CLASSES_ROOT\sapgui\shell\open\command = <path>\sapshcut.exe <arguments derived from "#1">

where #1 is the argument that contains the encoded custom URL including the protocol prefix, for example

sapgui:-SYSTEM=PRD&-CLIENT=100&-USER=HUGO&-LANGUAGE=EN&-REUSE=1&-COMMAND=%22%22%22SM37%20BTCH2170-JOBNAME=Z*;BTCH2170-USERNAME=HUGO;%22%22%22

You can use Windows PowerShell commands to convert the URL-encoded string to a list of arguments for executable sapshcut.exe.

First decode the URL. Use method WebUtility.UrlDecode of .NET assembly System.Net to do so.

Add-Type -AssemblyName System.Net

$args=[System.Net.WebUtility]::UrlDecode('%1')

Afterwards remove prefix sapgui: from the URL by calling method replace. You may also want to remove double slashes in order to allow URLs starting with sapgui://

$args.replace('sapgui:','').replace('//','')

Convert the string into an argument list by splitting at character & and pass it to executable sapshcut.exe

sapshcut.exe $args.split('&')

The command sequence above must be run within a Windows PowerShell instance. Start powershell.exe with options -NonInteractive -NoProfile and -WindowStyle Hidden, see https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_powershell_exe.

Finally you should compile everything into a Windows registry file (extension *.reg) with the content below. All relevant keys are added to the Windows registry when the file gets executed.

Windows Registry Editor Version 5.00



[HKEY_CLASSES_ROOT\sapgui]

@="Launch SAP GUI"

"URL Protocol"=""



[HKEY_CLASSES_ROOT\sapgui\shell]

@=""



[HKEY_CLASSES_ROOT\sapgui\shell\open]

@=""



[HKEY_CLASSES_ROOT\sapgui\shell\open\command]

@="powershell -NonInteractive -NoProfile -WindowStyle Hidden -Command \"& {Add-Type -AssemblyName System.Net; $args=[System.Net.WebUtility]::UrlDecode('%1').replace('sapgui:','').replace('//',''); &'C:\\Program Files (x86)\\SAP\\FrontEnd\\SAPgui\\sapshcut' $args.split('&')}\""

Step 4.2: Create a HTML page

Now you are ready to use custom URLs with protocol sapgui:

By using such a custom URL you can add a hyperlink to your HTML page that can be used to navigate to the filtered job overview screen in SAP GUI, as indicated by the following snippet.

<html>

<head>

<title>Link to SAPGUI transaction (follow custom URL)</title>

</head>

<body>



<a href='sapgui:-SYSTEM=PRD&-CLIENT=100&-USER=HUGO&-LANGUAGE=EN&-REUSE=1&-COMMAND="""SM37 BTCH2170-JOBNAME=Z*;BTCH2170-USERNAME=HUGO;"""'>

Job Overview

</a>



</body>

</html>

Conclusion

Two alternative methods to add a hyperlink to your web page for navigation to a parameterized SAP GUI transaction have been given. Method 1 works on all front end PCs without additional setup. Method 2 might be more convenient for the user, but requires setup work on the front end PC.

The latter method runs on Windows only. However, it should be possible to implement a similar approach on other operating systems that support custom URLs, in particular macOS.

If you need help with the SAP GUI or on another topic, Ask a Question on the SAP Community Q&A resource page.

Build, Deploy and Reuse html5 applications

2022-02-11T11:05:10+01:00

Typically SAP HTML5 applications are built and deployed into html5 repository. HTML5 applications consist of static content that runs on a browser such as HTML, CSS, JavaScript, and other files. These module can be reused in various ways for end users interaction.

The SAP Business Technology Platform cockpit can act in the roles of a service provider and a service consumer. This blog post is to introduce the configurations into provider and consumer accounts that we often deal with in our development life cycle. I have picked two scenarios to show how easy it is to reuse the html5 content.

Prerequisites

You've created a SAP HTML5 module in SAP Web IDE or using yo generator and deployed it to your SAP Cloud Platform subaccount.

You've basic understanding about provider and consumer account

Understanding of app host id

You will learn

How to consume your own developed apps in a SAP Fiori Launchpad

How to add the html5 content to your own developed application router at cloud foundry

SAP Fiori Launchpad

The launchpad comes with all the capabilities such as adding applications and grouping them, theme managing, roles etc., Let us assume our own developed business service that shares UI is available in provider account.

Note: A business service that provides RESTful service or shares UI is accessed by a consumer. For e.g., As of today we access applications like workflow management is shared by business service. Read more information about integration of business service

STEP 1: Binding process

Business service (that exposes the UI) needs to expose a set of attributes that enable the managed application router to serve business service UI and/or data. Service Broker of the business service is responsible to put app-host-id inside application's VCAP_SERVICES. The attributes should be defined in the onBind hook in the service broker implementation

When you bind an application to a service, the service puts some attributes to the VCAP_SERVICES of the application. Ensure that service html5-apps-repo with app-host plan of your application is binded with the service broker in provider account.

You can verify the html5-apps-repo service name and app-host id for your application from a command after login to subaccount

cf html5-list

This will list out html5 applications

list of all html5 applications

STEP 2: Creation of service instance in consumer account

Go to consumer account and create a new instance of your business service

STEP 3: Creation of destination in consumer account

Create a destination and select newly created instance.

Go to Destinations -> New Destinations -> Service Instance -> Select your service Instance from dropdown

Verify that your app-host id is listed in app-host id's field under additional properties or you can verify from the service key of your service instance from View credentials

STEP 4: Subscription to SAP Fiori Launchpad in consumer account

In the side navigation panel of your subaccount, click Subscriptions and enter Launchpad in the search bar. Then on the Launchpad tile, click Go to Application. Check here how to add your application into Launchpad

Fiori Launchpad

Application Router

The application router is used in combination with the XSUAA service to authenticate a user and route the user to the secured application. Read more about this here .

STEP 1: Add app-host id into your user provided service

User provided service enable developers to use services that are not available in the marketplace with their apps running on Cloud Foundry. Usually credentials to connect to DB or app-host Id is shared in it. In our use case ensure to include app-host id

STEP 2: Create service instance and ensure from view credentials your app-host id is visible.

After creation of user provided service instance in a provider account, Ensure to check from view credentials app-host id along with credentials are added

STEP 3: Bind App router

When you bind the app router it will be having information about your html5 application.

STEP 4: Ensure application is being redirected to your html5 application with the app router url

Please capture service value and appId from your manifest.json.

  "sap.cloud": {

    "public": true,

    "service": "com.sap.spa.processautomation"

  }

URL is composed of your

<app-router-url>/<service-without-dots>.<appId-without-dots>

Ensure that you are redirected to your html5 application's index.html with above constructed url.

Summary

We learnt how to consume your own developed apps in a Fiori Launchpad

Bind html5-apps-repo service instance to service broker application present in the space of a provider account

Create service instance of business service in consumer account

Create destination of above service instance and this is ready to consume in Launchpad

We learnt how to add the html5 content to your own developed application router at cloud foundry

Add app-host id in user provided service

Bind app-router after creation of user provided service instance

It is ready to consume while redirecting via app-router

Thank you all for reading this blog 🙂 , I hope it was informative and if you have any question that I can address in the comment section

Web Form in Plain HTML

2022-03-03T16:01:56+01:00

Web forms can be pictured as a bridge between a user and a website or application. They are commonly used to collect user data which is technically referred to as client-side and store them in a database or client-side. There are several types of forms offered on the internet but in this blog post, we will focus on creating a web form in plain HTML.

An HTML form is composed of several form controls such as input, checkbox, dropdown, radio buttons, text fields, and buttons. Form controls can be programmed to ensure the specific formats of values entered by the user. Usually, all the form controls are paired with labels to shortly describe their purposes to the user.

For this tutorial you will need:

Your favourite code editor.

Your favourite web browser.

Note: No previous knowledge of programming is required.

1. Create an HTML file

Open your favourite code editor and create a new file. Name the file and save it using the .html extension.

2. HTML Declaration

All the HTML documents start with a HTML declaration. With the introduction of HTML5 the declaration code all the HTML documents start with:

<!DOCTYPE html>

The purpose of the declaration is to let the browser know the type of the document and the version of the HTML.

3. Structure the File

Every HTML file consists of two main parts:

Head: contains information about the document such as the title and any further extensions such as CSS, different script languages or meta tags.

Body: contains the document's content which is shown in the browser.

<!DOCTYPE html>

<html>

<head>

<title>Register Page</title> 



</head> 

<body>



</body>

</html>

4. HTML Form

All HTML forms begin with the <form> element. This element identifies the form within the HTML file. It contains two main attributes which configure the way the form behaves.

Action: defines the URL path the form will follow after the data is submitted

Method: defines the HTTP method (usually get or post) that the data will be transported to the client side.

<form action="/form-page-handling" method="post">

</form>

5. Register Form

This tutorial's registration form is a combination of different form controllers:

<fieldset>: It is used to group all the controls and labels used within this registration form.

<legend>: It provides a caption for the fieldset.

The input element offers a variety of types through different type attributes, some of which are used in the registration form.

<input type="text"> : It creates a basic single line inputs which are visible as the user types away.

<input type="email"> : It helps the user to enter or edit an email address.

<input type="password"> : It provides a secured way for user to type in the password.

<input type="date"> : It lets the user pick a date from the datepicker.

<input type="checkbox"> : It creates a box which can be checked when the user clicks on it

<input type="reset"> : It resets all the input fields.

<input type="text> required list="listname"> : It is a combination of two attributes which create a dropdown menu with several option. In order for the input element to be complete, a <datalist id="listname"> element is added to populate the dropdown menu with options.

6. User Validation

An important step before sending the data to the server-side is to make sure that all the required fields are filled out in the correct format. The user validation is the first step that catches any misinformation or wrong format in the form. It redirects the user towards the accepted format via the warning messages. The user validation in HTML can be coded through a combination of required, max length and pattern attribute.

The example below demonstrates the case where the user tries to enter numbers instead of letters in the first name input field. In this case, the user will get a warning message as the first name input controller has the respective attribute, required maxlength="32" pattern="[A-Za-z]{1,32}" which does not allow number format or blank field. Once the user fills out all the fields correctly, the user can submit the form through the register button. The data collected from the form will be sent to the server-side through POST or GET methods which involve different programming languages.

7. Execute the code

Double click the HTML file to see how the page is represented in the browser.

This article focused on creating a web form on plain HTML without any prior programming experience. The full code of the Registration Page can be found here and the form deployed here. As we can see from the screenshot above, HTML doesn't give a lot of options when it comes to page visualization. The second tutorial will focus on the visualization of a registration form using the Fundamental NGX Library. For more information, follow the Fundamental Library community.

UI5 Fragments and Dialogs - TypeScript

2022-06-15T13:02:03+02:00

Hi all,

Introduction

In the past I shared a blog post on how to combine Dialogs with Fragments in UI5: https://blogs.sap.com/2017/03/09/ui5-fragments-and-dialogs/ .

This is an approach which I still use today but in combination with TypeScript. Therefore, I’ve updated the code to TypeScript. Besides that, I also improved some aspects of it to gain more of the TypeScript benefits.

This new version comes with the following parts:

Dialogcontroller.ts: acts like a BaseController for dialogs

openFragment function: a reusable function to open dialogs which should be placed in the BaseController of views

Fragment and Controller of the dialog: dedicated fragment with the UI of the dialog and its own controller

Reusable dialog aspects

Add a Dialog controller

I added a “DialogController” which is similar to and extends from “BaseController” to my UI5 project. This is designed to act as a parent controller to every controller used for any dialog.

This controller is an abstract class that comes with an abstract function “onBeforeShow”. Every dialog that has a controller should implement this, this is similar as an onRouteMatched function and will be called every time the dialog opens (not only the first time on init, every time!). This function contains the following arguments:

viewController: this will be an instance of the controller (this.getView()) from where the dialog is being called

dialog: contains the instance of the current fragment and its controller (which should be the same as ‘this’)

resolve: instead of callback, I’m using a promise to return something when the dialog is being closed back from where it has been instantiated

data: it is possible to pass information when instantiating the fragment, for that “data” can be used

popoverSource: in case the dialog is being called as a popover it could be helpful to have the source from where it is being called

Next to that, it comes with a function to get a control in a fragment.

Full code of controller can be found on GitHub: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/DialogController.ts

openFragment function to BaseController

Just like in the first version, I added a function “openFragment” to the “BaseController” so every other controller can easily reuse this function.

The function is quite similar to the JavaScript version with some small changes, like the callback to promise and types of course 😊

It comes with the following arguments:

name: id or name of the fragment. In case only a name is provided it will try to find the fragment with the dialog using the same path as the view that calls “openFragment”

data: unknown object that can be used to pass data to the dialog. It will be forwarded to the “onBeforeShow” function

popoverSource: in case the function is being used for a popover we need to know the source to open the popover on the right place

The function will also try to find a controller with the same path as the fragment in the controller folder. If it is not able to find a controller it will use the controller of the current view.

Full code of the BaseController can be found here: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/BaseController.ts

Dialog implementation

Create Fragment and controller

Most of the time I create a dedicated controller for a dialog to keep logic of the dialog out of the controller of the view. This also makes the dialog with it functionalities reusable in other views.

Create the fragment that contains the dialog control and a controller. The controller should be located in the same subfolder structure in the controller folder like the fragment in the view folder:

Added a simple text field and a button to the dialog:

Code of the dialog fragment: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/view/dialog/About.fragment.xml

The controller for the dialog extends from the DialogController and implements the onBeforeShow function. This is the perfect location to reset previous filled in values to have a clean start when opening again.

It also contains all functions that are related to the dialog, which makes the dialog with its logic reusable.

The onClose will call the resolve function to let the controller of the view now that it’s closed and pass a value back.

This way, specific logic to the view can be implemented in the controller after calling the dialog:

Code of Dialog controller: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/dialog/About.controller.ts

Code to open the dialog

In the controller of the view, you can simply call the function “openFragment” with the required parameters. Wait until it is closed to do something view specifc.

As an example:

Code of App controller: https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/App.controller.ts

Result:

Full example can be found here: https://github.com/lemaiwo/UI5TypeScriptDemoApp

Secure Fiori App in SAP BTP with XSUAA

2022-06-27T09:46:11+02:00

Requirement is to have Managed App Router based Fiori app in SAP BTP- CF which is calling OData/web service(We have taken example of Northwind for this project) and add additinal authorization layer with the help of XSUAA to achieve in app authorization.

Here Node JS API and HTML5 modules are added in single MTA sharing instance of XSUAA

and communicating with the help of OAuth2UserTokenExchange type instance level destination.

Note: Destinations are created with help of MTA.yaml dependencies.

You can find complete project at GitHub

Step1:Create Basic MTA

Step2:Add Managed App Router

Right click on MTA.yaml and select create MTA Module from Template

Step3:Add Fiori/SAPUI5 Module in MTA

Step4:Add Node JS Module to add additinal layer for calling web service/OData.

Add Node JS module in MTA04 project to call Northwind service and add XSUAA Auth. Refer GitHub Project.

Below code you can refer for Node JS API which is calling Northwind service. Folder structure can be referred from Git project shared above.

const express = require("express");

const fetch = require("axios");

const app = express();

const port = process.env.port || 8080;

const { JWTStrategy } = require("@sap/xssec");

const xsenv = require("@sap/xsenv");

const passport = require("passport");



passport.use(new JWTStrategy(xsenv.getServices({ uaa: { tag: "xsuaa" } }).uaa));



app.use(passport.initialize());

app.use(passport.authenticate("JWT", { session: false }));



app.get("/", (req, res, next) => {

  res.send("Node Js Based Service With App Router for SAP BTP CF by Satyajit");

});



app.get("/PRD/Products", checkScope, async (req, res, next) => {

  var result;

  result = await fetch.get("https://services.odata.org/v2/northwind/northwind.svc/Products?$format=json")

  res.send(result.data);

});





function checkScope(req, res, next) {

  if (req.authInfo.checkLocalScope("read")) {

    next();

  } else {

    res.status(403).end("Forbidden");

  }

}

app.listen(port, console.log(`Listening on port ${port}`));

Step5:Make AJAX call to Node JS service.

sap.ui.define([

    "sap/ui/core/mvc/Controller"

],

    /**

     * @param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller) {

        "use strict";



        return Controller.extend("ns.mta04.mta04.controller.View1", {

            onInit: function () {

                let path = this.getOwnerComponent().getManifestObject()._oBaseUri._parts.path;

                var sUrl = path + "PRD/Products";

                //var oView = this.getView();

                var oTextModel = this.getOwnerComponent().getModel("textModel");

                //this.getView().setModel(oTextModel,"textModel");



                var oTable = this.getView().byId("idTabel01");



                jQuery.ajax({

                    url: sUrl,

                    method: "GET",

                    success: function (oResponse) {

                        debugger;

                        oTextModel.setData(oResponse.d.results);

                        oTable.setModel(oTextModel);

                        oTable.bindRows("textModel>/");

                        

                    },

                    error: function () { 

                        debugger;

                    }

                });

            }

        });

    });

View1.view.xml code

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m" xmlns="sap.ui.table" controllerName="ns.mta04.mta04.controller.View1" displayBlock="true">

    <m:Page id="page" title="{i18n>title}">

        <m:content>

<Table enableCellFilter="true" selectionMode="None"  visibleRowCount="15" id="idTabel01" rows="{textModel>/}">

                                <columns>

                                    <Column id="c1" width="25%">

                                        <m:Label text="Product ID" id="l1"/>

                                        <template>

                                            <m:Text text="{textModel>ProductID}" id="t1" />

                                        </template>

                                    </Column>

                                    <Column width="50%" id="c2">

                                        <m:Label text="Product Name" id="l2" />

                                        <template>

                                            <m:Text text="{textModel>ProductName}" id="t2" />

                                        </template>

                                    </Column>

                                     <Column width="25%" id="c3">

                                        <m:Label text="Unit Price" id="l3" />

                                        <template>

                                            <m:Text text="{textModel>UnitPrice}" id="t3" />

                                        </template>

                                    </Column>

                                    </columns>

                               

                            </Table>

        </m:content>

    </m:Page>

</mvc:View>

Adjust MTA.yaml as below.

_schema-version: "3.2"

ID: MTA04

version: 0.0.1

modules:

- name: API_NodeJS

  type: nodejs

  path: ./API_WITH_XSUAA

  requires:

  - name: uaa_MTA04

  provides:

  - name: srv-api-nodejs

    properties:

      srv-url: ${default-url}

  parameters:

    buildpack: nodejs_buildpack

  build-parameters:

    builder: npm-ci

- name: MTA04-destination-content

  type: com.sap.application.content

  requires:

  - name: MTA04-destination-service

    parameters:

      content-target: true

  - name: MTA04_html_repo_host

    parameters:

      service-key:

        name: MTA04_html_repo_host-key

  - name: srv-api-nodejs         

  - name: uaa_MTA04

    parameters:

      service-key:

        name: uaa_MTA04-key

  parameters:

    content:

      instance:

        destinations:

        - Authentication: OAuth2UserTokenExchange

          Name: api-nodejs-srv

          TokenServiceInstanceName: MTA04-xsuaa-service

          TokenServiceKeyName: uaa_MTA04-key

          URL: ~{srv-api-nodejs/srv-url}        

        - Name: MTA04_MTA04_html_repo_host

          ServiceInstanceName: MTA04-html5-app-host-service

          ServiceKeyName: MTA04_html_repo_host-key

          sap.cloud.service: MTA04

        - Authentication: OAuth2UserTokenExchange

          Name: MTA04_uaa_MTA04

          ServiceInstanceName: MTA04-xsuaa-service

          ServiceKeyName: uaa_MTA04-key

          sap.cloud.service: MTA04

        existing_destinations_policy: ignore

  build-parameters:

    no-source: true

- name: MTA04-app-content

  type: com.sap.application.content

  path: .

  requires:

  - name: MTA04_html_repo_host

    parameters:

      content-target: true

  build-parameters:

    build-result: resources

    requires:

    - artifacts:

      - nsmta04mta04.zip

      name: nsmta04mta04

      target-path: resources/

- name: nsmta04mta04

  type: html5

  path: mta04

  build-parameters:

    build-result: dist

    builder: custom

    commands:

    - npm install

    - npm run build:cf

    supported-platforms: []

resources:

- name: MTA04-destination-service

  type: org.cloudfoundry.managed-service

  parameters:

    config:

      HTML5Runtime_enabled: true

      init_data:

        instance:

          destinations:

          - Authentication: NoAuthentication

            Name: ui5

            ProxyType: Internet

            Type: HTTP

            URL: https://ui5.sap.com

          existing_destinations_policy: update

      version: 1.0.0

    service: destination

    service-name: MTA04-destination-service

    service-plan: lite

- name: MTA04_html_repo_host

  type: org.cloudfoundry.managed-service

  parameters:

    service: html5-apps-repo

    service-name: MTA04-html5-app-host-service

    service-plan: app-host

- name: uaa_MTA04

  type: org.cloudfoundry.managed-service

  parameters:

    path: ./xs-security.json

    service: xsuaa

    service-name: MTA04-xsuaa-service

    service-plan: application

parameters:

  deploy_mode: html5-repo

Step6:Deploy app to CF and add add to FLP service.

Right click on MTA.YAML and click on Build MTA Project.

Add Fiori Application to Fiori Launchpad service

** If Launchpad service is not available create new subscription.

Add App to group and Role. It will be available in FLP service.

Also app can be tested form HTML5 repo

Conclusion-

With this kind of scenario we can implement additinal authorization at BTP level.
We can use this project to call any S4 API also with the help of destination at subaccount level.

Please share your feedback.

Happy Learning!

Super Dynamic Scaling of SAP ITS Mobile Application Screens using HTML Viewport Meta Tag

2022-07-05T08:51:40+02:00

The ITS mobile application is a vital part of SAP when it comes to accessing SAP from remote locations, especially for scanning data from different types of handheld devices (HHD) using one application. Major challenges in developing ITS applications are related to the shape and size of application screens when we execute them from different resolution devices. To overcome this issue, I have proposed a solution that uses an HTML viewport meta-tag to dynamically scale the shape and size of the application screen. This blog explains how to use the Viewport tag to set ITS mobile application screens' shape and size dynamically based on device resolution.

Traditional Approach:

`<head><style>.MobileRow {zoom:200%}</style>`

In this approach, we can set the zoom percentage using the above syntax. But the screen will not be scaled automatically based on device resolution.

Source: https://blogs.sap.com/2019/04/25/super-easy-zooming-of-its-mobile-screens/

New Approach:

Syntax:

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

Width: Width can be set between 1 and 10,000. For dynamic scaling, it should be set to content="width=device-width.

Initial scale: This will set the initial zoom of the page. It should be set between 0.1 and 10.

Example:

`<head><meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">`

HTML Service - Example

With and Without Viewport:

With and Without Viewport

With this proposed approach, ABAP developers do not need to worry about the resolution of ITS application screens. Hence, the approach will reduce development time by automatically setting the application screen shape and size.

Finally, from an end-user point of view, screens will be more user-friendly.

I'm looking forward to hearing more about ITS resolutions. Feel free to comment and discuss.

Best regards, thanks for reading, stay healthy.

Abhijeet Tikar

Refer Below Links for HTML Viewport Meta Tag:

https://www.w3schools.com/css/css_rwd_viewport.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

UI5 Library TypeScript Generator

2022-10-11T07:49:10+02:00

Introduction

When building UI5 apps you will need to develop a custom UI5 control sooner or later. Doing this requires (or at least it is recommended to do so) to bundle those UI5 controls in a library. With TypeScript support for UI5 you do not only develop UI5 apps in TypeScript but most likely also UI5 Controls and libraries. For kickstarting your UI5 library and UI5 control there was no TypeScript generator yet, until now 😊.

Based on this TypeScript UI5 Library demo repository of Andreas Kunz and the already existing UI5 Library generator of Geert-Jan Klaps, I was able to create a TypeScript version of the UI5 Library generator.

TypeScript UI5 Libray and Control demo repo from Andreas: https://github.com/SAP-samples/ui5-typescript-control-library

UI5 Library generator of Geert-Jan: https://blogs.sap.com/2021/01/24/kickstart-your-ui5-library-development-with-the-ui5-library-generator/

Installation

The new TypeScript UI5 Library generator can be used from in the “Easy UI5” Generator, so you first have to install Yeoman:

npm i -g yo

The generator can be started with the following command:

yo easy-ui5 ts-library

Or just by selecting from the Yeoman menu:

Generate

In the “Easy UI5” generator you’ll find “ts-library”:

Answer all questions:

Once all is completed, it will generate the library and immediately start installing all npm dependencies. In case npm start results in an error, try running npm install again.

In the end, you’ll have the following project generated to kickstart developing UI5 Controls in TypeScript:

All config files are generated following the recommendations of SAP.

Run

Run the command “npm run start” to test the library:

This will open the test page to see your control:

With this you should be good to go for building UI5 controls and Libraries with TypeScript!

Help

Feel free to provide feedback or add improvements by using pull requests on the GitHub repo of the UI5 TypeScript Library generator: https://github.com/ui5-community/generator-ui5-ts-library

Third-party libraries in a UI5 TypeScript app

2022-10-25T07:17:31+02:00

Using third-party libraries might be a bit more complicated in UI5 with TypeScript. The solution to do this is way easier than you would expect. Around a year ago, Peter Muessig already shared the solution for this. Maybe you’ve already seen this blog post of Peter so you know how to use this:

https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/

It could be that you missed it or just didn’t know it also works for UI5 with TypeScript.

In this blogs, I want to point out that the same approach is valid for UI5 with TypeScript by providing a simple example.

Installation

Start by generating a new UI5 TypeScript app following the steps in this blog post:

https://blogs.sap.com/2021/07/01/getting-started-with-typescript-for-ui5-application-development/

As an example, I will add the third-party library “mobx” to my project by running the following command from in the project folder:

npm i -D mobx

For making this work in UI5 we need the UI5 middleware and builder taks “ui5-tooling-modules”. This one can also be installed with the following command:

npm i -D ui5-tooling-modules

Configuration

Once both are installed, configure the UI5 tooling to use the middleware and task by adding it to the UI5 dependencies:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/package.json#L40

Next, the “ui5-tooling-modules” task and middleware needs to be configured. Actually, you just have to add it as a task for the builder and as a middleware for the server configuration.

This will make sure that the app can load the third-party library when running and it will be added to the “dist” folder when building:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/ui5.yaml#L15

Consume

You are ready to use the third-party library like any other control/library of the UI5 framework, check line 5:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/src/controller/Main.controller.ts#L5

By importing “mobx” at the top, TypeScript will give me full autocompletion support with syntax checks in case of errors.

I’m simply using “mobx” to observe any changes in the JSONModel:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/src/controller/Main.controller.ts#L17

The view will simply show the value of the JSONModel:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/main/src/view/Main.view.xml

I also added a button that changes the value of the description which automatically updates the value thanks to “mobx”. Feel free to look a bit deeper into the project.

Run

Simply run “npm start” to test the app:

Result:

Build

Building the app is just as before by running the build script:

The only difference now is that it will also copy the “mobx” library from the node_modules into the “resources” folder of the app:

The build process will also handle the third-party library differently compared to UI5 controls/libraries to make it resolvable:

Deploy

All fine until here, you can run and build the app which will work perfect! Although this might fail when running this app from in a Fiori Launchpad on-premise or in BTP. Once deployed, the app will not be able to find the library as it will search in the resources folder. All requests to this folder are forwarded to the UI5 SDK.

As a solution you have to configure the build task as followed: “prependPathMappings”

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/ui5.yaml#L18

This will add UI5 config in the component.js which maps the third-party library with the path to the library in the project:

End

With this you should be good to go for consuming third-party libraries in UI5 with TypeScript.

More information regarding the task and middleware: https://www.npmjs.com/package/ui5-tooling-modules

The demo app: https://github.com/lemaiwo/UI5WithThirdPartyLib

UI5 Control Generator - npm version

2022-11-08T08:04:32+01:00

Introduction

A UI5 Control exists out of two parts, the control logic (including metadata) and the renderer. This last one defines the visualization of the control by writing JavaScript and will generate HTML at runtime. Writing the HTML by using JavaScript function is not straight forward in case of complex UI5 Controls. Although UI5 is going more and more to Web Components, we still need a control as a proxy for each web component. In both cases, it still makes sense to have a control generator as I made before in Web IDE:

Custom control generator: https://blogs.sap.com/2016/11/27/custom-ui5-control-generator-sap-web-ide-plugin/

Custom control generator version 2: https://blogs.sap.com/2018/09/04/ui5-control-generator-v2-sap-web-ide-template/

Since then, I never made time to migrate this to the new control renderer syntax or make it IDE independent. So, I was more than happy when robin.vanhethof reached out to me about the control generator. He really triggered me to give it second life and make a third version.

This time I did not want to have something that depends on any specific IDE. I wanted to follow the strategy of the UI5 tooling to make it IDE independent. As a solution I came up with an NPM package (VSCode plugin would be an option but would not be as open as NPM).

Installation

Install it as a npm dev dependency into your project:

npm install --save-dev ui5-control-generator

Usage

Provide any html file in your project and run the following script in your project from in a terminal or create a npm script:

npx ui5-control-generator --ns <project-namespace> --t TS

Example of a script: https://github.com/lemaiwo/TSDemoCustomControlGenerator/blob/f57d38663a2760456f87f62916032a6b1a05b750/package.json#L19

The tool requires the namespace of the project and the type of app (JavaScript or TypeScript) to be executed. It also has some optional parameters:

--ns, --namespace: namespace of the project (including the project name) which will be used for the name and namespace of the control

--t, --type: Define the type of syntax, JavaScript or TypeScript.

--p, --path: Optional parameter to define a specific folder to search for html files, default will search in all folders

--s, --split: Split Control logic and renderer in two files, default will split. Values can be true or false

--ow, --overwrite: Overwrite already existing files with the same name, default will not overwrite. Possible values can be true or false.

--loglevel: Set the console logging verbosity; options are: "error", "warn", "info", "debug", "trace"; default level is "info"

Provide any html file that contains the html for the control in your project. I do this in the control folder where I would like to have the control, e.g.:

https://github.com/lemaiwo/TSDemoCustomControlGenerator/blob/main/src/control/BusinessCard.html

After running the script, you have the control files generated in the same folder as the html file. For TypeScript you will also have to run ‘@ui5/ts-interface-generator’ for generating the types of the control:

https://github.com/lemaiwo/TSDemoCustomControlGenerator/tree/main/src/control

Result

The result is not completely finished but already shows the functionality of the generator:

Resources

Control generator GitHub: https://github.com/lemaiwo/ui5-control-generator

Control generator on NPM: https://www.npmjs.com/package/ui5-control-generator

Demo app JavaScript: https://github.com/lemaiwo/TSDemoCustomControlGenerator

Demo app TypeScript: https://github.com/lemaiwo/TSDemoCustomControlGenerator

Contribution

Feel free to contribute and improve the control generator.

Control generator GitHub: https://github.com/lemaiwo/ui5-control-generator

Deploy the UI5 Fiori app on SAP ABAP repository with BAS & WEBIDE, create Fiori app Tile using Launchpad Designer

2023-02-24T18:17:13+01:00

Hello,

In this blog we will learn How to deploy the Ui5 Fiori app on SAP ABAP repository with BAS & WEBIDE, also learn about fiori app tile creation in launchpad designer.

What is SAP UI5

SAP ui5 is a framework, it consists of Libraries. Used for Creating responsive apps.

Fiori Launchpad

SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.

Fiori launchpad is responsive because it adapts the layout in the Device Screen.

Prerequisites

User must have access to SAP Logon.

User must have access of TCodes: SE80, /ui2/flp, /ui2/flpd_cust, /ui2/FLPD_CONF, /ui2/_FLPCM_CUST, /ui2/FLCM_CONF, /ui2/semobj, PFCG

You access to SAP BTP Cockpit.

Deploy the Fiori app using Business application Studio (BAS)

SAP Business application studio is a cloud based developer tool to develop UI based applications

Launch the BAS from Cloud cockpit

2. Select your desired project –> open the Terminal –> Go to the Project Dir (cd project dir) –> run the command ‘npm run deploy-config’ or ‘npx fiori add deploy-config’.

3. Give the required information

Choose the Target --> ABAP

Select the Destination (If destination is not created, create a destination on SAP BTP Cockpit)

Provide the SAPUI5 ABAP Repository Name and Description.

Provide the Package detail

Provide the Transport Request and execute the command "npm run deploy".

You will get a message "SAP UI5 Application has been uploaded and registered successfully".

4. Go to the given link and check the deployed fiori app

5. Now you will get the Fiori app on SAP system.

Deploy the Fiori app using WEBIDE

Go to the WEBIDE, right click on your project --> Select Deploy --> Choose your System (Deploy to SAPUi5 ABAP Repository)

2. You will be on next page (Deployment Option), Here select your required ABAP or Cloud system --> Next.

Note: If you are deploying first time, select Deploy a new application. Else application is already deployed, select update an existing application

3. Provide application Name, Description, Package, in - Deploy a New Application Screen and select Next.

4. If the selected package is local, Choose Finish. If it requires TR, select TR for your application.

A notification message displays once the application is deployed successfully.

5. Go to SAP Logon Pad --> Tcode SE80 --> Select BSP Application from Dropdown --> find your deployed application.

Steps to create a Tile and Target mapping in Fiori launchpad Designer

Create Semantic Object using TCode - /n/ui2/semobj.

Click on Edit Button

Select New Entries.

Provide the new Semantic Object, Object Name and Description and Click on Save Button.

2. Go to SAP LogOn --> Execute the TCode - /ui2/FLPD_CUST (Launchpad Designer).

3. Click on Setting Button --> Select the TR --> choose Ok.

4. If catalog information is not available, create a catalog --> Click on Plus Button --> provide the required information --> click on Save.

5. If catalog already exist, select the catalog --> Click on Add tile plus Button.

6. Select a Tile template, here I am going to select App launcher - Static.

7. Provide the Title, information, Semantic Object, Action and other required Information Click on Save Button.

8. Create a Target Mapping à Go to Target Mapping à Click on Create Target Mapping.

9. Provide the required information Semantic Object, Action, Title, URL, ID and Click on Save Button.

Note: How to get URL --> Go to the WEBIDE --> your project --> manifest.json file --> Find the URL info.

How to get ID: Go to the WEBIDE --> your project --> manifest.json file --> find the ID.

10. The Fiori app tile has been created successfully. Go to Fiori launchpadv --> App Finder --> Search your application.

Note: If Fiori app is not found on Fiori Launchpad à we have to assign the PFCG Role for catalog and contact security team to assign the Role.

Conclusion

The Fiori app has been deployed on SAP ABAP repository. The Fiori app tile has been created.

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

Keep learning & Keep Sharing!!

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>"}]' 
    httpHeaders: '[{"Content-Security-Policy":"frame-ancestors <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.

SAP Community - HTML5

Consuming ABAP Odata in SAP BAS (Business Application Studio)

Introduction:

Conclusion

Setup for SAP S/4HANA side-by-side UI Extension on SAP BTP

Introduction

Business Case

Mission Content

Links:

Web Page with Hyperlink to SAP GUI Transaction

Step 1: Find the correct ok-code

Method 1: Download an SAP shortcut file

Step 2.1: Create SAP shortcut file

Step 3.1: Create download link to SAP shortcut file

Method 2: Configure a Custom URL

Step 2.2: Start SAP GUI transaction via SAPshortcut

Step 3.2: Register protocol handler in Windows registry

Step 4.2: Create a HTML page

Conclusion

Build, Deploy and Reuse html5 applications

SAP Fiori Launchpad

STEP 1: Binding process

STEP 2: Creation of service instance in consumer account

STEP 3: Creation of destination in consumer account

STEP 4: Subscription to SAP Fiori Launchpad in consumer account

Application Router

STEP 1: Add app-host id into your user provided service

STEP 2: Create service instance and ensure from view credentials your app-host id is visible.

STEP 3: Bind App router

STEP 4: Ensure application is being redirected to your html5 application with the app router url

Summary

Web Form in Plain HTML

1. Create an HTML file

2. HTML Declaration

3. Structure the File

7. Execute the code

UI5 Fragments and Dialogs - TypeScript

Introduction

Reusable dialog aspects

Add a Dialog controller

openFragment function to BaseController

Dialog implementation

Create Fragment and controller

Code to open the dialog

Result:

Secure Fiori App in SAP BTP with XSUAA

Step1:Create Basic MTA

Step2:Add Managed App Router

Step3:Add Fiori/SAPUI5 Module in MTA

Step4:Add Node JS Module to add additinal layer for calling web service/OData.

Step5:Make AJAX call to Node JS service.

Step6:Deploy app to CF and add add to FLP service.

Add Fiori Application to Fiori Launchpad service

Conclusion-

Happy Learning!

Super Dynamic Scaling of SAP ITS Mobile Application Screens using HTML Viewport Meta Tag

UI5 Library TypeScript Generator

Introduction

Installation

Generate

Run

Help

Third-party libraries in a UI5 TypeScript app

Installation

Configuration

Consume

Run

Build

Deploy

End

UI5 Control Generator - npm version

Introduction

Installation

Usage

Result

Resources

Contribution

Deploy the UI5 Fiori app on SAP ABAP repository with BAS & WEBIDE, create Fiori app Tile using Launchpad Designer

What is SAP UI5

Fiori Launchpad