Technical details about the embedded operation of SAPGUI transaction code in Fiori Launchpad

The author's previous article, what kind of ABAP system can run Fiori applications once mentioned that we can put the traditional transaction code in SAP GUI into SAP Launchpad to start, and run it in the browser.

This is the interface of the transaction code SE80 running in the browser:

The author first noticed this practice of running the transaction code in the SAP GUI in the browser, when I found the Create Material tile in Fiori Launchpad during the daily work test.

Recall that the native Fiori application, no matter what click operation we perform on the page, will not jump to a brand new page, that is, will not open a new browser window or a new tab page—— For Fiori native applications, all user operations are completed in one page, and page switching is completed through the router component of SAP UI5, which is a typical feature of Single Page Application.

On the contrary, when I click on Create Material tile in the picture above, the launched application is opened and operated in another new Chrome tab. Please pay attention to the newly opened tab in red in the above picture.

This shows that the application behind this Create Material tile is not a Fiori native application developed based on SAP UI5.
So what technology was it developed with? Look closely at the url:

https://<hostname>:44311/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=928&sap-language=EN#Material-create?sap-ui-tech-hint= GUI
Found this snippet: sap-ui-tech-hint=GUI

This implies to us that the UI of the application is drawn based on SAP GUI.
We open the application in the browser:

Compare the interface of the application in the figure above with the interface of the S/4HANA material master data creation transaction code MM01 in the SAP GUI:

It is found that except for the appearance style, the field names, positions and layouts of the two are exactly the same. Combined with the results we have observed, it is clear that the application pointed to by this Create Material tile is wrapped based on the MM01 transaction code in the SAP GUI.

Open the tile in the browser and record the Fiori Catalog ID to which the tile belongs in the Chrome developer tools: SAP_CMD_BC_PR_MAINT

Open the corresponding catalog according to the ID in Fiori Launchpad, and find that there are several jump objects related to Material, all of which are Transaction in SAP GUI:

The url fragment we found earlier, sap-ui-tech-hint=GUI, is configured here:

The jump destination transaction code ID MM01 is configured here. At the same time, Device Types only supports the desktop, which is no problem, because the interface rendered by the SAP GUI through the browser does not have the function of responsive layout like SAP UI5, so it can only run in the desktop browser.

At runtime, once the SAP UI5 framework code parses the value of the sap-ui-tech-hint parameter to GUI, the corresponding rendering logic is executed.

In the Sources tab of Chrome Developer Tools, you can see the path fragment gui/sap/its.

ITS stands for Internet Trasaction Server, a very old technology in SAP Netweaver. The components provided by this technology can parse the metadata of the screen developed by SAP GUI technology and render it into HTML, so that the transaction code of SAP GUI can be run in the browser. in the device.

For more information on SAP ITS in SAP NetWeaver Application Server, please refer to the SAP help documentation .

It is also easy if we want to experience ITS. SICF transaction code, enter webgui, execute:

It is found that this node is located just under the its node which is being discussed in this article:

Right click on the webgui and select Test Service:

A browser window pops up automatically, and the displayed page is the same as the initial page displayed after logging in to the system using SAP GUI.
Next, you can enter the transaction code in the browser and execute it like using the SAP GUI. For example, SE38 enters the ABAP editor:

The following describes how to place transaction code SE80 on SAP Fiori Launchpad and run it in the browser.
The SAP UI5 version number on which this article is based is 1.38.9:

According to the feedback from English bloggers, it passed the test on UI5 1.52.1 and S/4HANA 1709.

Suppose we want to configure the tile that starts the SE80 application on the Fiori Launchpad to this catalog named "SAP Fiori Extensibility",

First, you can open the Chrome developer tools, refresh the page, open the HTTP request generated by the Fiori page loading in the Network tab, and copy the catalog ID of the above image in the request body: SAP_FIORI_EXTENSIBILITY.

If you don't want to use Chrome developer tools, you can also log in to the background directly, and you can also find this ID by querying the PFCG role assigned by the logged-in user:

Open Fiori Launchpad Designer, enter the catalog ID you just found, open it, and create a new tile:

Maintain tile title, Semantic Object, Action and parameters.

Save the tile, automatically generate a url, and after clicking the tile, the newly opened browser window will load it.

Next we need to specify the target object (Target Mapping) to jump to after the tile is clicked:

In the Intent, select the Semantic Object and Action that were maintained when the tile was created. In the Target area, select the Transaction for the Application Type. Only in this way can the transaction code in the SAP GUI be opened in the browser. The Transaction field is maintained as SE80.

After saving, you will see a newly generated record in the Target Mapping list:

The last step is to configure the new tile into the SAP Fiori Extensibility catalog.

Click on Tile, and the SE80 transaction code can be opened in the browser as we expect.

Note that the transaction code opened in this way is actually running on the gateway system where the Fiori Launchpad is deployed. If your Fiori solution, the gateway system and the backend system are two different servers, you need to maintain a record in SPRO Manage SAP System Aliases, through which a System Alias is mapped to a system created in SM59, pointing to the backend system RFC Destination. Suppose this Alias is named S4CMD:

Then maintain the Alias in the Target Mapping of the tile.

Summarize

In the first half of this article, we first introduce the technical principle of embedding the traditional SAPGUI transaction code into Fiori Launchpad and running it in the browser. Detailed steps to configure it to Fiori Launchpad.