Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Hello Everyone,

In this blog, we will get to know about deploying any custom SAPUI5 application into SAP Fiori launchpad.


  1. User must have access to SAP Logon.

  2. User must have access of TCodes: SE80, /UI2/FLP, /UI2/FLPD_CUST, /UI2/FLPD_CONF, /UI2/_FLPCM_CUST, /UI2/FLCM_CONF, /UI2/SEMOBJ, PFCG.

  3. User must have access to SAP BTP Cockpit, Business Application Studio(BAS) or SAP Web IDE.


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


  • Right-Click on your project

  • Navigate through Deploy -> Deploy to SAPUI5 ABAP Repository as shown below:

  • Click on Deploy to SAPUI5 ABAP Repository.

  • A new pop-up window will appear as shown below

  • Now navigate through Deployment Options -> Deploy A New Application -> Select Transport Request -> Confirm by providing all the required information.

  • Now your SAPUI5 application has been deployed into SAPUI5 ABAP Repository as a BSP application.



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_12.png2018-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(TR).


Step 4: Create a tile in the Fiori Launchpad

  • Open the Fiori Launchpad Designer using transaction /n/UI2/FLPD_CUST.

  • 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 by clicking on Plus(+) icon as shown below:

  • 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 using transaction /n/UI2/FLP.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

  • Your SAPUI5 application will now be loaded in SAP Fiori Launchpad as shown above.



I would like to conclude that by reading this blog post you will learn how to deploy an SAPUI5 application into SAP Fiori Launchpad. Your feedback is valuable to me so please do share your feedback and thoughts in the comment box.

You can refer to other resources on SAP Fiori using the following links:

SAP Fiori Topic Page  SAP Fiori

Ask questions about SAP Fiori and follow Ask Questions

Read other SAP Fiori blog posts and follow Other Blog Posts

Please follow my profile for future posts mazhar74258


Thanks and Regards,

Mazhar Ansari

Labels in this area