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.

managed=FioriWave1

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

Advertisements

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_12.png

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.

https://localhost:44300/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

  • 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.

https://localhost:44300/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

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=

 

Create an Alias for the Fiori Launchpad

The Fiori Launchpad is quite lenghty. It is difficult to remember it and users always have to use pre-defined shortcuts.

https://localhost:44300/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

To make it easier for all users, you can create an external alias.

Steps

  • Open tcode SICF.
  • Enter Service for Hierarchy type and execute.

32.png

Select External Aliases.

33.png

  • Right-click your host and choose Create External Alias.

34.png

  • In the field External Alias, enter /fiori. This will be the shortcut to be used. In the Trg Element tab, select the target handler /sap/bc/ui2/flp by double-clicking.

36.png

  • Enter a description and save.
  • Use the hostname and alias to open the FLP as follows:

https://localhost:44300/fiori/

Screenshot_20171226_163543.png

Connection to Fiori Launchpad from NWBC

Here is how you create a connection to the Fiori Launchpad from NetWeaver Business Client 6.5 (NWBC). Note that I have installed SAP NetWeaver 7.51 SP02 in VirtualBox as a VM.

Port forwarding for the virtual machine will be as follows:

31 port forwarding.png

  • Edit your Windows hosts file and ensure that the localhost entry contains the fully qualified domain name. Otherwise, you will get an Invalid URL message when creating the connection.

127.0.0.1 localhost vhcalnplci.dummy.nodomain

  • In NWBC, open the System Selection dialog box.
  • Click on New.
  • Select New System Connection (Fiori Launchpad).

29-2.jpg

  • Select User-specified System.
  • Enter a Name and URL. The URL for the Fiori Launchpad is as follows.

https://vhcalnplci.dummy.nodomain:44300/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

30.png

  • Click on Finish.