How to configure Fiori tile step by step release production.pdf

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

Support Team

Mobile Technology

Language Edited

Documentation Team

August 23, 2016

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

3. A tile accessed from Launchpad opens in a new tab with a blank screen, rather than from inside the Launchpad. ............................................................................................................................................................ 229 4.

When clicking a tile, the application does not open and an error occurs. ........................................... 229

5.

Application failed to load in Fiori Launchpad Sandbox in Web IDE. ..................................................... 231

6.

Fiori Cache Issues .................................................................................................................................. 231

5

Abstract Chapter 1 - Configuring Fiori Gateway 1.1. 1.2. 1.3. 1.4.

Configuring the connection to the NetWeaver Gateway server Creating a user Creating a role Assign the user to a role

Chapter 2 - Configuring Fiori Launchpad 2.1. Configuring Fiori Launchpad 2.2. Configuring SAP NetWeaver Gateway HTTP/HTTPs protocol 2.3. Verify the NetWeaver port

Chapter 3 - Accessing Fiori Launchpad 3.1. 3.2. 3.3. 3.4.

How to access Fiori Launchpad Test Fiori Launchpad Fixing the Favorites port and protocol Fixing Fiori Logon Screen

Chapter 4 – Enabling Flight OData Service 4.1. Enable OData Flight endpoint 4.2. Test Flight OData endpoint

Chapter 5 – Configuring HCP and HCC 5.1. 5.2. 5.3. 5.4.

Accessing SAP HANA Cloud Platform Installing and configuring HANA Cloud Connector Activating Services for HCP and Fiori Launchpad Configuring HCP destination

Chapter 6 - Using WebIDE 6.1. 6.2. 6.3. 6.4.

Access SAP WebIDE Configuring Fiori Application Template plug-in Building the application Testing the Fiori application in the sandbox

Chapter 7 - Deploying and configuring Application 7.1. 7.2. 7.3. 7.4. 7.5.

Register as an SAP developer Deploying Fiori Application to Gateway Verifying the Deployment in ABAP Workbench Configure Launchpad application Creating Semantic Object

Chapter 8 - Using Launchpad Designer 8.1. 8.2. 8.3. 8.4.

Creating Launchpad Role Accessing Launchpad Designer Configuring Catalog Configuring Group 6

8.5. 8.6. 8.7. 8.8.

Assign Catalogue to Launchpad Role Assign Group to Launchpad Role Working with Tile and Target Mapping Assigning Fiori Application to a the group

Chapter 9 - Testing Fiori Application 9.1. Login to Fiori Launchpad 9.2. Testing Fiori Tile application

Chapter 10 - Troubleshooting 10.1. Unable to ping on-premise NetWeaver Gateway from HCP 10.2. Tile failed to load after upgrading NetWeaver Gateway 7.5 to SP04 10.3. Accessing tile from Launchpad, it opens in a new tab with a blank screen 10.4. Application does not open and an error occurs 10.5. Application failed to load in Fiori Launchpad Sandbox in Web IDE 10.6. Fiori Cache Issues

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.



Each step in this chapter is performed against a single NetWeaver Gateway system; there is no ERP involved.



If your system already has a Launchpad configured, you may want to skip this chapter.



Install and configure NetWeaver 7.3 or higher. NetWeaver 7.5 already comes with SAP Gateway, SAP_GWFND 7.5 SP04, and SAP_UI 7.5 SP04 Windows 7, 8.1, or 10 for development and configuration Install the SAP Logon utility.

Note

Requirement

 

8

Configuring the connection to the NetWeaver Gateway server First, connect to the SAP NetWeaver Gateway System by configuring a connection profile.

To connect to SAP NetWeaver Gateway system: 1. Double-click SAP Logon.

Figure 1. SAP Logon icon shortcut on desktop

2. Your SAP Administrator or the engineer who installed SAP NetWeaver can provide the following information:

a. b. c. d. e. f.

HOST NAME User ID Password Instance Number System ID Client Number

9

3. You should see something similar to the following:

Figure 2. SAP Logon utility

4. Create a connection to your SAP Gateway NetWeaver system. a. Click on the New icon as shown on the screen below:

Figure 3. Create a new connection profile

10

b. Next, select User Specified System and click Next.

Figure 4. Configure a connection

11

c.

You should see screen similar to this one:

Figure 5. Connection profile screen

12

d. After completing the information, 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.

e. When you are finished, click Next. f. Accept the defaults and click Finish.

13

g. The screen should look similar to:

Figure 7. Connection profile is now available in the list

5. Double-click the new connection profile. You should see the following screen:

Figure 8. Logon screen

a. Obtain the Client value from the Administrator who configured your NetWeaver system. b. Enter the User ID and password created by your Administrator.

6.

Click Enter.

Note

If this is the first time you are using your user ID, the system may ask you to change your password. 14

7. After you have successfully logged in, you see a screen similar to (but not necessarily identical to, as all environments differ):

Figure 9. SAP Easy Access user menu

15

Creating a user Create user who is going to configure the Gateway tasks and the Fiori Launchpad. 1. The Administrator logs in. 2. 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. Using tCode SU01 to create a user

Note

If you already have a system user ID and password, you can skip this section.

3. You should see the following screen:

Figure 11. User Maintenance: Initial Screen

16

4. Enter the user name and click the square icon:

Figure 12. Create a user

5. Enter the required information:

Figure 13. Specify user details

17

6. Click the Logon Data tab to add an initial password.

Note

The password you provide here is temporary; the user is required to change his or her password when logging in the first time.

Figure 14. Specify user's password information

7. Click the Profiles Tab to add two major roles:

Figure 15. Specify profile

18

8. In the Profile column, enter SAP_ALL and press Enter:

Figure 16 Specify SAP_ALL as a profile

9. Enter SAP_NEW and press Enter:

Figure 17. Specify SAP_NEW as a profile

10. Click Save.

Figure 18. Save new user information

11. Log out of the system and log back in using the new user ID that you created 12. Change your initial password. You need to do this only during your initial login.

19

SAP_ALL and SAP_NEW are not required to have full access to the system; instead of full authorizations, you can: 

Note



Create Role Z_GW_USER with authorization profiles /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, create a few roles for the user who is performing the configuration. This section includes detailed steps for creating a role and assigning the user you just created to these roles.

Using the User ID from the previous section: 1. Log in to your NetWeaver Gateway system. 2. In the command field, type: PFCG

Figure 19. SAP Easy Access command field

20

a. If you are in the Role Maintenance screen, you can type /nPFCG in the command field.

Figure 20. Role maintenance screen

3. Enter any role you choose. For this example, we’ll use ZGATEWAY and click Single Role as shown below. The name is case-insensitive:

Figure 21. Use PFCG to create a role

21

4. You should see the following screen. Click the Authorizations tab.

Figure 22. Authorizations tab

5. Save the role before continuing.

Figure 23. Save the new role

22

6. Click Expert Mode for Profile Generation:

Figure 24. Access Expert Mode for Profile Generation

23

7. Read the information on the screen below and click the green check button.

Figure 25. Important note

8. Choose “Role Template for OData Channel Administrator” as shown below:

Figure 26. Choose a template role

Note

If you are using NetWeaver 7.4, the button is “Adopt reference” rather than “Apply Template”. 24

9. Click Apply Template.

Figure 27. Apply role template

10. Click the yellow triangle icon.

Figure 28. Activate Basis - Development Environment role

11. Assign the full authorization for subtreeby clicking the green check button.

25

12. You see the following screen:

13. Now click the save disk icon.

14. Click the green check button to assign a profile name:

Figure 29. Assign profile name for generated authorization profile

26

15. Click the generate icon or press SHIFT + F5.

Figure 30. Generate the profile

16. Click the go back button.

Figure 31. Click the go back button

27

17. You may be asked to confirm and save the changes; do so by clicking the generate icon again.

Figure 32. Generate the new profile

18. You see the Change Roles screen:

Figure 33. Change Roles screen

19. Repeat steps 2 – 18, creating a new single role called ZGATEWAY1. 28

Select Template for SAP Gateway Developerfor this role.

Figure 34. Select Template for SAP Gateway Developer

Note

Scroll down the list if the role is not visible.

20. Click Apply Template. Click the yellow triangles as before.

Figure 35. Change Role: Authorizations

29

21. Once you have saved and generated the new role, you should see a screen similar to:

Figure 36. Fix the role being added

22. Create another role called ZGATEWAYUSER, using Template for SAP Gateway User. Repeat the process as for the previous roles.

Figure 37. Add Template for SAP Gateway User

30

23. Click the yellow triangle to activate the role:

Figure 38. Yellow warning triangle

24. Before generating, click the Manually option.

Figure 39. Add authorization manually

31

25. You should see the following:

Figure 40. Add new authorization object

26. Under Authorization object, enter S_PB_CHIP and click the green check button:

Figure 41. Add S_PB_CHIP Authorization Object

32

27. You see:

Figure 42. Warning regarding theauthorization object

28. Click the yellow triangle. Now you should see:

Figure 43. All authorizations are green

29. Click Manually again. Add /UI2/CHIP and click the green check button:

Figure 44. Add /UI2/CHIP authorization object

33

30. Click the yellow triangle.

Figure 45. Yellow triangle warning

31. Your screen should now look like this:

Figure 46. All green

34

32. Click Manually again. This time, click S_SERVICE, then click the green check button when you are done:

Figure 47. Add S_SERVICE authorization object

33. You should see the following:

Figure 48. Fix S_SERVICE authorization object

35

34. Click the yellow triangle and follow the same steps as before. Your screen should look similar to:

Figure 49. All green

35. Click Manually and add S_RFCACL. Click the green check button when you are done:

Figure 50. Add S_RFCACL authorization object

36

36. Click the yellow triangle.

Figure 51. Fix the authorization warning

37. You may see the following warning on the bottom left of the screen:

a. Expand the item that has the yellow triangle by clicking the + sign:

Figure 52. Going manually through each item

37

b. Double-click the text field with a yellow square:

Figure 53. Give full authorization

c.

Click Full authorization:

Figure 54. Giving full authorization manually

38

d. Click Yes:

Figure 55. Accepting the full authorization

e. Click the save icon:

Figure 56. Save the changes

39

f.

The yellow square is now green.

Figure 57. Repeat the same steps for the rest of the items

g. Repeat the same steps for the rest of the items with yellow squares.

Figure 58. End result

40

h. Click generate:

Figure 59. Generate the profile

i.

Save your changes and click the back button.

Figure 60. Save the changes

41

j.

Click the continue button or the green check button.

Figure 61. Save and continue creating the profile

k. You may see a yellow triangle on the Authorization tab:

Figure 62. Warning yellow triangle on Authorizations tab

Note

This step may not occur. If it does not, continue to the next step. 42

l.

If the Authorization tab has yellow triangle, click Expert Mode for Profile Generation:

Figure 63. Edit the role to fix the warning

m. Select Edit old status, then click continue or the green check button.

Figure 64. Change Role: Authorizations

43

n. Click generate.

Figure 65. Generate the profile creation

o. Click the back button, which is the back green icon on the toolbar. Click the generate button.

Figure 66. Generate the profile

44

p. Note that the Authorizations tab now shows a green square.

Figure 67. Authorizations tab is now green

38. You should have now three roles created successfully: a. ZGATEWAY b. ZGATEWAY1 c. ZGATEWAYUSER

SAP_ALL and SAP_NEW are not required to have full access to the system; instead of full authorizations, 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

Assigning a user to a role The next step is to assign the user to the three roles. The steps below illustrate how to do this for ZGATEWAYUSER; simply repeat the same steps for any other roles, such as ZGATEWAY and ZGATEWAY1.

1. Click the User tab under the Change Roles report:

Figure 68. 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

3. Click the save disk icon on the menu bar. User Comparison should turn red.

Figure 70. The User Comparison button

Note

You may need to save the role. If prompted, select Yes and continue to the next step.

48

4. Click the User Comparison button:

Figure 71. Complete comparison action

5. Click Complete comparison.

Figure 72. Close the dialog

6. Close this dialog by clicking the red X button. 49

7. The User tab is now green:

Figure 73. User tab is now green

8. Save and click the back button.

Figure 74. Saving the changes and going back

50

9. You should see the following screen:

Figure 75. Back to main Role Maintenance screen

10. Repeat steps 1–9 for role ZGATEWAY1, and add the user to it. Enter the role name and click the pencil (change) button.

Figure 76. Repeating the same process for ZGATEWAY1 role to add a user

11. Add your user to the ZGATEWAY1 role.

51

12. The end result should look like:

Figure 77. End result: User tab is green

13. Repeat the same steps once more for role ZGATEWAY.

Figure 78. Repeating the same process for ZGATEWAY role

52

14. The end result should look like this:

Figure 79. End result: User tab is green

53

Chapter 2 Configuring Fiori Launchpad

Caution

If you are an Administrator and you have already configured Fiori Launchpad, you can skip “Configuring Fiori Launchpad”.

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. If so, skip to Configuring SAP Netweaver Gateway HTTP/HTTPS protocol on page 61. 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. After logging in to the system, enter su01 in the command field.

Figure 80. Access user maintenance information

54

Note

If you receive an error when executing su01, try entering /nsu01 instead.

2. Press Enter to move to the User Maintenance: initial Screen. 3. Enter the user name you want to check and click the edit pencil.

Figure 81. Editing user information

4. Click Profiles.

Figure 82. Access authorization profile

55

5. You should see the authorization profiles that are available in your account, for example, SAP_ALL and SAP_NEW.

Figure 83. Verifying user authorization profile

6. As an Administrator, if you do not see those, go ahead and add them to your account 7. Two tasks are provided by SAP to do the initial configuration of the Launchpad. a. Enter transaction code STC01 or /nSTC01.

Figure 84. Execute STC01 transaction code

b. You are in the Task Manager for Technical Configuration.

Figure 85. Task Manager

56

c.

In the Task List, enter SAP_GATEWAY_BASIC_CONFIG and click the execution icon.

Figure 86. Execution of Gateway basic configuration tasks

d. You should see something similar to:

Figure 87. List of tasks to be executed

57

e. 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. List of tasks to be executed

f.

If everything is successful, you see the following result:

Figure 89. Success result after execution the configuration tasks

58

g. Repeat steps b -- f executing SAP_FIORI_LAUNCHPAD_INIT_SETUP.

Figure 90. Generating tasks list to configure Launchpad

h. Click execute.

Figure 91. Executing Launchpad tasks list

59

i.

If everything is successful, you see a screen similar to:

Figure 92. Execution tasks successful

j.

Log out of your system and log back in. The screen now looks similar to:

Figure 93. Launchpad added to Favorites

60

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. Ask your Administrator to verify whether the SAP NetWeaver HTTP/HTTPS ports are configured. By default, the ports are set to zero for each protocol. 1. To verify whether the ports are configured, enther SMICM or /nSMICM in the command field.

Figure 94. Accessing smicm

Note

Transaction codes are case-insensitive.

61

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. As shown in the screen below, the ports are set to zero.

Figure 97. ICM Monitor – Service Display

5. To fix the ports:

63

a. In the command field, enter the transaction code RZ10 or /nRZ10.

Figure 98. Executing tCode RZ10

Note

You can skip to chapter 3 if your system is already configured for the NetWeaver server to listen on either HTTP port 8001 and HTTPS port 8443, or other ports chosen by your Administrator.

64

b. Click the square icon.

Figure 99. Access profile using RZ10 tCode

Note

If you don’t see the square icon, click in the Profile box first.

65

c.

Double-click your instance profile.

Figure 100. Choose profile name

66

d. The screen closes and looks similar to:

Figure 101. Edit Profiles screen

67

e. Select Extended maintenance, then click Change.

Figure 102. Change profile configuration

f.

On a new system, you may find that the ports aren’t configured as shown here.

Note

68

Figure 103. Profile maintenance

g. To add these parameters, click the Parameter icon.

Figure 104. Adding a new parameter

69

h. Enter the following information: Parameter name: icm/server_port_0 Parameter val: PROT=HTTP,PORT=80$$

Figure 105. Adding an HTTP parameter

i.

Click Copy.

Figure 106. Copying the new parameter

70

j.

You should see a screen similar to:

Figure 107. After executing copy

k. Click back.

Figure 108. Going back by using the back button

71

l.

Click Yes to save your changes.

Figure 109. Saving the changes to the profile

m. Click back again.

Figure 110. Clicking the back button

72

n. Click Yes again.

Figure 111. Saving the changes

73

o. Click the back button again. Save the the profile; however, you may receive an error message as shown below, click Yes button:

Figure 112. Accept the error message

p. When you see the screen below, click back again:

Figure 113. Going back using the back button

74

q. Activate the profile by clicking Yes.

Figure 114. Activate the profile

75

r.

Click the green check button:

Figure 115. Accept the changes

76

s.

Click the green check button again in response to this message:

Figure 116. Click the green check button

t.

Log off and restart the SAP NetWeaver server for the changes to take effect.

u. Log back in, and go to transaction SMICM. v. Click the services icon or press SHIFT+F1., The HTTP port should now be assigned.

Figure 117. Confirm the newly added HTTP port

77

w. Repeat the process to add the following parameter, icm/server_port_1, which is for HTTPS. Use these values: Parameter name: icm/server_port_1 Parameter val: PROT=HTTPS,PORT=8443

x.

You screen should look similar to:

Figure 118. Adding HTTPS port

y. Once the port is added, restart the SAP NetWeaver server again.

Verifying the NetWeaver port

78

1. After restarting the server, log back in to the system. 2. Go to transaction code SMICM, and click services or press SHIFT + F1.

Figure 119. Confirm the ports for HTTP and HTTPS

3. This confirms that your NetWeaver server is listening on HTTP port 8001 and HTTPS port 8443.

79

Chapter 3 Accessing Fiori Launchpad

How to access Fiori Launchpad

The URL of a Fiori Launchpad is formatted as follows:

Example:

http(s)://.:/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchp ad.html?sap-client=&sap-language=EN

80

Test Fiori Launchpad 1. Log in to your NetWeaver Gateway system. 2. Under Favorites, select Launchpad.

Figure 120. SAP Easy Access

3. Click Allow when you see the following warning:

Figure 121. Give permission to access Fiori Launchpad

Note

4. You may see the error message shown below, which occurs because the port numbers in the URL have not yet been changed. The default value is zero, but it must be changed to 8001 for HTTP, or 8443 for HTTPS or to whatever ports you have configured.

81

Figure 122. Fiori URL and port incorrect

5. Alter the URL by changing zero to 8001 or 8443, and the protocol to http or https, respectively. The end result should look like this: 

http://:8001/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html or



https://New -> Project From Template:

Figure 199. Selecting a new project from template

2. From the existing templates, select SAP Fiori Application:

Figure 200. Selecting templates

142

Note

Make sure the SAPUI5 library is already installed, and select the one in the “Available versions”. For example if you are using SAPUI5 library 1.28 and you select version 1.36, you receive the following error, “*.js is not found.”. You can check the version by running your browser and executing http(s)://:/sap/public/bc/ui5_ui5/index.html

3. Select SAP Fiori Worklist and click Next.

Figure 201. Select SAP Fiori Worklist Application

143

4. Give the project a name, which can be anything you like. The example uses ZMYFIORIFLIGHTWORKLIST.

Figure 202. Name the project

5. Next, define a data connection. Select the on-premise SAP NetWeaver Gateway system using the virtual destination we created in HCP.

Note

144

From the Select System menu,select the virtual destination, which in for the example is FioriGateway. Click Service Catalog and select the system you have defined.

Figure 203. Create a data connection

6. You see all the services that are available in that system.

Figure 204. Filter Flight OData service endpoint

145

7. Select RMTSAMPLEFLIGHT and click Next

Figure 205. Select Flight OData endpoint

Note

You can expand the service in the search list to see the list of entity sets, which ensure that you have full access.

Note

This example has been tested against RMTSAMPLEFLIGHT and not RMTSAMPLEFLIGHT_2. If you have installed RMTSAMPLEFLIGHT_2, , please make sure you test against RMTSAMPLEFLIGHT.

146

8. Set the Type, Title, and Namespace, which are mandatory.

Figure 206. Application Settings first part

Type

App for SAP Fiori Launchpad

Title

Fiori Carrier Collection

Namespace

com.sap.nw1.flightcarrier Note: The namespace is important, and you should make a note of it. It can be anything you like; the example follows this format com...

Description

9.

(Optional) Fiori Flight Sample OData

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

The final configuration screen should look similar to:

Figure 207. Final application configuration

148

10. Click Next. You see a confirmation.

Figure 208. Confirmation screen

149

11. Click Finish. to goto your project.

Figure 209. Workspace project

150

Testing the Fiori application in the sandbox 1. You can now test and run the application. Right-click the project name select Run -> App in FLP Sandbox.

Figure 210. Running the Fiori custom application

Note

If you are using SAPUI5 library version 1.28, the option may be Run with Mock server or Run with server rather than App in FLP Sandbox. You can choose either option.

151

2. A new tab is opened with the application showing the result.

Figure 211. Result of running the application in the Fiori Launchpad sandbox

Note

If you are on NetWeaver 7.4 or if Flight sample data was not generated, you may see a “ No CarrierCollection data…” error message. To generate the data, run the report SAPBC_DATA_GENERATOR in SE38.

152

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

Deploying Fiori Application to Gateway

After you register and enter your access developer key, go back to the Web IDE. 1. Right-click your project, select Deploy, then select Deploy to SAPUI5 ABAP Repository.

Figure 215. Deploy a Fiori application to the on-premise NetWeaver Gateway system

Note

Make sure that the HANA Cloud Connector shows a status of Connected or the new process will time out with an error.

2. Select Deploy a new application, then select the virtual system. 157

a.

Figure 216. Select the virtual system

158

3. Once the server successfully communicates with your on-premise NetWeaver Gateway system, click Next.

Figure 217. Web IDE successfully established a connection with the on-premise system

4. You see the deployment screen.

Figure 218. Deploy to SAPUI5 ABAP Repository

159

 Name: Name of your application in the NetWeaver Gateway system. The name can be anything you like ( the example uses ZCARRCOLIST).

Note

The name must start with letter Z.

 Description: Description of the application  Package: Where you want this application to be stored on the NetWeaver Gateway System ( for example, $TMP ) 5. After entering the name and descriptions, the Next button remains disabled. You must set the package in which the application will be stored. Click Browse.

Figure 219. Selecting a package to store the application in

Note

In some systems, the package may already be populated. If it is not; however, follow the steps below.

160

6. You see the Package selection.

Figure 220. Package Selection dialog

161

7. Enter your package name, $TMP:

Figure 221. Selecting $TMP package

162

8. Click OK. The screen should look similar to:

Figure 222. Deploy a New Application section

9. Click Next.

Figure 223. Confirmation screen

163

10. Click Finish.

Figure 224. Deploy application to the on-premise NetWeaver Gateway system

If you cannot see the Console window as shown in Figure 224:

Note 1. In the Web IDE menu bar, click View. 2. From the View menu, select Console or press CTRL+SHFT+M.

164

3. The message “The application has been deployed to FioriGateway” indicates that the application is now available in the SAP NetWeaver Gateway system.

Note

Verifying the Deployment in ABAP Workbench Now that you have deployed the Fiori custom application to the NetWeaver Gateway system, you can configure the Launchpad application. Firs, verify that the application exists on the SAP NetWeaver Gateway system.

1. Log in to SAP NetWeaver Gateway system. 2. In the command field, execute SE80 or /nSE80. 3. You should see the following screen, which is the ABAP Workbench:

Figure 225. ABAP Workbench

165

4. To check the application you just deployed, change the object category to BSP Application. Click the drop-down list for Object Category:

Figure 226. Access the object category drop-down list

5. Select BSP Application:

Figure 227. Select BSP Application

166

6. Enter the name of the application you deployed to the NetWeaver Gateway system. The example uses ZCARRCOLIST. Type the name of the application or type the letter Z (if you have used the same name as the example), and select the application from the list.

Figure 228. Typing the Object Name

7. Your screen should look similar to:

Figure 229. ABAP Object Navigator

167

8. Expand Page Fragments.

Figure 230. Access Page Fragments

9. Double-click Component.js.

Figure 231. Access Component.js

10. Under Layout, you see the source code for Component.js. Copy everything in UIComponent.extend(“…”) except the word Component. For example we copy com.sap.nw1.flightcarrier for later use. If you named your namespace differently, copy whatever inside the quotation and exclude the word Component:

168

Figure 232. Access the component name

169

Configure Launchpad Application Configure the Launchpad for your Fiori custom application.

1. Log in to your SAP NetWeaver Gateway system. 2. In the command field, enter LPD_CUST or /nLPD_CUST. 3. You should see the following screen:

Figure 233. Overview of Launchpads

4. Click New Launchpad.

Figure 234. Creating New Launchpad

170

5. You should see the following screen. Fill the information as shown below or whatever name you prefer as long as it starts with the letter Z

Figure 235. Create a new role Role

ZFLCARR

Instance

ZFLCARR

Description

Flight Carrier Collection

6. Click the green check button to continue. 7. Now you should see the following:

Figure 236. Namespace warning confirmation

8. Click Yes to continue.

171

9. You should see the following screen:

Figure 237. Change Launchpad screen

10. Click New Application.

Figure 238. Create a new application for the new role

11. Complete the Link Text and Application Type as shown below.

Figure 239. Set the application type

172

Link Text

Fiori Flight Carrier Collection

Application Type

URL

12. Under Application Parameter, in the blank text field, enter /sap/bc/ui5_ui5/sap/zcarrcolist.

Figure 240. Specify the URL

Note

The path must be /sap/bc/ui5_ui5/sap/, followed by the application name.

173

13. Click Show Advanced (Optional) Parameters:

Figure 241. Access Advanced Parameters

14. Define an application alias, which can be named anything you like. The example uses zcarrcolistalias.

174

a. Click the Editor Application Alias button.

Figure 242. Accessing Application alias edittor

175

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

176

c.

Under Additional Information, enter the name of the component you copied from page 168. Your screen should look like this screen below:

Figure 243. Specify additional information

177

15. Click Save.

Figure 244. Save changes

16. You see a confirmation on the bottom taskbar:

Figure 245. Confirming data saved

178

Creating a Semantic Object After configuring the Fiori Application Launchpad using transaction LPD_CUST, create a semantic object for your Fiori custom application. 1. Log in to your NetWeaver Gateway system. 2. In the command field, enter /n/UI2/SEMOBJ.

Note

Make sure you type /n before the transaction code /UI2/SEMOBJ; if you do not, you’ll see an error: “This function is not possible”

3. Click the edit button to create a new semantic object for our Fiori custom application.

Figure 246. Edit button

4. In the information dialog, click the green checkbox to continue.

Figure 247. Information dialog

179

5. Now click New Entries:

Figure 248. Selecting New Entries

6. You see the following screen:

Figure 249. New Entries: Overview of Added Entries

7. Enter the name of your semantic object ( for example, ZCARRSEMOBJ ), use the same name for the Sematnic Object Name, and provide a description.

Figure 250. Final configuration of the semantic object

180

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

Note

If the Request field is empty, create a new request by clicking the white page 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. 2. 3. 4. 5. 6. 7. 8. 9.

Create a new role for the Fiori Launchpad. Assign your user ID to this role. Access Fiori Launchpad Designer. Create a catalog. Create a group. Assign the catalog to this role. Assign the group to this role. Create a tile. 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

8. Enter the user ID you are logged in as, so you can be assigned to this role:

Figure 259. Add logged-in user to Launchpad role

9. Save your changes.

Figure 260. Save changes to the Launchpad role

185

Note: If the User Tab is showing red, click User Comparison:

Figure 261. User Comparison

Accessing Launchpad Designer Next, access Launchpad Designer to create a catalog and group. Fiori Launchpad Desginer uses the following URL format: http(s)://:PORT/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

Note

If you are using the HTTP protocol, the default port is 8001. If you are using HTTPS, the default port is 8443.

1. Log in to your NetWeaver Gateway system or use the browser to access the URL directly. 2. You see the following screen:

Figure 262. SAP Easy Access user menu

186

3. Click Launchpad Designer, or you can access it directly in the browser by providing the URL.

Figure 263. Fiori Launchpad Designer logon screen

Note

Use Chrome for Fiori Launchpad Designer.

187

4. Once you are logged in, you see the Launchpad Designer:

Figure 264. Fiori Launchpad Designer

Note

If you get a Launchpad Designer screen that is completely blank, you have mistakenly opened Launchpad rather than Launchpad Designer. Close the browser and reselect Launchpad Designer from the SAP GUI.

188

5. Create a catalog by clicking the plus sign.

Figure 265. Add a catalog

189

6. You see the Create Catalog screen:

Figure 266. Create catalog

7. Assign any name and ID to the catalog, but make a note of the values, as you’ll need the ID to assign the catalog to the Fiori Launchpad role. Make sure Standard is selected.

Figure 267 Assign a catalog name and ID

8. Click Save.

190

9. You should see the following screen:

Figure 268. Fiori Launchpad Designer configuration

Configuring Group Next, create a group.

191

1. Click Groups:

Figure 269. Create a new group

192

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

3. Give your group a title and an ID as shown below:

Figure 271. Enter a group title and ID

4. Click Save. You should see the following screen:

Figure 272. Group has been created

194

Assign Catalog to Launchpad Role Assign the catalog to the Launchpad role you have already created.

1. Log in into your NetWeaver Gateway system. 2. In the command field, enter PFCG or /nPFCG. 3. Enter the role you have created for the Launchpad. In the example, the role is named ZFIORILAUNCHPAD. Click the change button.

Figure 273. Edit Launchpad role

4. You should see the following screen:

Figure 274. Change roles configuration

195

5. Click the Menu tab, then click the Insert Node button.

Figure 275. Select the Menu tab

6. Select SAP Fiori Tile Catalog.

Figure 276. Select SAP Fiori Tile Catalog

7. You should see the following screen:

Figure 277. Assign tile catalog

196

In systems other than NetWeaver 7.5, you may not have a Local/ Remote radio button..

Note

8. Click the Catalog ID to select it:

Figure 278. Select the catalog ID

Note

If the Profile square icon doesn’t appear, click in the Profile box first, then click the square icon.

9. Next select the catalog ID you created in the Fiori Launchpad Designer.

Figure 279. Selecting MyFioriCatalogue1 ID

197

10. You should see the following screen:

Figure 280. Catalog ID is selected

11. Click the green check button to continue. 12. Your screen should look like this:

Figure 281. Catalog ID has been assigned

198

Assign Group to Launchpad Role Next, assign the group that we have created to the Launchpad Role.

1. Click the insert node.

Figure 282 Select insert node for group ID

2. Select SAP Fiori Tile Group:

Figure 283. Select SAP Fiori tile group

3. Select the group you created. If it is not on the list, manually enter its ID.

Figure 284. Select group ID

199

4. Select MyFioriGroup1 ID and click the green check mark.

Figure 285. Select a Fiori group ID

Note

If you are on NetWeaver 7.4, you may not see the Group ID that was created in the Fiori Designer. To list the Group IDs, you must apply SAP Note 2031538. For more details, please refer to the following documentation: http://help.sap.com/saphelp_scm700_ehp03/helpdlata/en/1f/b206d06c074c068edf1 418cf301899/content.htm

5. You should see the following screen:

Figure 286. Assign MyFioriGroup1 ID to the role

200

6. Continue by clicking the green check button.

Figure 287. Final assignment to the Launchpad Role

7. Click Save.

Working with Tile and Target Mapping Log back into Fiori Launchpad Designer using Chrome. 1. After logging in, click the Catalogs button. 2. Click MyFioriCatalogue. 3. Click the blank tile with the plus sign in the middle to create a new tile.

Figure 288. Create a new tile

201

4. Click App Launcher – Static tile.

Figure 289. Select a Fiori template

5. Configure the tile using the following values:  Title: A title for your tile.  Subtitle: A subtitle.  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.

Figure 290. Tile configuration

202

6. Set the Title and Subtitle:

Figure 291. Set Title and Subtitle

Title

Fiori Carrier Collection

Subtitle

Flight Sample

203

7. Select an icon.

Figure 292. Select an icon

204

8. Click OK. Your screen should look like this:

Figure 293. Set static tile configuration

9. Click the selection list.

Figure 294. Semantic object selection

205

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

14. Click back on the new tile and confirm that the semantic object is set, if it is you can exit this screen and return the main page of the Launchpad Designer

15. Next, click Target Mapping and make sure you have selected your catalog:

Figure 299. Target mapping

210

16. Click Create Target Mapping which is located at the bottom of the screen:

Figure 300. Select Create Target Mapping

17. You see the screen below:

Figure 301. Going back to the main page

Note

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

211

18. Select ZCARRSEMOBJ, and the display action.

Figure 302. Select semantic object and action

212

19. Change the application type from SAPUI5 Fiori App to SAP Fiori App Using LPD_CUST.

Figure 303. Set up the application type to use LPD_CUST

Note

In earlier versions that NetWeaver 7.5, you may see Other SAP Fiori App rather than SAP Fiori App using LPD_CUST.

213

20. Set the Launchpad role that by clicking the selection list. In the example, the role name is ZFLCARR as shown below:

Figure 304. Select Launchpad role from LPD_CUST

21. Your screen should now look like this:

Figure 305. Assign Launchpad role from LPD_CUST

22. Next, select the application alias. The example uses zcarrcolistalias.

214

23. Your screen should now look like this:

Figure 306. Configuration of target mapping

24. Save your configuration by clicking save at the bottom right of your screen. 25. Your screen should look like this

Figure 307. New target mapping created

215

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

Figure 308. Click Groups tab

216

2. Select the group you created. The example uses MyFioriGroup1.

Figure 309. Select group to add the tile to it

217

3. Click Show as tiles:

Figure 310 Assign the newly created tile

218

4. You see the following screen:

Figure 311. Add tile to a group

219

5. Click the Catalogs list to select MyFioriCatalogue.

Figure 312. Select a catalog

6. Select MyFioriCatalogue.

Figure 313. Select MyFioriCatalogue

220

7. You should see the following screen:

Figure 314. Tiles available in this catalog

221

8. Click the plus button to add this tile to the group:

Figure 315 Select the tile to add

222

9. After selecting the tile, the screen should look like this:

Figure 316. Tile has been selected

10. Return to the main screen by clicking the left arrow at the top left of the screen

223

11. Now you can see the tile added as shown below:

Figure 317. Fiori custom application tile has been configured

224

Chapter 9 Testing Fiori Application

Once your Fiori custom application has been configured successfully, you can test it.

Log in to Fiori Launchpad To test our Fiori application, all we have to do is log in to Fiori Launchpad.

1. Open Chrome. 2. Enter the Fiori Launchpad URL https://:8443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html OR http://:8001/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html 3. You should see the Fiori Logon screen. If you started the Launchpad from your Favorites list in the SAP Easy Access menu, you should be logged in automatically.

225

Figure 318. Fiori Logon screen

226

Testing Fiori Tile application 1. As you can see now our newly created Fiori Tile. Click on the tile

Figure 319. Fiori Launchpad accessing Fiori custom application

2. Here is the end result

227

Chapter 10 – Troubleshooting

This chapter discusses many of the issues we identified while writing this document.

1. Cannot ping on-premise NetWeaver Gateway from HCP When trying to ping NetWeaver Gateway from HCP, the following error was happening:

Resolution: Upgrade HANA Cloud Connector from 2.6 to 2.8.

2. Tile failed to load after upgrading NetWeaver Gateway 7.5 to SP04 After upgrading NetWeaver Gateway 7.5 to SP04, the following error occurred when trying to access the tile that uses CarrierCollection EntitySet:

Error:

228

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 error occurred on the application server . The termination type was:RABAX_STATE.If the termination type is RABAX_STATE, you will find more information in transaction ST22. If the termination type is ABORT_MESSAGE_STATE, you will find more information on the cause of termination in transaction SM21. If the termination type is ERROR_MESSAGE_STATE, you can search for further information in the trace file for the work process in transaction ST11.You may also need to analyze the trace files of other work processes. If you do not yet have a user ID, contact your system administrator.

Resolution: Use RMTSAMPLEFLIGHT instead of RMTSAMPLEFLIGHT_2.

3. A tile accessed from Launchpad opens in a new tab with a blank screen, rather than from inside the Launchpad.

Resolution:

The alias of the tile is not set properly. 4.

When clicking a tile, the application does not open and an error occurs. 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. Resolution: Execute this command to identify the latest version of SAPUI5 installed on the front-end server: https://:/sap/public/bc/ui5_ui5/index.html You see something similar to:

229

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

230

5.

Application failed to load in Fiori Launchpad Sandbox in Web IDE. Cause: The application name includes a single quote (for example, Mysample’s app). Resolution: Remove the single quote from the application name.

6. Fiori Cache Issues Cause: You have applied some support package or note, but you cannot see the changes in your Fiori Launchpad.

Resolution: The cache must be invalidated in three different places: the client, the front-end system, and the Back-end system.

Client: Use your browser’s settings to delete its cache. If you are using Fiori Client, you can do it manually using Settings -> Clear Cache.

Front end: 1. Invalidate the ICM cache by going tothe SMICM Menu and selecting Goto -> HTTP Plug-in -> Server Cache -> Invalidate Globally. 2. Invalidate UI2 cache by going to transaction SE38 and executing report /UI2/INVALIDATE_GLOBAL_CACHES. You can run this report in either "test mode" or "execute mode". The test mode shows a list of the caches to be invalidated but no invalidation is done. To invalidate the caches, use execution mode.

3. Invalidate metadata cache by executing the /IWBEP/CACHE_CLEANUP transaction.

You must invalidate the metadata cache for the gateway in the back-end system as well. To do so, execute transaction /IWBEP/CACHE_CLEANUP on the back-end system. 231