How to Add a WebGUI for HTML App to Fiori Launchpad Step-by-Step

www.sap.com

How to Add a WebGUI for

HTML App to Fiori
Launchpad Step-by-Step
SAP NetWeaver (7.5) – Gateway

Wilson Wei
Document Version Authored By Description Date Created
1.0 Wilson Wei Fiori white paper October 30, 2016

Document Version Reviewer Description

Ali Chalhoub Global Support Architect October 31, 2016

2
TABLE OF CONTENTS
ABSTRACT .....................................................................................................................................................4
CHAPTER 1 CREATING A HTTP RFC DESTINATION TO BACKEND SERVER ..........................................................5
Creating a HTTP RFC Destination to Backend Server................................................................................................. 6
CHAPTER 2 CONFIGURING WEBGUI FOR HTML APP IN LAUNCHPAD DESIGNER ...............................................9
Configuring WebGUI .................................................................................................................................................. 9
Creating semantic object ......................................................................................................................................... 11
Configuring App in Launchpad Designer ................................................................................................................. 13
Configuring Group ................................................................................................................................................... 17
Assigning Catalog to the Role .................................................................................................................................. 19
Assigning Group to the Role .................................................................................................................................... 22
CHAPTER 3 TESTING FIORI APPLICATION ...................................................................................................... 26
Logging on to Fiori Launchpad ................................................................................................................................. 26
Testing Fiori Tile application .................................................................................................................................... 26

3
Abstract
Chapter 1 - Creating a HTTP RFC Destination to Backend Server
1.1. Creating a HTTP RFC Destination to Backend Server

Chapter 2 - Configuring WebGUI for HTML App in Launchpad designer

2.1. Configuring WebGUI

2.2. Creating semantic object
2.3. Configuring App in Launchpad Designer
2.4. Configuring Group
2.5. Assigning Catalog to the Role
2.6. Assigning Group to the Role

Chapter 3 - Testing Fiori Application

3.1. Logging on to Fiori Launchpad

3.2. Testing Fiori Tile application

4
 Chapter 1
Creating a HTTP RFC Destination to Backend Server

Welcome to white paper ‘How to add a WebGUI for HTML App to Fiori Launchpad step-by-step’. In this white
paper you will find all the details are needed to let you add a WebGUI for HTML App to Fiori Launchpad.

In this case, I use the HTTPS connection, if you want to use HTTP connection, please use
Note
HTTP port and set the SSL to inactive

 NetWeaver 7.5 or higher to be installed and configured. NetWeaver 7.5 already

Requirement comes with SAP Gateway, SAP_GWFND 7.5 SP04 and SAP_UI 7.5 SP04
 SSL has already been configured

Caution If you are using embedded system , you can skip this chapter

5
Creating a HTTP RFC Destination to Backend Server

1. Log on to Frontend system and run transaction code SM59 then click on the create icon

Figure 1 - Configure RFC connection

2. Input the following information and then click on the green check button

RFC Destination: <system id>CLNT<client>_HTTPS

Connection type: H

Figure 2 - Create RFC destination

3. Once click on the green check button , the following screen will display then input the following
information：

Target Host: Backend Server hostname

Service NO.: HTTPS port number

6
 Figure 3 - Define a HTTPS connection
4. Next select Logon & security tab and click on Trust Relationship
5. Read the Caution and click on Yes button

Figure 4 - Configure Logon & security

7
6. Check the Current User and set the SSL Active then save and test the connection

Figure 4 - Connection profile screen

Note if you use HTTP connection, please set the SSL inactive

7. Ensure the Status HTTP Response is 404

Figure 5 - Connection test result

8
 Chapter 2
Configuring WebGUI for HTML App in Launchpad designer

Configuring WebGUI

Before adding a WebGUI for HTML App to Fiori Launchpad, please ensure that the WebGUI works properly
without Fiori Launchpad.
1. After log on to the Backend system, in the command field type SICF

Figure 7 - Define service

2. Enter the path /sap/bc/gui/sap/its/webgui then press Execute

Figure 6 - Define service

9
 3. Click Activate Service

Figure 7 - Activate service

4. Click on the second Yes button

Figure 8 - Activate service.

5. Repeat the steps to activate the following ICF nodes
/sap/public/bc/ur
/sap/public/bc/its/mimes
6. Run transaction code WEBGUI, make sure it works properly

10
Creating semantic object

In this case I will launch transaction code: WEBGUI from Fiori Launchpad, so I will create a semantic object
named WEBGUI

1. Log on to Frontend system and run transaction code /N/UI2/SEMOBJ then click on change button to
create a semantic object

Figure 11 - Access /N/UI2/SEMOBJ

2. You will see the following screen, click on the green check button

Figure 12 - Create semantic object

11
3. Click on the New Entries button

Figure 9 - Add new entries

4. Input the following information then save

Figure 14 - Add new entries

5. The following screen will display then click on the green check button

Figure 10 - Add new entries

12
Configuring App in Launchpad Designer

Next we need to access Launchpad Designer in order to create a Catalog and a Group. To access Fiori Launchpad
Designer, follow the following steps:
Fiori Launchpad Designer has the following URL format:
http(s)://<HOST-NAME>:PORT/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
1. Input the user ID and password to log on to Launchpad designer

Figure 16 - Fiori Launchpad Designer logon screen

2. After log on to Launchpad Designer, click on the Plus sign to create a catalog

Figure 17 - Add a Catalog

13
3. Give the Catalog any name and any ID, and click on Save button.

Figure 18 - Give a Catalog name and ID

4. Now we should see the following screen then click on Create Target Mapping

Figure 19 - Create Target Mapping

5. Input the following information then save

Semantic Object: the semantic object created for the transaction code
Action : display
Application Type: we launch a transaction code from Launchpad so select Transaction here
Title : give a name for the App

14
 Transaction: Input the transaction code
System Alias: The same as the first part of the RFC destination which you defined in chapter 1

For example, you defined the RFC destination in your Frontend system,
which is T01CLNT001_HTTPS, so you have to use ’T01CLNT001’ as your
Note system alias.
If there is any difference with the first part of the RFC destination, it will
navigate to Local system.

Figure 20 - Create Target Mapping

6. After creating the target mapping, click on the Tiles, then click on the blank tile with the plus sing in the
middle in order to create a new tile as shown below:

Figure 21 - Create a new tile

15
7. Click on App Launcher – Static tile as shown below:

Figure 22 - Select Fiori template

8. Now we have to configure our tile then save

Title: your tile Title

Subtitle: another subtitle(This is optional)
Key words: the key words of the tile
Information: the information of the App (this is optional )
Semantic Object: it should be the same to what you configured in the target mapping
Action: it should be the same to what you configured in the target mapping

Figure 23 – Configure the tile

16
Configuring Group

Next we need to create a group. To do that, follow the following steps:

1. Click on Groups then click on the bottom plus sign to create a new group as shown below:

Figure 24 - Create a new group

2. Give your group a title and an ID as shown below then save

Figure 25 - Give a group title and an ID

17
3. After clicking on save button, click on the plus sign to assign the App to the group

Figure 26 - Group has been created

4. From the Catalogs list select WebGUI for HTML as shown below:

Figure 27 - Find the catalog

1. Add the tile to this group

Figure 28 - Add tile to a group

18
Assigning Catalog to the Role

Next we need to assign the Catalog to a Role：

1. Log on to your NetWeaver Gateway system
2. In the command field type the transaction code PFCG
3. In the Role text field type the Role name and click on the Single Role button

Figure 29 – Create a Role

4. You should see the following screen and select

Figure 30 – Save the role

19
5. Click on the Menu Tab and click on the Insert Node button as shown below:

Figure 31 - Select the Menu tab

6. Select SAP Fiori Tile Catalog as shown below:

Figure 32 - Select SAP Fiori Tile Catalog

20
7. You should see the following screen then click on the Catalog ID to select the Catalog ID

Figure 33 - Select the Catalog ID

8. Next select the Catalogue ID that we have created in the Fiori Launchpad Designer

Figure 34 - Select ZWebGUI_for_HTML

21
 9. Now we should have the following screen then click on the green check button

Figure 35 - Catalog ID is selected

Assigning Group to the Role

Next we need to assign the group that we have created to the Role. Follow the following steps:

1. Click again on the Insert Node as shown below:

Figure 36 - Select Insert Node for Group ID

22
2. From the menu Insert Node select SAP Fiori Tile Group as shown below:

Figure 37 - Select SAP Fiori Tile Group

3. Select the group that we have created from the list

Figure 38 – Select a Group ID

23
4. Select ZWebGUI ID that we have created previously

Figure 39 - Select a Fiori Group ID

5. You should see the following screen then click on the green check button

Figure 40 - Assign ZWebGUI ID to the Role

24
6. Click on User tab, assign this role to the user then save

Figure 41 - Assign the role to the user

25
 Chapter 3
Testing Fiori Application

If you are reading this chapter, that means WebGUI for HTML application has been configured successfully and
now it is the time to test it.

Logging on to Fiori Launchpad

To test our Fiori application, all we have to do is login to Fiori Launchpad.

1. Type Fiori Launchpad URL
http(s)://<HOST>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
2. You should see the Fiori Logon screen

Figure 42 - Fiori Logon screen

Testing Fiori Tile application

1. As you can see now our newly created Fiori Tile and open the App

Figure 43 - Fiori Launchpad accessing Fiori custom application

26
2. After clicking on the App , you will see the following screen

Figure 44 - Navigate to backend system

3. Input the user and password, the App works properly.

Figure 45 - Open the App

27