How to open SAPUI5 app in the same tab

How to open the UI5 app in the same tab?  In fact, the app opening in a new tab is in line with the new Fiori UX guidelines. If you want to revert to the previous behaviour, follow the steps below.

  • Go to transaction LPD_CUST.
  • Add the following to the Additional Information.


2018-02-16 10_42_32-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)


Deploy SAPUI5 application into Fiori Launchpad

To deploy a SAPUI5 application, follow the steps below.

Step 1: Upload the SAPUI5 application as a BSP application.

This is outlined here.

Step 2: Create launchpad role in transaction LPD_CUST.

  • Open transaction LPD_CUST.

2018-02-07 21_05_08-Overview of Launchpads

  • Click on New Launchpad.
  • Enter the Role, Instance (TRANSACTIONAL) and Description.

2018-02-07 21_08_57-

  • Click on Ok and confirm that a namespace is not required.


2018-02-07 21_09_23-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)

  • Click on New Application.
  • Enter the details shown below. In the Application Parameter section, click on the Edit icon and input the url of the BSP application.

2018-02-07 21_17_18-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)

  • Click on the button “Show Advanced (Optional) Parameters“.

2018-02-07 21_18_16-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)

  • Click on the Edit icon for Application Alias and enter zwalkthrough.

2018-02-07 21_20_22-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)

  • Click on Save and the launchpad instance will be created.

2018-02-15 18_16_56-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)


Step 3: Create a semantic object in /UI2/SEMOBJ

  • Open the transaction /UI2/SEMOBJ.
  • You will get a message that the table is cross-client. Click on OK.

2018-02-07 21_43_32-Change View _Semantic Objects - Customer View__ Overview

  • Click on New Entries and enter the following information.

2018-02-15 18_26_40-Display View _Semantic Objects - Customer View__ Overview

  • Save the changes into a transport request.


Step 4: Create a tile in the Fiori Launchpad

  • Open the Fiori Launchpad Designer using the url below.


  • Create a new catalog by clicking on the Plus icon at the bottom of the left-hand side pane.

2018-02-16 08_56_22-

  • Enter the following details:
    • Title: Walkthrough Catalog
    • ID: ZWalkCatalog

2018-02-16 09_00_17-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Click on Save. The new catalog is saved and now appears as shown below.

2018-02-16 09_13_43-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Next, create a target mapping.

2018-02-16 09_20_29-

  • Click on the following icon.

2018-02-16 09_21_47-

  • Enter the information shown below.

From the drop-down list for Application Type, choose SAP Fiori App using LPD_CUST.

2018-02-16 09_26_47-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)

  • Click on Save.

2018-02-16 09_27_08-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • The saved target mapping will appear in the right-hand pane.

2018-02-16 09_27_23-Change Launchpad - Role_ ZPRAVCUST Instance_ TRANSACTIONAL (EN)

  • Next, create a static tile.

2018-02-16 09_32_20-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=2018-02-16 09_33_00-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Enter the following information and click on Save.

2018-02-16 09_38_10-Display View _Semantic Objects - Customer View__ Overview

  • The new tile will appear in the catalog.

2018-02-16 09_39_19-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Next, create a group. Click on the Groups tab on the left-pane.
  • Click on the Plus icon (Create Group) at the bottom of the left-pane.
  • Enter the following information.

2018-02-16 09_43_29-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Click on Save.

2018-02-16 09_55_11-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Add the catalog to the group. Click on the Add Tile icon. Select the catalog created earlier and Click on the Plus icon. It will turn to green to indicate that it was added successfully.

2018-02-16 10_01_55-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • The group will now show the new tile.

2018-02-16 10_03_27-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=


Step 5 : Create a PFCG role.

  • Go to transaction PFCG.
  • Enter a name for the role and click on the button Single-Role.

2018-02-16 10_08_56-Change Roles

  • Go to the menu tab.
  • From the Insert Node drop-down list, choose SAP Fiori Tile Catalog. Select the catalog and click on OK.

2018-02-16 10_14_15-

  • Add the group by using the Insert Node again.

2018-02-16 10_17_00-

2018-02-16 10_17_46-Change Roles

  • Add the user in the User tab and click on Save.

2018-02-16 10_19_09-Change Roles


Step 6: Test the application in the Fiori Launchpad.

  • Open the Fiori launchpad by using the url below.


2018-02-16 10_22_01-Home - Opera

  • Click on the tile to open the SAPUI5 App.

2018-02-16 10_23_01-https___localhost_44300_sap_bc_ui5_ui5_sap_zwalkthrough_index.html - Opera

How to delete a custom catalog in the Fiori Launchpad Designer

Normally, when you look at the Fiori Launchpad Designer, the option to delete a custom catalog is now visible. Below is how you can do it.

  • Select the custom catalog by clicking on it.

2018-02-16 09_04_23-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Drag the selected catalog. Two coloured icons will appear at the bottom of the pane.
  • Drop the selected catalog on the delete (red) icon.

2018-02-16 09_06_27-

  • A Confirmation dialog box will appear.

2018-02-16 09_08_19-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=

  • Click on OK to confirm the deletion. The message below will appear showing that the deletion was done successfully.

2018-02-16 09_08_31-https___localhost_44300_sap_bc_ui5_ui5_sap_arsrvc_upb_admn_main.html_sap-client=



Installing Node.js on Windows

Ensure that you have installed git-bash from the site

Open the command prompt in Windows.

  • Go to the website .
  • Download the latest version (version 9.5 as of today 12-feb-2018).
  • Double-click on the msi installer and accept license agreement and all the defaults.
  • Click on Finish to complete the installation process.

Verify the installation

The windows command prompt can be used or git-bash can be installed on Windows. Below, we have used git-bash.

  • Type the commands below on git-bash to check the installation of Node.js.

node -v


There are 2 ways to run Node.js: either by the Node shell or writing JavaScript files and executing those.

The Node Shell

2018-02-13 05_51_24-MINGW64__c_Users_Pravin

Running Javascript files

write the following code into a file hello.js

console.log( ‘hello world’);

  • Save and run the file as follows from the terminal (git-bash or windows command prompt):

node hello.js


Windows Subsystem for Linux – install Ubuntu with xfce

Here are the steps to install Ubuntu on Windows 10 using Windows Subsystem for Linux (WSL).

  • On Windows 10, go to Settings.
  • Type insider and press enter.
  • Activate the developer mode.

2018-02-09 22_22_22-Settings

  • Still the Settings panel, type Windows Features. From the drop down, select Turn Windows Features on or off.

2018-02-09 22_29_42-Windows Features

  • Click on the Windows Start menu icon and type bash. Press Enter.

2018-02-09 22_31_46-C__Windows_System32_bash.exe

Windows Subsystem for Linux has no installed distributions.
Distributions can be installed by visiting the Windows Store:
Press any key to continue…

2018-02-09 22_37_30-Microsoft Store

  • Click on Ubuntu.

2018-02-09 22_38_59-Microsoft Store

  • Click on Get.

This slideshow requires JavaScript.

  • Once installed, click on Launch.
  • Type a username and password.

This slideshow requires JavaScript.

  • Once you get to the terminal prompt, type the following commands.

sudo apt-get update
sudo apt-get upgrade

Now, the terminal bash can be run on Windows.

2018-02-10 09_47_40-pravin@DESKTOP-S7EGKR1_ _mnt_c_Windows_System32

Now to install xfce, follow the following steps.

  • On the bash terminal type the command below.

sudo apt install xfce4

  • In case there are errors, rerun the same command to continue the installation.


  • Edit the .bashrc file as follows.

nano .bashrc

  • Append the line below.

export DISPLAY=:0.0

  • Once done, go to the website
  • Download the installer, the latest at this time is vcxsrv-
  • Double-click and install the program.
  • Start XLaunch from the Windows desktop shortcut.

2018-02-09 23_35_14-Display settings

  • Choose “One large window” option.

2018-02-09 23_36_44-Client startup

  • Leave the default options and choose Disable access control.

2018-02-09 23_36_56-Extra settings

  • Click on Next and finish.

2018-02-09 23_37_42-Finish configuration

A black window will appear. Do not close it. This is the application window in which Ubuntu will run.

  • Go back to the bash terminal and type the next command.



2018-02-10 10_09_00-pravin@DESKTOP-S7EGKR1_ _mnt_c_Windows_System32

The XLaunch window will show the Ubuntu with the xfce Display Manager.

2018-02-10 10_09_21-VcXsrv Server - Display DESKTOP-S7EGKR1_0.0


Note: I got some errors. So, I installed the xubuntu desktop with the command below.

sudo apt-get install xubuntu-desktop -y

The application menu bar does not start.

Open the bash terminal inside ubuntu and type the command below.

xfce4-panel &

2018-02-10 10_17_30-VcXsrv Server - Display DESKTOP-S7EGKR1_0.0

Close the bash terminal.

Now you can use the Applications menu without any problems.

2018-02-10 10_23_30-Mail




Deploy a UI5 application to AS ABAP using report /UI5/UI5_REPOSITORY_LOAD

Once you have created your SAPUI5 or FIORI app in Eclipse, the project can be uploaded into the SAPUI5 repository as a BSP application.

The ABAP report /UI5/UI5_REPOSITORY_LOAD can be used to upload the UI5 application.


  • Execute the report /UI5/UI5_REPOSITORY_LOAD in se38.
  • Enter the Z name for the SAPUI5 App.
  • Choose Upload.

2018-02-06 23_34_01-Upload, Download, or Delete Apps to or from SAPUI5 ABAP Repository

  • Execute.
  • A dialog box will appear prompting to enter the application source directory.
  • Enter the Eclipse project source directory, WebContent, and click on OK.
    • A summary of the objects to be uploaded is displayed.

2018-02-06 23_18_59-Load SAPUI5 Application from File System to the SAPUI5 ABAP Repository.

  • Click on the green highlighted link.
    • The files are now uploaded.
  • The following is shown in the status bar.

2018-02-06 23_24_47-Upload, Download, or Delete Apps to or from SAPUI5 ABAP Repository

  • Check the BSP application zwalkthrough in se80.

2018-02-06 23_27_35-Web Application Builder_ Edit Page ZWALKTHROUGH

  • Fix the src location of the file sap-ui-core.js if needed to


  • Also, check the service name zwalkthrough in SICF.

2018-02-06 23_25_35-Define Services

  • Right-click on choose Test service.

2018-02-06 23_48_03-Define Services

  • The application runs successfully in the browser.

2018-02-06 23_47_19-localhost_8000_sap_bc_ui5_ui5_sap_zwalkthrough_index.html_sap-client=001





ABAP Reports to upload a SAPUI5 app to or download from the SAPUI5 repository

There are 3 reports to upload, download or delete SAPUI5 to the SAPUI5 repository in AS ABAP.

    • To upload or download a single SAPUI5 application
    • To upload or download a single SAPUI5 application from a zip or war archive
    • To upload or download multiple SAPUI5 applications from a zip or war archive

Note: Unlike the ABAP team repository provider, these ABAP reports do not support code merge. Hence, a third-party tool like git might be used.