Fiori 101 – How to Set Up a

Fiori Tile Using Web IDE
SAP NetWeaver (7.5) – Gateway

Ali Chalhoub © 2016 SAP AG. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP
BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP products
and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP AG in Germany and other
countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal
Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business
Objects products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of Business Objects Software
Ltd. Business Objects is an SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and
other Sybase products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of Sybase Inc.
Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered
trademarks of Crossgate AG in Germany and other countries. Crossgate is an
SAP company.

All other product and service names mentioned are the trademarks of their
respective companies. Data contained in this document serves informational
purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are
provided by SAP AG and its affiliated companies ("SAP Group") for
informational purposes only, without representation or warranty of any
kind, and SAP Group shall not be liable for errors or omissions with respect
to the materials. The only warranties for SAP Group products and services
are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be
construed as constituting an additional warranty.

Document History

Document Version Authored By Description Date Created
1.0 Ali Chalhoub Fiori E-Book August 23, 2016

Document Version Reviewer Description
Kiran Kola CoE Engineer August 23, 2016

Support Team Mobile Technology

Language Edited Documentation Team August 26, 2016

2

How to Setup a Fiori Tile Step-by-Step Using Web IDE
www.sap.com

TABLE OF CONTENTS

Document History ...................................................................................................................................................... 2
ABSTRACT .....................................................................................................................................................6
Chapter 1 - Configuring Fiori Gateway ...................................................................................................................... 6
Chapter 2 - Configuring Fiori Launchpad ................................................................................................................... 6
Chapter 3 - Accessing Fiori Launchpad ...................................................................................................................... 6
Chapter 4 – Enabling Flight OData Service ................................................................................................................ 6
Chapter 5 – Configuring HCP and HCC ....................................................................................................................... 6
Chapter 6 - Using WebIDE ......................................................................................................................................... 6
Chapter 7 - Deploying and configuring Application ................................................................................................... 6
Chapter 8 - Using Launchpad Designer...................................................................................................................... 6
Chapter 9 - Testing Fiori Application ......................................................................................................................... 7
Chapter 10 - Troubleshooting .................................................................................................................................... 7
CHAPTER 1 CONFIGURING FIORI GATEWAY ...................................................................................................8
Configuring the connection to the NetWeaver Gateway server ............................................................................... 9
Creating a user ......................................................................................................................................................... 16
Creating a role ......................................................................................................................................................... 20
Assigning a user to a role ......................................................................................................................................... 46
CHAPTER 2 CONFIGURING FIORI LAUNCHPAD ............................................................................................. 54
Configuring Fiori Launchpad .................................................................................................................................... 54
Configuring SAP NetWeaver Gateway HTTP/HTTPs protocol ................................................................................. 61
Verifying the NetWeaver port ................................................................................................................................. 78
CHAPTER 3 .................................................................................................................................................. 80
ACCESSING FIORI LAUNCHPAD ..................................................................................................................... 80
How to access Fiori Launchpad................................................................................................................................ 80
Test Fiori Launchpad ................................................................................................................................................ 81

Fixing the Favorites port and protocol .................................................................................................................... 84
Fixing the Fiori Logon Screen ................................................................................................................................... 86
CHAPTER 4 ENABLING FLIGHT ODATA SERVICE ............................................................................................. 96
Test Flight OData endpoint .................................................................................................................................... 108
CHAPTER 5 CONFIGURING HCP AND HCC .................................................................................................... 110
Accessing SAP HANA Cloud Platform..................................................................................................................... 110
Installing and configuring HANA Cloud Connector ................................................................................................ 110
Activating Services for HCP and Fiori Launchpad .................................................................................................. 128
Configuring the HCP destination ........................................................................................................................... 131
CHAPTER 6 ACCESSING WEBIDE................................................................................................................. 136
Accessing SAP WebIDE .......................................................................................................................................... 136
Configuring the Fiori Application Template plug-in............................................................................................... 139
Building the application ......................................................................................................................................... 142
Testing the Fiori application in the sandbox.......................................................................................................... 151
CHAPTER 7 - DEPLOYING AND CONFIGURING THE APPLICATION................................................................. 153
Register as an SAP developer ................................................................................................................................ 153
Deploying Fiori Application to Gateway ................................................................................................................ 157
Verifying the Deployment in ABAP Workbench .................................................................................................... 165
Configure Launchpad Application.......................................................................................................................... 170
Creating a Semantic Object ................................................................................................................................... 179
CHAPTER 8 - USING LAUNCHPAD DESIGNER............................................................................................... 183
Creating Launchpad Role ....................................................................................................................................... 183
Accessing Launchpad Designer .............................................................................................................................. 186
Configuring Group ................................................................................................................................................. 191
Assign Catalog to Launchpad Role ......................................................................................................................... 195
Assign Group to Launchpad Role ........................................................................................................................... 199
Working with Tile and Target Mapping ................................................................................................................. 201
Assigning a Fiori application to a group ................................................................................................................. 216
CHAPTER 9 - TESTING FIORI APPLICATION.................................................................................................. 225
Log in to Fiori Launchpad....................................................................................................................................... 225
Testing Fiori Tile application .................................................................................................................................. 227
CHAPTER 10 – TROUBLESHOOTING............................................................................................................ 228
1. Cannot ping on-premise NetWeaver Gateway from HCP..................................................................... 228
2. Tile failed to load after upgrading NetWeaver Gateway 7.5 to SP04 ................................................... 228

4

............................................... . Fiori Cache Issues ...............................................3.............................. the application does not open and an error occurs................................... A tile accessed from Launchpad opens in a new tab with a blank screen.. 229 4.............. 231 6................................................. 229 5... Application failed to load in Fiori Launchpad Sandbox in Web IDE..................................................................... When clicking a tile................ ............... ..... rather than from inside the Launchpad........................................................ 231 5 ...

2. Testing the Fiori application in the sandbox Chapter 7 . Verifying the Deployment in ABAP Workbench 7.5.1.4.1.2. Enable OData Flight endpoint 4. Access SAP WebIDE 6.2. Configuring the connection to the NetWeaver Gateway server 1.1.2.2. Test Flight OData endpoint Chapter 5 – Configuring HCP and HCC 5.2. Verify the NetWeaver port Chapter 3 . Configure Launchpad application 7.4. Activating Services for HCP and Fiori Launchpad 5. Configuring Group 6 . Fixing Fiori Logon Screen Chapter 4 – Enabling Flight OData Service 4.3.Using Launchpad Designer 8. Creating Launchpad Role 8.3. Configuring HCP destination Chapter 6 .1. Creating a role 1. Assign the user to a role Chapter 2 . Installing and configuring HANA Cloud Connector 5.Accessing Fiori Launchpad 3.4.Abstract Chapter 1 .1. Register as an SAP developer 7.3.1.1.4.3.Configuring Fiori Launchpad 2. Accessing Launchpad Designer 8.1.2.4.3. Configuring Fiori Launchpad 2. Configuring Fiori Application Template plug-in 6. Creating a user 1. Configuring Catalog 8. Accessing SAP HANA Cloud Platform 5.3.3.Using WebIDE 6.Deploying and configuring Application 7.Configuring Fiori Gateway 1. Test Fiori Launchpad 3. Building the application 6. How to access Fiori Launchpad 3. Creating Semantic Object Chapter 8 . Deploying Fiori Application to Gateway 7.4. Fixing the Favorites port and protocol 3. Configuring SAP NetWeaver Gateway HTTP/HTTPs protocol 2.2.

4. Fiori Cache Issues 7 .1. Application does not open and an error occurs 10.8.Troubleshooting 10. Assign Catalogue to Launchpad Role 8.2.2.6. Assign Group to Launchpad Role 8.5. Assigning Fiori Application to a the group Chapter 9 . Tile failed to load after upgrading NetWeaver Gateway 7.3.5.7. it opens in a new tab with a blank screen 10. Application failed to load in Fiori Launchpad Sandbox in Web IDE 10.1. Unable to ping on-premise NetWeaver Gateway from HCP 10. Testing Fiori Tile application Chapter 10 .Testing Fiori Application 9. 8. Login to Fiori Launchpad 9. Accessing tile from Launchpad.6. Working with Tile and Target Mapping 8.5 to SP04 10.

5 already comes Requirement with SAP Gateway. NetWeaver 7. you may want to skip this chapter.3 or higher. 8. 8 . there is no ERP involved. and SAP_UI 7.  Install and configure NetWeaver 7.5 SP04  Windows 7. Note  If your system already has a Launchpad configured.  Each step in this chapter is performed against a single NetWeaver Gateway system.1. or 10 for development and configuration  Install the SAP Logon utility. SAP_GWFND 7. Chapter 1 Configuring Fiori Gateway This document contains all the information you’ll need to create a single Fiori tile using SAP WebIDE and deploy the application to an on-premise SAP NetWeaver Gateway system.5 SP04.

HOST NAME b. Double-click SAP Logon. Figure 1. Client Number 9 .Configuring the connection to the NetWeaver Gateway server First. Instance Number e. SAP Logon icon shortcut on desktop 2. connect to the SAP NetWeaver Gateway System by configuring a connection profile. System ID f. Password d. To connect to SAP NetWeaver Gateway system: 1. User ID c. Your SAP Administrator or the engineer who installed SAP NetWeaver can provide the following information: a.

Click on the New icon as shown on the screen below: Figure 3. You should see something similar to the following: Figure 2. SAP Logon utility 4. Create a new connection profile 10 . a. Create a connection to your SAP Gateway NetWeaver system.3.

Figure 4. Configure a connection 11 . Next. select User Specified System and click Next.b.

You should see screen similar to this one: Figure 5.c. Connection profile screen 12 .

f. After completing the information. Accept the defaults and click Finish. that the screen should look similar to: Figure 6. Configuration information for the server connection Note The description for the connection profile can be anything you like. When you are finished. click Next.d. e. 13 .

Connection profile is now available in the list 5. b. g. 14 . 6. Logon screen a. The screen should look similar to: Figure 7. Click Enter. Enter the User ID and password created by your Administrator. the system may ask you to change your password. You should see the following screen: Figure 8. Double-click the new connection profile. Note If this is the first time you are using your user ID. Obtain the Client value from the Administrator who configured your NetWeaver system.

After you have successfully logged in.7. you see a screen similar to (but not necessarily identical to. as all environments differ): Figure 9. SAP Easy Access user menu 15 .

you can skip this section. The Administrator logs in. Using tCode SU01 to create a user Note If you already have a system user ID and password. 1.Creating a user Create user who is going to configure the Gateway tasks and the Fiori Launchpad. 3. The Administrator executes the following transaction code—SU01 or /nSU01—then clicks the Enter key or the green check icon to the left of the command field Figure 10. 2. You should see the following screen: Figure 11. User Maintenance: Initial Screen 16 .

Specify user details 17 . Enter the required information: Figure 13. Enter the user name and click the square icon: Figure 12.4. Create a user 5.

Specify profile 18 . Figure 14. Note The password you provide here is temporary. Specify user's password information 7. Click the Profiles Tab to add two major roles: Figure 15. Click the Logon Data tab to add an initial password. the user is required to change his or her password when logging in the first time.6.

Specify SAP_NEW as a profile 10. 19 .8. Enter SAP_NEW and press Enter: Figure 17. Change your initial password. enter SAP_ALL and press Enter: Figure 16 Specify SAP_ALL as a profile 9. You need to do this only during your initial login. In the Profile column. Save new user information 11. Log out of the system and log back in using the new user ID that you created 12. Click Save. Figure 18.

you can:  Create Role Z_GW_USER with authorization profiles Note /IWFND/RT_GW_USER  Add the following authorizations to the custom role: o • S_SERVICE o • S_RFC o • S_RFCACL Creating a role To configure Fiori Launchpad in Chapter 2. Log in to your NetWeaver Gateway system. SAP_ALL and SAP_NEW are not required to have full access to the system. SAP Easy Access command field 20 . create a few roles for the user who is performing the configuration. 2. In the command field. instead of full authorizations. Using the User ID from the previous section: 1. This section includes detailed steps for creating a role and assigning the user you just created to these roles. type: PFCG Figure 19.

we’ll use ZGATEWAY and click Single Role as shown below. a. you can type /nPFCG in the command field. Use PFCG to create a role 21 . Enter any role you choose. The name is case-insensitive: Figure 21. Figure 20. Role maintenance screen 3. For this example. If you are in the Role Maintenance screen.

Click the Authorizations tab. Authorizations tab 5. Figure 23. You should see the following screen. Figure 22.4. Save the role before continuing. Save the new role 22 .

Click Expert Mode for Profile Generation: Figure 24. Access Expert Mode for Profile Generation 23 .6.

7. the button is “Adopt reference” rather than “Apply Template”. Figure 25. Read the information on the screen below and click the green check button. 24 . Important note 8.4. Choose “Role Template for OData Channel Administrator” as shown below: Figure 26. Choose a template role Note If you are using NetWeaver 7.

Development Environment role 11. 25 . Figure 28. Apply role template 10. Click the yellow triangle icon. Assign the full authorization for subtreeby clicking the green check button. Activate Basis . Figure 27.9. Click Apply Template.

Click the green check button to assign a profile name: Figure 29. Assign profile name for generated authorization profile 26 .12. You see the following screen: 13. 14. Now click the save disk icon.

Click the go back button.15. Generate the profile 16. Click the generate icon or press SHIFT + F5. Figure 30. Click the go back button 27 . Figure 31.

creating a new single role called ZGATEWAY1. You see the Change Roles screen: Figure 33.17. do so by clicking the generate icon again. Repeat steps 2 – 18. You may be asked to confirm and save the changes. Generate the new profile 18. Change Roles screen 19. Figure 32. 28 .

Click the yellow triangles as before. Figure 34. Select Template for SAP Gateway Developer Note Scroll down the list if the role is not visible. 20. Change Role: Authorizations 29 . Click Apply Template. Figure 35. Select Template for SAP Gateway Developerfor this role.

Once you have saved and generated the new role. Repeat the process as for the previous roles. Fix the role being added 22. Add Template for SAP Gateway User 30 .21. Figure 37. Create another role called ZGATEWAYUSER. using Template for SAP Gateway User. you should see a screen similar to: Figure 36.

Click the yellow triangle to activate the role: Figure 38. Figure 39. Before generating.23. Add authorization manually 31 . Yellow warning triangle 24. click the Manually option.

You should see the following: Figure 40. enter S_PB_CHIP and click the green check button: Figure 41. Under Authorization object. Add S_PB_CHIP Authorization Object 32 . Add new authorization object 26.25.

Add /UI2/CHIP authorization object 33 . All authorizations are green 29. Click the yellow triangle. Add /UI2/CHIP and click the green check button: Figure 44.27. You see: Figure 42. Now you should see: Figure 43. Warning regarding theauthorization object 28. Click Manually again.

All green 34 .30. Your screen should now look like this: Figure 46. Figure 45. Click the yellow triangle. Yellow triangle warning 31.

Click Manually again. Add S_SERVICE authorization object 33. click S_SERVICE.32. Fix S_SERVICE authorization object 35 . then click the green check button when you are done: Figure 47. You should see the following: Figure 48. This time.

Click Manually and add S_RFCACL.34. Click the green check button when you are done: Figure 50. Add S_RFCACL authorization object 36 . Your screen should look similar to: Figure 49. Click the yellow triangle and follow the same steps as before. All green 35.

You may see the following warning on the bottom left of the screen: a. Fix the authorization warning 37. Figure 51. Expand the item that has the yellow triangle by clicking the + sign: Figure 52. Going manually through each item 37 . Click the yellow triangle.36.

Click Full authorization: Figure 54. Giving full authorization manually 38 . Give full authorization c.b. Double-click the text field with a yellow square: Figure 53.

Save the changes 39 . Click Yes: Figure 55. Accepting the full authorization e.d. Click the save icon: Figure 56.

Repeat the same steps for the rest of the items with yellow squares. End result 40 .f. The yellow square is now green. Repeat the same steps for the rest of the items g. Figure 58. Figure 57.

h. Save the changes 41 . Click generate: Figure 59. Generate the profile i. Save your changes and click the back button. Figure 60.

42 . You may see a yellow triangle on the Authorization tab: Figure 62.j. continue to the next step. Save and continue creating the profile k. Click the continue button or the green check button. Figure 61. If it does not. Warning yellow triangle on Authorizations tab Note This step may not occur.

If the Authorization tab has yellow triangle.l. click Expert Mode for Profile Generation: Figure 63. Figure 64. then click continue or the green check button. Edit the role to fix the warning m. Select Edit old status. Change Role: Authorizations 43 .

Generate the profile creation o. Figure 66. which is the back green icon on the toolbar. Click the generate button. Generate the profile 44 . Click generate. Figure 65. Click the back button.n.

ZGATEWAY b. Figure 67. You should have now three roles created successfully: a. p. instead of full authorizations. Note that the Authorizations tab now shows a green square. ZGATEWAY1 c. ZGATEWAYUSER SAP_ALL and SAP_NEW are not required to have full access to the system. Authorizations tab is now green 38. you can Create Role Z_GW_USER with Authorization Profiles /IWFND/RT_GW_USER Note  Add following authorization to the custom role: o • S_SERIVCE o • S_RFC o • S_RFCACL 45 .

The steps below illustrate how to do this for ZGATEWAYUSER. 1. such as ZGATEWAY and ZGATEWAY1. Click the User tab under the Change Roles report: Figure 68.Assigning a user to a role The next step is to assign the user to the three roles. simply repeat the same steps for any other roles. Using PFCG transaction code to add user to the single role 46 .

2. Enter the user ID you are using to do the configuration: Figure 69. Add a user to the role 47 .

Click the save disk icon on the menu bar. If prompted. Figure 70.3. User Comparison should turn red. select Yes and continue to the next step. The User Comparison button Note You may need to save the role. 48 .

Figure 72. Click Complete comparison. Click the User Comparison button: Figure 71. 49 . Close this dialog by clicking the red X button.4. Close the dialog 6. Complete comparison action 5.

Save and click the back button. Saving the changes and going back 50 .7. Figure 74. The User tab is now green: Figure 73. User tab is now green 8.

Figure 76. Enter the role name and click the pencil (change) button. Repeat steps 1–9 for role ZGATEWAY1. You should see the following screen: Figure 75. Back to main Role Maintenance screen 10. Repeating the same process for ZGATEWAY1 role to add a user 11.9. and add the user to it. Add your user to the ZGATEWAY1 role. 51 .

Repeating the same process for ZGATEWAY role 52 . The end result should look like: Figure 77. Figure 78.12. End result: User tab is green 13. Repeat the same steps once more for role ZGATEWAY.

14. The end result should look like this: Figure 79. End result: User tab is green 53 .

skip to Configuring SAP Netweaver Gateway HTTP/HTTPS protocol on page 61. Figure 80. If so. Configuring Fiori Launchpad If you are a developer who is not responsible for configuring Fiori Launchpad. skip this step and check whether the Administrator has configured Fiori Launchpad. After logging in to the system. Access user maintenance information 54 . enter su01 in the command field. Continue with these steps only if you still need to configure the Launchpad. Make sure the user you are logged in as is assigned SAP_ALL and SAP_NEW authorization profiles. 1. you can skip “Configuring Fiori Launchpad”. Chapter 2 Configuring Fiori Launchpad Caution If you are an Administrator and you have already configured Fiori Launchpad.

3. 2. Figure 82. Access authorization profile 55 . Click Profiles. Editing user information 4. Note If you receive an error when executing su01. Enter the user name you want to check and click the edit pencil. try entering /nsu01 instead. Press Enter to move to the User Maintenance: initial Screen. Figure 81.

Execute STC01 transaction code b. Enter transaction code STC01 or /nSTC01. Figure 83. Figure 85. You should see the authorization profiles that are available in your account. Task Manager 56 .5. Figure 84. As an Administrator. for example. if you do not see those. You are in the Task Manager for Technical Configuration. a. SAP_ALL and SAP_NEW. Verifying user authorization profile 6. Two tasks are provided by SAP to do the initial configuration of the Launchpad. go ahead and add them to your account 7.

In the Task List. Execution of Gateway basic configuration tasks d. enter SAP_GATEWAY_BASIC_CONFIG and click the execution icon. Figure 86.c. List of tasks to be executed 57 . You should see something similar to: Figure 87.

Success result after execution the configuration tasks 58 . List of tasks to be executed f. Figure 88 shows all the tasks that are ready to be executed. Click the execute button to generate a list of tasks to execute: Figure 88. If everything is successful. you see the following result: Figure 89.e.

Figure 91. Generating tasks list to configure Launchpad h. Repeat steps b -. Executing Launchpad tasks list 59 .f executing SAP_FIORI_LAUNCHPAD_INIT_SETUP. Figure 90. Click execute.g.

i. If everything is successful. Log out of your system and log back in. you see a screen similar to: Figure 92. Execution tasks successful j. The screen now looks similar to: Figure 93. Launchpad added to Favorites 60 .

1. enther SMICM or /nSMICM in the command field. the ports are set to zero for each protocol. Ask your Administrator to verify whether the SAP NetWeaver HTTP/HTTPS ports are configured. 61 . Figure 94. Accessing smicm Note Transaction codes are case-insensitive. By default. To verify whether the ports are configured.Configuring SAP NetWeaver Gateway HTTP/HTTPs protocol The procedure in this section should be performed only by an SAP BASIS engineer or the Administrator who installed and configured the SAP NetWeaver Gateway system.

2. You see the following screen: Figure 95. ICM Monitor of Server 62 .

3. Click the Services icon or press SHIFT + F1 . Figure 96. Accessing services 4. Figure 97. As shown in the screen below. the ports are set to zero. ICM Monitor – Service Display 5. To fix the ports: 63 .

enter the transaction code RZ10 or /nRZ10. Executing tCode RZ10 You can skip to chapter 3 if your system is already configured for the Note NetWeaver server to listen on either HTTP port 8001 and HTTPS port 8443. In the command field. 64 .a. or other ports chosen by your Administrator. Figure 98.

click in the Profile box first. Figure 99. 65 . Access profile using RZ10 tCode Note If you don’t see the square icon.b. Click the square icon.

Choose profile name 66 .c. Figure 100. Double-click your instance profile.

The screen closes and looks similar to: Figure 101.d. Edit Profiles screen 67 .

e. Note 68 . then click Change. On a new system. Change profile configuration f. Select Extended maintenance. you may find that the ports aren’t configured as shown here. Figure 102.

Figure 103. To add these parameters. Profile maintenance g. click the Parameter icon. Adding a new parameter 69 . Figure 104.

Figure 106. Copying the new parameter 70 . Enter the following information: Parameter name: icm/server_port_0 Parameter val: PROT=HTTP. Adding an HTTP parameter i.PORT=80$$ Figure 105.h. Click Copy.

Going back by using the back button 71 . Figure 108. Click back. You should see a screen similar to: Figure 107.j. After executing copy k.

Clicking the back button 72 . Figure 110. Saving the changes to the profile m. Click back again. Figure 109.l. Click Yes to save your changes.

Saving the changes 73 .n. Click Yes again. Figure 111.

Going back using the back button 74 . you may receive an error message as shown below. Click the back button again. click Yes button: Figure 112. however. When you see the screen below. click back again: Figure 113. Save the the profile.o. Accept the error message p.

Figure 114. Activate the profile 75 .q. Activate the profile by clicking Yes.

Click the green check button: Figure 115. Accept the changes 76 .r.

u. v. The HTTP port should now be assigned. Log back in. Confirm the newly added HTTP port 77 .. Figure 117.s. Click the green check button t. Click the green check button again in response to this message: Figure 116. Click the services icon or press SHIFT+F1. and go to transaction SMICM. Log off and restart the SAP NetWeaver server for the changes to take effect.

Verifying the NetWeaver port 78 . w. restart the SAP NetWeaver server again. Use these values: Parameter name: icm/server_port_1 Parameter val: PROT=HTTPS. Adding HTTPS port y. Repeat the process to add the following parameter. You screen should look similar to: Figure 118. which is for HTTPS.PORT=8443 x. Once the port is added. icm/server_port_1.

log back in to the system. Figure 119. This confirms that your NetWeaver server is listening on HTTP port 8001 and HTTPS port 8443. After restarting the server. Confirm the ports for HTTP and HTTPS 3. 79 . 2. and click services or press SHIFT + F1.1. Go to transaction code SMICM.

Chapter 3 Accessing Fiori Launchpad How to access Fiori Launchpad The URL of a Fiori Launchpad is formatted as follows: Example: http(s)://<HOST>.<DOMAIN>:<PORT>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchp ad.html?sap-client=<CLIENT>&sap-language=EN 80 .

or 8443 for HTTPS or to whatever ports you have configured. Log in to your NetWeaver Gateway system. but it must be changed to 8001 for HTTP. which occurs because the port numbers in the URL have not yet been changed. Under Favorites. 81 . SAP Easy Access 3. Give permission to access Fiori Launchpad Note 4. Figure 120. You may see the error message shown below. select Launchpad. 2. The default value is zero.Test Fiori Launchpad 1. Click Allow when you see the following warning: Figure 121.

Alter the URL by changing zero to 8001 or 8443.html 82 . Figure 122. The end result should look like this:  http://<domain>:8001/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad. respectively. Fiori URL and port incorrect 5. and the protocol to http or https.html or  https://<domain:8443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.

6. Fiori basic authentication screen 7. The Fiori Launchpad is initially empty. Enter your user name and password. Empty screen Launchpad home page (no tiles) 83 . 8. Figure 124. these the basic authentication login screen on a newly configured system. Figure 123. then click OK. You’ll learn how to develop and deploy tiles in subsequent chapters. Once you have fixed the URL.

change it to the port for that protocol. Right-click Launchpad and select Change Favorites. Alter the Web Address of Fiori Launchpad home page 4. Figure 125. You should see the following: Figure 126. Log in to your SAP NetWeaver Gateway system. 3. Change Favorites URL for Fiori Launchpad Caution If you inadvertently select Delete Favorites. 84 . 2. it does not work. If you are using https. Change the port from 0 to 8001 or the appropriate number for the http port you have defined. the Launchpad is deleted without warning.Fixing the Favorites port and protocol If you click Launchpad under Favorites. 1.

85 . 6. you should now see the Fior Launchpad home page. Change/fix URL 5. Click the continue or green check button. If your port is correctly configured. Figure 127. Click Launchpad ender Favorites.

86 . Enter transaction code SICF or /nSICF in the command field. c. Click the red X to close the System Status window. 2. Select System from the SAP Easy Access User Menu. 5. Confirm the version and installed components. Click the green check mark to close the Installed Software window. You should see the components that are installed. Fiori Logon Screen 1. a.Fixing the Fiori Logon Screen Next. b. change the basic authentication login screen to the the one shown below: Figure 128. Figure 129 Gateway Foundation and User Interface Technology 3. 4. Under SAP System data. click the Product Version button. Select Status. Log in to your SAP NetWeaver Gateway using your SAP login.

Enter the following service path: /sap/bc/ui5_ui5/ui2/ushell. Service Path under SICF 87 . Figure 130.6.

Access ushell by executing the report 8.7. Now you should see the following screen: Figure 132. Access Define Services 88 . Click Execute. Figure 131.

Figure 133. Create/Change a service 89 . Double-click ushell.9.

10. Click the Error Pages tab. Figure 134. Error Pages tab 90 .

11. Click the Edit (glasses/pencil) icon 91 .

12. Click Configuration.

Figure 135. Access configuration Error Pages tab

92

13. Verify that the following screen is in Edit mode:

Figure 136. Changing login screen to enable Fiori Login theme

Note The Deactivate Default Frame Bust option is not in NetWeaver 7.40.

14. Change the System Logon Configuration to match the screen below.

93

a. Enter the Custom Implementation ABAP Class/UI2/CL_SRA_LOGIN.

Figure 137. System Logon Settings

15. Select Save as Global Settings.

94

16. Now when you log in to your Fiori Launchpad, you should see the Fiori theme:

Figure 138. Fiori Login Screen

95

Flight OData endpoint result 96 . Make sure you are using an appropriate port for HTTP or HTTPS. you should see the following result: Figure 139. Chapter 4 Enabling Flight OData Service This chapter describes how to enable the Flight OData endpoint that is provided with SAP Gateway service. Before we start. either Chrome or Internet Explorer. 2. Enter the following URL: http(s)://<HOSTNAME>:<PORT>/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/ HOSTNAME: Host name of the NetWeaver Gateway System Note PORT: the port on which NetWeaver Gateway is configured to listen. test to see whether the Flight OData endpoint is already enabled in your system: 1. Open a browser. 3. If Flight is configured.

If you are using Internet Explorer. configure it: 1. These options indicate that you can access the OData endpoint. you may be asked to open or save Note RMTSAMPLEFLIGHT. and be given the choice of opening it or ignoring it. Figure 140. SPRO Customizing: Execute Project 97 . 2. Log in to your NetWeaver Gateway system. Enter transaction code SPRO in the command field. If Flight OData endpoint is not configured.

SAP Reference IMG 4. Expand General Settings. Expand Administration. 98 . Now expand SAP Gateway. Access SAP NetWeaver 5. Expand SAP NetWeaver.3. Expand OData Channel. Figure 141. 8. Figure 142. 7. 6. Click SAP Reference IMG.

Available Services 99 . Figure 143. Click the green checkmark next to Activate and Maintain Services. Access Activate and Maintain Services 10.9. You see the screen below: Figure 144.

11. Add a service 100 . Figure 145. Click Add Service.

Add Selected Services 13. Figure 147. Access System Alias 101 . Click the square icon next to System Alias.12. Now you are in the Add Selected Services screen: Figure 146.

Select LOCAL. Figure 148. Click Get Services.14. Select RMTSAMPLEFLIGHT to activate 102 . Figure 149. Double-click Flight from the list under Technical Service Name (/IWEBEP/RMTSAMPLEFLIGHT in the screen shown below): Figure 150. Selecting a LOCAL system alias 15. Get the services 16.

You should see this screen: Figure 151. Activate the service 103 .17.

Local Object button under Package Assignment 19. Click the green checkmark to continue. Figure 152.18. 104 . Click Local Object.

click the green checkmark to continue.20. Confirming the service has been added 105 . In the confirmation dialog. Figure 153.

Click the back button. Going back to the service that has been added 106 .21. Figure 154.

ZRMTSAMPLEFLIGHT has been added 107 .22. Figure 155. ZRMTSAMPLEFLIGHT has been added.

Under SAP Gateway Client. 108 . Accessing Sample Flight 2. Figure 156. Select ZRMTSAMPLEFLIGHT and click SAP Gateway Client.Test Flight OData endpoint 1. Figure 157. Testing the newly activated Flight sample Tip You can use transaction /n/IWFND/MAINT_SERVICE to access the Activate and Maintain Services directly. click Execute.

If everything is configured correctly. Flight is now active 109 . you should see the following result. which indicates that Flight Sample OData is active and working successfully: Figure 158.3.

110 . SAP HANA Cloud Connector binary 3. HCC is installed and configured on a Windows 2012 Server. you will be sent the information needed to access HCP.8 or higher from https://tools. you must have an account in HCP. In the example used throughout this chapter.0. 2. Provide your first and last name.hana. Figure 159. and set a password. To get an account: 1. Once downloaded. Or. you can download SAP JDK 8. Follow the registration process. Download JAVA JDK. HCC is necessary for access to the on-premise SAP NetWeaver Gateway and to develop a custom app using WebIDE. Once you accept the Terms and Conditions. install the JDK on your VM or physical machine: a.hanatrial.com/#cloud. 5. By default. 4. if you prefer. Accessing SAP HANA Cloud Platform To use HCC with SAP HANA Cloud Platform.com/. Click Register. Download HCC version 2. Select Windows x86_64 version 2.ondemand. You’ll want to install HANA Cloud Connector on a VM or machine that lets you ping and have access to your NetWeaver Gateway system. the installer selects the folder C:\SAP\scc20\.8. 3. Installing and configuring HANA Cloud Connector 1. Chapter 5 Configuring HCP and HCC This chapter focuses on how to install HANA Cloud Connector (HCC) and how to configure HANA Cloud Platform ( HCP ) to communicate with HCC.ondemand. 4. Go to https://account. 2.1 or higher. your email address.

e. Note 111 . Make sure the service has started as shown below: 6. 5. c. Secure port: 8443. d. These values are case-sensitive. The installer finds anyexisting JDK in your system. Now open your browser and go to https://localhost:8443 to access the SAP HANA Cloud Connector Administration. HCC Connector Login 7. b. The default User ID is Administrator and the password is manage. Accept the defaults. Figure 160.

Click Apply. Click Save. After logging in the first time.a. Figure 162. Choosing the installation type of HCC b. Change the default password. The example uses the Master (Primary Installation). c. Changing the default password d. select the Installation Type. 112 . Figure 161.

Setting up the initial configuration of HCC 113 .e. The examples uses the HANA Trial landscape. Figure 163. Provide your HANA Cloud Platform landscape information.

(for example. Once you are done. 114 . The completed screen should look similar to the following: Figure 164. myIDtrial)  Display Name: same as the Account Name  Account User: your userID without the word trial  Your password for HCP  HTTPS Proxy: If your environment requires you to use a proxy to access the Internet.f. Filling in the landscape information  Landscape: select hanatrial. the necessary information g.com from the drop-down list  Account Name: your user ID including trial. click Apply button.ondemand.

h. You should see the following screen: Figure 165. HCC connection status Note If the Disconnect button says Connect. 115 . you need to click on it. on order to establish communication with SAP HANA Cloud Platform.

8. Figure 167. Adding virtual server 116 . Access Control 9. In the HCC Administration Cockpit. Figure 166. Click Add to add a virtual mapping to the internal NetWeaver Gateway system. Configure HCC to connect to the on-premise SAP NetWeaver Gateway. click Access Control.

and click Next.10. Selecting a system mapping type 117 . Figure 168. From the System Mapping dialog. select a back-end type.

Selecting protocol type 118 . Select HTTP as the protocol.11. Figure 169.

13. For example. if your internal host name is nwgtw. Provide a virtual name for your server. This name can be anything you like. Provide your internal NetWeaver Gateway system and port and click Next: Figure 170.12. however. if it differs from the one used in this example. the port number must be the same as the internal one. Specifying internal system Note In your setup. use whatever HTTP port you have configured.sap.com with 119 .

nwgtw. Assigning a virtual host name 120 . you might want to name the virtual one virtual.port 8001. Figure 171.sap.com with port 8001.

14. Accept the default if you are using HTTP. and click Next: Figure 172 Setting up Principal Type 121 .

Provide a description of your system mapping 122 . and click Next. Enter a description.15. Figure 173.

which allows you to test it. Verifying configuration 123 . Figure 174.16. and make sure you select Check availability of your internal host. Review the configuration.

You should see a screen similar to the following: Figure 175. Adding resources 124 . Click Add under Resources and Accessible. Click Finish. Virtual and internal system configuration 18. Add accessible resources the server you just added. Figure 176.17.

The screen you see should look similar to: Figure 177.19. Adding a path to your resource 125 .

Adding path to resource 126 .20. then select Path and all sub-paths: Figure 178. Enter a forward slash in URL Path.

127 . that means the server now can communicate with your internal NetWeaver Gateway system.21. Finalizing the configuration screen Note State is turned green. Click Save. You should see the following: Figure 179.

3. Activate service 128 . Execute SICF or /nSICF in your command field. type /sap/bc/adt and click Execute: Figure 180. 2. Log in to your SAP NetWeaver Gateway system. activate the following services in NetWeaver Gateway:  /sap/bc/adt  /sap/bc/ui5_ui5  /sap/opu/odata 1.Activating Services for HCP and Fiori Launchpad Before configuring HCP to talk to HCC. In the Service Path.

Right-click bc If Activate Service is dimmed. otherwise. Services needing to be activated 5. You should see this screen: Figure 181. Figure 182. you can skip this step. click it. Activate a service 129 .4.

6. Activate /sap/bc/adt 7. Service is activated 130 . Select Yes: Figure 183. Your screen should now look like this: Figure 184.

Click Connectivity to verify whether your HCC is connecting to your HCP Trial landscape account. Repeat the same steps for the following: a. /sap/bc/ui5_ui5 b. 4. 2. /sap/opu/odata Note If these services are already activated. 1. Go to https://account.ondemand. you do not need to do anything. 8. 3. Open your browser.hanatrial. Figure 185.com. Configuring the HCP destination Log in to SAP HANA Cloud Platform Trial landscape to configure a destination. you can skip this step. Provide your user ID and password. Successful connection from HCC to HCP Trial 131 .

Accessing destinations 132 .5. Figure 186. Select Destinations from the left menu.

The example uses FioriGateway. Adding properties 133 . Figure 188. Adding a destination 7. Figure 187. Click New Destination.6. by clicking New Property.  Provide your NetWeaver user ID and password  Proxy Type: on-premise 8. Now fill in the information as shown below:  Name: Any name you like. Add property for this destination.  URL: The virtual URL you created in HCC of form http://<VIRTUAL-HOSTNAME>:<PORT>  Authentication: The example uses BasicAuthentication. Create a new destination to HCC using the virtual host name you created. This appears in the deployment section when you deploy the application through Web IDE to the NetWeaver system.  Description: Enter the same value used for Name.

with the value of your NetWeaver system ID. 11. Click Save.bsp_execute_abap 12. Once it is available.9. WebIDEEnabled. Add another property. with the value true: 10. Add another property. 14.ui5_execute_abap. 134 . The end result should look similar to: 13. click the destination that you have created. WebIDESystem. It will now take about 5 minutes before the system is available with the changes you’ve just made. 15.dev_abap. Add another property for WebIDEUSage with these values: odata_abap.

you should see the following: Note If the test failed. 135 .16. Now you should see the following: 17. Click Check Connection. check the Troubleshooting section to learn how to fix the issue. If everything is configured correctly.

Access SAP WebIDE directly by going to https://webide-<ACCOUNT-ID>trial. i.com. Alternatively.hanatrial. 136 . Accessing SAP WebIDE 1. Chapter 6 Accessing WebIDE You can now create a custom Fiori application that consumes the Flight OData endpoint using WebIDE. Note Make sure <ACCOUNT-ID> is replaced with your account. you can access WebIDE directly from HCP Trial Cockpit. a.hanatrial.dispatcher.ondemand. Log in to HCP by going to https://account.ondemand.com.

Enter Web IDE in the search box. Access services from HCP Trial Cockpit iii. Select Services from the menu shown below: Figure 189. as shown below: Figure 190. Filter HCP services 137 .ii.

Open SAP Web IDE 138 . If WebIDE shows as Enabled. Figure 191. Click Open SAP Web IDE: Figure 192. or enable it if it is not enabled. Access SAP Web IDE v. click it to access it.iv.

Web IDE Interface Configuring the Fiori Application Template plug-in The next step is to configure the SAP Fiori Plug-in. SAP Web IDE preferences 139 . 1. click Preferences: Figure 194. You see this screen: Figure 193. In SAP Web IDE. vi.

2. Make sure the Overview Page Application is enabled by switching the button to the ON position. From preferences. Enable Overview Page Application 140 . click Plugins: Figure 195. You see all the plugins that are enabled or not enabled. Figure 196. Access Plugins 3.

Save your changes 5. Click Refresh for your changes to take effect. Figure 197. Figure 198.4. Refresh SAP Web IDE plugins 141 . Scroll down and click Save.

Selecting templates 142 . 1. From the existing templates. Select File ->New -> Project From Template: Figure 199. select SAP Fiori Application: Figure 200. Selecting a new project from template 2.Building the application You can now start building a Fiori Custom Application.

you receive the following error. Select SAP Fiori Worklist and click Next. You can check the version by running your browser and executing http(s)://<HOSTNAME>:<PORT>/sap/public/bc/ui5_ui5/index. Select SAP Fiori Worklist Application 143 .html 3.28 and you select version 1.js is not Note found. Figure 201.36. and select the one in the “Available versions”. For example if you are using SAPUI5 library 1.”. Make sure the SAPUI5 library is already installed. “*.

which can be anything you like. Give the project a name. Figure 202. Name the project 5. define a data connection. Next.4. The example uses ZMYFIORIFLIGHTWORKLIST. Note 144 . Select the on-premise SAP NetWeaver Gateway system using the virtual destination we created in HCP.

Create a data connection 6.select the virtual destination. You see all the services that are available in that system. Figure 203. From the Select System menu. which in for the example is FioriGateway. Click Service Catalog and select the system you have defined. Filter Flight OData service endpoint 145 . Figure 204.

. please make sure you test against RMTSAMPLEFLIGHT. 146 .7. Select RMTSAMPLEFLIGHT and click Next Figure 205. which ensure that you have full access. Select Flight OData endpoint Note You can expand the service in the search list to see the list of entity sets. This example has been tested against RMTSAMPLEFLIGHT and not Note RMTSAMPLEFLIGHT_2. If you have installed RMTSAMPLEFLIGHT_2.

Application Settings first part Type App for SAP Fiori Launchpad Title Fiori Carrier Collection Namespace com. and you should make a note of it. Title.flightcarrier Note: The namespace is important. Fill in the Data Binding collection using the information in this table to set the values: Object Collection CarrierCollection Object Collection ID carrid Object Title CARRNAME Object Numeric Attribute Leave bllank Object Unit of Measure URL 147 .nw1.<APPNAME> Description (Optional) Fiori Flight Sample OData 9.<COMPANY>.<SYSTEMID>. It can be anything you like. and Namespace.sap. Set the Type. which are mandatory.8. Figure 206. the example follows this format com.

The final configuration screen should look similar to: Figure 207. Final application configuration 148 .

Click Next. Figure 208. Confirmation screen 149 .10. You see a confirmation.

to goto your project. Workspace project 150 .11. Figure 209. Click Finish.

Figure 210. 151 . Running the Fiori custom application If you are using SAPUI5 library version 1. You can choose either option. the option may be Run with Mock Note server or Run with server rather than App in FLP Sandbox. Right-click the project name select Run -> App in FLP Sandbox.Testing the Fiori application in the sandbox 1. You can now test and run the application.28.

you Note may see a “ No CarrierCollection data…” error message.4 or if Flight sample data was not generated.2. 152 . Figure 211. A new tab is opened with the application showing the result. Result of running the application in the Fiori Launchpad sandbox If you are on NetWeaver 7. run the report SAPBC_DATA_GENERATOR in SE38. To generate the data.

Chapter 7 -
Deploying and Configuring the Application

This chapter discusses how to deploy and configure your application to the on-premise NetWeaver Gateway
system. However, the SAP user ID that you use to connect to the on-premise NetWeaver Gateway system must
be an SAP registered developer.

Register as an SAP developer

You must register your user ID with SAP and receive a developer key. This SAP Note explains how to get one:
https://service.sap.com/sap/support/notes/86161.
Once you get the key, perform the following steps:
1. Log in to your NetWeaver Gateway system.

153

2. In the command field, type transaction code SE38.

Figure 212. SE38 transaction code to test creation of a program
3. Enter ZTESTREGISTRATION as the program name.

Figure 213. Specify the program name to create

154

4. Click Create.

Figure 214. Registration screen as a developer

5. Enter your access key and click Continue and follow the rest of the instructions.
a. Enter a title

155

b. Set the type of registration, for example, under Attributes, select Executable program

Executable program. See screen below:

c. Finally, click Save (or Local Object to use the default ($TMP)).

156

then select Deploy to SAPUI5 ABAP Repository. 157 . 1.Deploying Fiori Application to Gateway After you register and enter your access developer key. then select the virtual system. select Deploy. Deploy a Fiori application to the on-premise NetWeaver Gateway system Make sure that the HANA Cloud Connector shows a status of Connected or the new Note process will time out with an error. go back to the Web IDE. 2. Right-click your project. Select Deploy a new application. Figure 215.

Figure 216.a. Select the virtual system 158 .

click Next. Once the server successfully communicates with your on-premise NetWeaver Gateway system. Web IDE successfully established a connection with the on-premise system 4. Deploy to SAPUI5 ABAP Repository 159 . You see the deployment screen. Figure 217.3. Figure 218.

Figure 219. the Next button remains disabled. You must set the package in which the application will be stored. the package may already be populated. $TMP ) 5.  Name: Name of your application in the NetWeaver Gateway system.  Description: Description of the application  Package: Where you want this application to be stored on the NetWeaver Gateway System ( for example. 160 . Click Browse. After entering the name and descriptions. Note The name must start with letter Z. If it is not. however. The name can be anything you like ( the example uses ZCARRCOLIST). Selecting a package to store the application in In some systems. Note follow the steps below.

Package Selection dialog 161 . You see the Package selection.6. Figure 220.

7. Enter your package name. $TMP: Figure 221. Selecting $TMP package 162 .

Figure 223. The screen should look similar to: Figure 222. Deploy a New Application section 9. Confirmation screen 163 . Click Next. Click OK.8.

select Console or press CTRL+SHFT+M. Click Finish. From the View menu. In the Web IDE menu bar. click View. Deploy application to the on-premise NetWeaver Gateway system If you cannot see the Console window as shown in Figure 224: Note 1. Figure 224. 2.10. 164 .

The message “The application has been deployed to FioriGateway” indicates that the application is now available in the SAP NetWeaver Gateway system. Log in to SAP NetWeaver Gateway system. which is the ABAP Workbench: Figure 225. In the command field. you can configure the Launchpad application. 3. 2. verify that the application exists on the SAP NetWeaver Gateway system. ABAP Workbench 165 . You should see the following screen. Firs. 1. Note Verifying the Deployment in ABAP Workbench Now that you have deployed the Fiori custom application to the NetWeaver Gateway system. execute SE80 or /nSE80. 3.

To check the application you just deployed. Select BSP Application 166 . Select BSP Application: Figure 227. Access the object category drop-down list 5. change the object category to BSP Application. Click the drop-down list for Object Category: Figure 226.4.

Enter the name of the application you deployed to the NetWeaver Gateway system. and select the application from the list. Your screen should look similar to: Figure 229. Type the name of the application or type the letter Z (if you have used the same name as the example). ABAP Object Navigator 167 . Typing the Object Name 7. Figure 228. The example uses ZCARRCOLIST.6.

extend(“…”) except the word Component. Copy everything in UIComponent.js 10.nw1. Access Component. Access Page Fragments 9. Figure 231. Expand Page Fragments. copy whatever inside the quotation and exclude the word Component: 168 . Under Layout. you see the source code for Component. If you named your namespace differently.sap.js.js.8.flightcarrier for later use. Figure 230. Double-click Component. For example we copy com.

Figure 232. Access the component name 169 .

Creating New Launchpad 170 . Log in to your SAP NetWeaver Gateway system. enter LPD_CUST or /nLPD_CUST. Click New Launchpad. Figure 234. In the command field. 2. Overview of Launchpads 4. 1. 3. You should see the following screen: Figure 233.Configure Launchpad Application Configure the Launchpad for your Fiori custom application.

Fill the information as shown below or whatever name you prefer as long as it starts with the letter Z Figure 235. Click the green check button to continue. Click Yes to continue. 171 .5. Namespace warning confirmation 8. 7. Now you should see the following: Figure 236. Create a new role Role ZFLCARR Instance ZFLCARR Description Flight Carrier Collection 6. You should see the following screen.

Figure 239. Set the application type 172 . Create a new application for the new role 11. Figure 238. Click New Application. Complete the Link Text and Application Type as shown below. Change Launchpad screen 10. You should see the following screen: Figure 237.9.

Specify the URL Note The path must be /sap/bc/ui5_ui5/sap/. Figure 240. Link Text Fiori Flight Carrier Collection Application Type URL 12. in the blank text field. enter /sap/bc/ui5_ui5/sap/zcarrcolist. followed by the application name. 173 . Under Application Parameter.

174 .13. The example uses zcarrcolistalias. Click Show Advanced (Optional) Parameters: Figure 241. Access Advanced Parameters 14. which can be named anything you like. Define an application alias.

Figure 242. Click the Editor Application Alias button. Accessing Application alias edittor 175 .a.

176 .b. In the text field enter the application alias name.

Your screen should look like this screen below: Figure 243. Under Additional Information. Specify additional information 177 .c. enter the name of the component you copied from page 168.

15. Save changes 16. Figure 244. You see a confirmation on the bottom taskbar: Figure 245. Click Save. Confirming data saved 178 .

2. Log in to your NetWeaver Gateway system. click the green checkbox to continue.Creating a Semantic Object After configuring the Fiori Application Launchpad using transaction LPD_CUST. create a semantic object for your Fiori custom application. Edit button 4. In the information dialog. Make sure you type /n before the transaction code /UI2/SEMOBJ. Click the edit button to create a new semantic object for our Fiori custom application. In the command field. Figure 246. Information dialog 179 . if you do not. Figure 247. enter /n/UI2/SEMOBJ. Note you’ll see an error: “This function is not possible” 3. 1.

and provide a description. Selecting New Entries 6. New Entries: Overview of Added Entries 7.5. Figure 250. use the same name for the Sematnic Object Name. Enter the name of your semantic object ( for example. Final configuration of the semantic object 180 . Now click New Entries: Figure 248. You see the following screen: Figure 249. ZCARRSEMOBJ ).

8. Click Save.

Figure 251. Save changes to a semantic object
9. Save the new request by clicking the green check button which is the continue button:

Figure 252 Add the new request

If the Request field is empty, create a new request by clicking the white page
Note button. Enter a description and click Save. When you return to the screen
above, click Save.

181

10. Click the continue button again to create the task:

Figure 253. Continue the task creation

11. You should see the following confirmation on the bottom of the screen.

Figure 254. Semantic object is saved
12. Now if you click the back button, you see the new semantic object has been created:

Figure 255. Semantic object is created

182

Chapter 8 -
Using Launchpad Designer

You are now ready to access the Launchpad Designer to create your Fiori Tile application. Before continuing,
however, you must:
1. Create a new role for the Fiori Launchpad.
2. Assign your user ID to this role.
3. Access Fiori Launchpad Designer.
4. Create a catalog.
5. Create a group.
6. Assign the catalog to this role.
7. Assign the group to this role.
8. Create a tile.
9. Assign the tile to a group.

Creating Launchpad Role

1. Log in to the NetWeaver Gateway system.
2. In the command field, enter PFCG or /nPFCG.
3. In the Role field, enterZFIORILAUNCHPAD.

Figure 256. Create Fiori Launchpad new role

183

4. Click Single Role.

Figure 257. Click the Single Role button

5. You should see the following screen:

Figure 258. New role configuration screen
6. Click Save.
7. Click the User tab.

184

Figure 260. Enter the user ID you are logged in as. Save changes to the Launchpad role 185 . Add logged-in user to Launchpad role 9.8. so you can be assigned to this role: Figure 259. Save your changes.

html Note If you are using the HTTP protocol. click User Comparison: Figure 261. the default port is 8443. access Launchpad Designer to create a catalog and group. 1. Note: If the User Tab is showing red. If you are using HTTPS. Log in to your NetWeaver Gateway system or use the browser to access the URL directly. User Comparison Accessing Launchpad Designer Next. 2. the default port is 8001. Fiori Launchpad Desginer uses the following URL format: http(s)://<HOST-NAME>:PORT/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main. SAP Easy Access user menu 186 . You see the following screen: Figure 262.

Figure 263. Click Launchpad Designer.3. or you can access it directly in the browser by providing the URL. Fiori Launchpad Designer logon screen Note Use Chrome for Fiori Launchpad Designer. 187 .

you have Note mistakenly opened Launchpad rather than Launchpad Designer. 188 . Once you are logged in.4. Close the browser and reselect Launchpad Designer from the SAP GUI. you see the Launchpad Designer: Figure 264. Fiori Launchpad Designer If you get a Launchpad Designer screen that is completely blank.

Create a catalog by clicking the plus sign. Figure 265. Add a catalog 189 .5.

Click Save. 190 . Assign any name and ID to the catalog. as you’ll need the ID to assign the catalog to the Fiori Launchpad role. You see the Create Catalog screen: Figure 266. Figure 267 Assign a catalog name and ID 8. Create catalog 7.6. but make a note of the values. Make sure Standard is selected.

9. 191 . You should see the following screen: Figure 268. create a group. Fiori Launchpad Designer configuration Configuring Group Next.

Click Groups: Figure 269. Create a new group 192 .1.

2. Click the plus sign at the bottom of the screen to create a new group: Figure 270. Click the plus sign to create a group 193 .

Enter a group title and ID 4. Click Save. Group has been created 194 .3. You should see the following screen: Figure 272. Give your group a title and an ID as shown below: Figure 271.

enter PFCG or /nPFCG. Log in into your NetWeaver Gateway system. Click the change button. Enter the role you have created for the Launchpad. Change roles configuration 195 . 1. You should see the following screen: Figure 274. In the example.Assign Catalog to Launchpad Role Assign the catalog to the Launchpad role you have already created. 3. the role is named ZFIORILAUNCHPAD. Edit Launchpad role 4. 2. In the command field. Figure 273.

5. You should see the following screen: Figure 277. then click the Insert Node button. Click the Menu tab. Select SAP Fiori Tile Catalog. Figure 276. Assign tile catalog 196 . Figure 275. Select the Menu tab 6. Select SAP Fiori Tile Catalog 7.

5. you may not have a Local/ Remote radio Note button. Figure 279. Selecting MyFioriCatalogue1 ID 197 . Click the Catalog ID to select it: Figure 278. click in the Profile box first.. Next select the catalog ID you created in the Fiori Launchpad Designer. then Note click the square icon. 9. Select the catalog ID If the Profile square icon doesn’t appear. 8. In systems other than NetWeaver 7.

12. Catalog ID has been assigned 198 . Click the green check button to continue. You should see the following screen: Figure 280.10. Your screen should look like this: Figure 281. Catalog ID is selected 11.

Select group ID 199 . assign the group that we have created to the Launchpad Role. Select SAP Fiori tile group 3. 1. Click the insert node. If it is not on the list. Figure 284. Select SAP Fiori Tile Group: Figure 283. manually enter its ID. Figure 282 Select insert node for group ID 2.Assign Group to Launchpad Role Next. Select the group you created.

Assign MyFioriGroup1 ID to the role 200 . you may not see the Group ID that was created in the Fiori Designer.htm 5. you must apply SAP Note 2031538. You should see the following screen: Figure 286. To list the Group IDs.4. Figure 285. For more Note details.4. Select a Fiori group ID If you are on NetWeaver 7. please refer to the following documentation: http://help.sap. Select MyFioriGroup1 ID and click the green check mark.com/saphelp_scm700_ehp03/helpdlata/en/1f/b206d06c074c068edf1 418cf301899/content.

3. Final assignment to the Launchpad Role 7. After logging in. 1. click the Catalogs button. 2. Create a new tile 201 . Click Save. Click the blank tile with the plus sign in the middle to create a new tile. Click MyFioriCatalogue. 6. Continue by clicking the green check button. Figure 288. Figure 287. Working with Tile and Target Mapping Log back into Fiori Launchpad Designer using Chrome.

Tile configuration 202 . Configure the tile using the following values:  Title: A title for your tile. Click App Launcher – Static tile. Figure 290.  Subtitle: A subtitle. Figure 289. Select a Fiori template 5.4.  Icon: Select an icon to represent your tile  Semantic Object: the semantic object you created  Action: of the type of action you want to perform.

Set the Title and Subtitle: Figure 291. Set Title and Subtitle Title Fiori Carrier Collection Subtitle Flight Sample 203 .6.

7. Figure 292. Select an icon. Select an icon 204 .

Click the selection list. Figure 294. Your screen should look like this: Figure 293. Set static tile configuration 9. Semantic object selection 205 .8. Click OK.

10. Select the semantic object you created, ZCARRSEMOBJ. You can start typing the first few characters as
shown below:

Figure 295. Select semantic object ZCARRSEMOBJ
206

11. Select display.

Figure 296 Select display

Note If you are using a version of NetWeaver earlier than 7.5,enter the action value,
display, manually.

207

12. Your final screen should look like this:

Figure 297. Final configuration screen for new tile

208

13. Click Save.

Figure 298 Tile has been created

209

if it is you can exit this screen and return the main page of the Launchpad Designer 15. Click back on the new tile and confirm that the semantic object is set. Next. Target mapping 210 .14. click Target Mapping and make sure you have selected your catalog: Figure 299.

You see the screen below: Figure 301. 211 . manually. display.enter the action value. Select Create Target Mapping 17.16. Click Create Target Mapping which is located at the bottom of the screen: Figure 300. Going back to the main page Note If you are using a version of NetWeaver earlier than 7.5.

Figure 302.18. and the display action. Select semantic object and action 212 . Select ZCARRSEMOBJ.

5. Figure 303. you may see Other SAP Fiori App rather Note than SAP Fiori App using LPD_CUST. Set up the application type to use LPD_CUST In earlier versions that NetWeaver 7.19. 213 . Change the application type from SAPUI5 Fiori App to SAP Fiori App Using LPD_CUST.

select the application alias. Assign Launchpad role from LPD_CUST 22. Select Launchpad role from LPD_CUST 21.20. 214 . The example uses zcarrcolistalias. Set the Launchpad role that by clicking the selection list. Your screen should now look like this: Figure 305. the role name is ZFLCARR as shown below: Figure 304. Next. In the example.

23. Your screen should look like this Figure 307. Save your configuration by clicking save at the bottom right of your screen. 25. Your screen should now look like this: Figure 306. New target mapping created 215 . Configuration of target mapping 24.

Click Groups tab 216 .Assigning a Fiori application to a group Assign your Fiori custom application to the group you created. Figure 308. 1. Click the Groups tab.

Select group to add the tile to it 217 .2. Select the group you created. The example uses MyFioriGroup1. Figure 309.

3. Click Show as tiles: Figure 310 Assign the newly created tile 218 .

4. Add tile to a group 219 . You see the following screen: Figure 311.

Click the Catalogs list to select MyFioriCatalogue. Select a catalog 6. Select MyFioriCatalogue.5. Figure 312. Figure 313. Select MyFioriCatalogue 220 .

You should see the following screen: Figure 314. Tiles available in this catalog 221 .7.

Click the plus button to add this tile to the group: Figure 315 Select the tile to add 222 .8.

9. Return to the main screen by clicking the left arrow at the top left of the screen 223 . After selecting the tile. Tile has been selected 10. the screen should look like this: Figure 316.

11. Now you can see the tile added as shown below: Figure 317. Fiori custom application tile has been configured 224 .

all we have to do is log in to Fiori Launchpad. Open Chrome. 2. you should be logged in automatically. If you started the Launchpad from your Favorites list in the SAP Easy Access menu. 225 . Enter the Fiori Launchpad URL https://<HOST>:8443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad. Log in to Fiori Launchpad To test our Fiori application.html OR http://<HOST>:8001/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad. Chapter 9 - Testing Fiori Application Once your Fiori custom application has been configured successfully. 1.html 3. you can test it. You should see the Fiori Logon screen.

Figure 318. Fiori Logon screen 226 .

Click on the tile Figure 319. As you can see now our newly created Fiori Tile.Testing Fiori Tile application 1. Here is the end result 227 . Fiori Launchpad accessing Fiori custom application 2.

8.6 to 2.5 to SP04 After upgrading NetWeaver Gateway 7. the following error occurred when trying to access the tile that uses CarrierCollection EntitySet: Error: 228 . 2. Cannot ping on-premise NetWeaver Gateway from HCP When trying to ping NetWeaver Gateway from HCP. 1. Chapter 10 – Troubleshooting This chapter discusses many of the issues we identified while writing this document. Tile failed to load after upgrading NetWeaver Gateway 7. the following error was happening: Resolution: Upgrade HANA Cloud Connector from 2.5 to SP04.

If the termination type is ERROR_MESSAGE_STATE. When clicking a tile. you will find more information on the cause of termination in transaction SM21. Resolution: Execute this command to identify the latest version of SAPUI5 installed on the front-end server: https://<HOSTNAME>:<PORT>/sap/public/bc/ui5_ui5/index. If you do not yet have a user ID. rather than from inside the Launchpad.html You see something similar to: 229 . Resolution: Use RMTSAMPLEFLIGHT instead of RMTSAMPLEFLIGHT_2. service/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2/CarrierCollection terminated because of an error. The following error text was processed in system :Type conflict in ASSIGN in program /IWCOR/CL_DS_EP_WRITER_JSON===CP . the application does not open and an error occurs. 4.If the termination type is RABAX_STATE. A tile accessed from Launchpad opens in a new tab with a blank screen. contact your system administrator. 3. The termination type was:RABAX_STATE. Error: Uncaught TypeError: Cannot read property 'metadataLoaded' of undefined. Cause: You have developed your app on a version of SAPUI5 that is later than your Gateway Server.The error occurred on the application server . you can search for further information in the trace file for the work process in transaction ST11. If the termination type is ABORT_MESSAGE_STATE. Resolution: The alias of the tile is not set properly.You may also need to analyze the trace files of other work processes. you will find more information in transaction ST22.

30. 230 .10. Determining SAPUI5 version on the front-end Gateway system Your front-end server supports SAPUI5 1.Figure 320. 2. Create a new project in Web IDE.38. To solve the issue: 1.1 or lower to the minimum version 1. Set the SAPUI5 version to the latest version that your front-end server supports.

6. You must invalidate the metadata cache for the gateway in the back-end system as well. but you cannot see the changes in your Fiori Launchpad. Fiori Cache Issues Cause: You have applied some support package or note. the front-end system. Resolution: The cache must be invalidated in three different places: the client.5. Application failed to load in Fiori Launchpad Sandbox in Web IDE. Client: Use your browser’s settings to delete its cache. Front end: 1. 3. and the Back-end system. If you are using Fiori Client. Mysample’s app). Invalidate metadata cache by executing the /IWBEP/CACHE_CLEANUP transaction. Cause: The application name includes a single quote (for example. You can run this report in either "test mode" or "execute mode". 231 . Resolution: Remove the single quote from the application name. use execution mode. execute transaction /IWBEP/CACHE_CLEANUP on the back-end system. To do so. To invalidate the caches. you can do it manually using Settings -> Clear Cache. The test mode shows a list of the caches to be invalidated but no invalidation is done. Invalidate UI2 cache by going to transaction SE38 and executing report /UI2/INVALIDATE_GLOBAL_CACHES. Invalidate the ICM cache by going tothe SMICM Menu and selecting Goto -> HTTP Plug-in -> Server Cache -> Invalidate Globally. 2.