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

(1)

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.

Fiori 101 – How to Set Up a

Fiori Tile Using Web IDE

SAP NetWeaver (7.5) – Gateway

(2)

2

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}

(3)

Abstract

Chapter 1 - Configuring Fiori Gateway

1.1. Configuring the connection to the NetWeaver Gateway server 1.2. Creating a user

1.3. Creating a role

1.4. 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. How to access Fiori Launchpad

3.2. Test Fiori Launchpad

3.3. Fixing the Favorites port and protocol 3.4. 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. Accessing SAP HANA Cloud Platform

5.2. Installing and configuring HANA Cloud Connector 5.3. Activating Services for HCP and Fiori Launchpad 5.4. Configuring HCP destination

Chapter 6 - Using WebIDE

6.1. Access SAP WebIDE

6.2. Configuring Fiori Application Template plug-in 6.3. Building the application

6.4. Testing the Fiori application in the sandbox

Chapter 7 - Deploying and configuring Application

7.1. Register as an SAP developer

7.2. Deploying Fiori Application to Gateway 7.3. Verifying the Deployment in ABAP Workbench 7.4. Configure Launchpad application

7.5. Creating Semantic Object

Chapter 8 - Using Launchpad Designer

8.1. Creating Launchpad Role

8.2. Accessing Launchpad Designer 8.3. Configuring Catalog

(7)

7 8.5. Assign Catalogue to Launchpad Role

8.6. Assign Group to Launchpad Role 8.7. Working with Tile and Target Mapping 8.8. 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

(8)

8

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.

Note

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

Requirement

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

(9)

9

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. HOST NAME b. User ID c. Password d. Instance Number e. System ID f. Client Number

(10)

10 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:

(11)

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

(12)

12 c. You should see screen similar to this one:

(13)

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

(14)

14 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

(15)

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

environments differ):

(16)

16

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:

(17)

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

Figure 12. Create a user

5. Enter the required information:

(18)

18 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:

(19)

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

(20)

20

Note

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

 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

(21)

21 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:

(22)

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

Figure 22. Authorizations tab 5. Save the role before continuing.

(23)

23 6. Click Expert Mode for Profile Generation:

(24)

24 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

(25)

25 9. Click Apply Template.

Figure 27. Apply role template 10. Click the yellow triangle icon.

Figure 28. Activate Basis - Development Environment role

(26)

26 12. You see the following screen:

13. Now click the save disk icon.

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

(27)

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

Figure 30. Generate the profile 16. Click the go back button.

(28)

28 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

(29)

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

(30)

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

(31)

31 23. Click the yellow triangle to activate the role:

Figure 38. Yellow warning triangle

24. Before generating, click the Manually option.

(32)

32 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:

(33)

33 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:

(34)

34 30. Click the yellow triangle.

Figure 45. Yellow triangle warning 31. Your screen should now look like this:

(35)

35 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:

(36)

36 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:

(37)

37 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:

(38)

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

Figure 53. Give full authorization c. Click Full authorization:

(39)

39 d. Click Yes:

Figure 55. Accepting the full authorization e. Click the save icon:

(40)

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

(41)

41 h. Click generate:

Figure 59. Generate the profile

i. Save your changes and click the back button.

(42)

42 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

(43)

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

(44)

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

(45)

45 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

Note

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

 Add following authorization to the custom role: o • S_SERIVCE

o • S_RFC

(46)

46

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:

(47)

47 2. Enter the user ID you are using to do the configuration:

(48)

48 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

(49)

49 4. Click the User Comparison button:

Figure 71. Complete comparison action 5. Click Complete comparison.

Figure 72. Close the dialog

(50)

50 7. The User tab is now green:

Figure 73. User tab is now green 8. Save and click the back button.

(51)

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

(52)

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

(53)

53 14. The end result should look like this:

(54)

54

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.

(55)

55

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.

(56)

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

(57)

57 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:

(58)

58 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:

(59)

59 g. Repeat steps b -- f executing SAP_FIORI_LAUNCHPAD_INIT_SETUP.

Figure 90. Generating tasks list to configure Launchpad h. Click execute.

(60)

60 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:

(61)

61

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

(62)

62 2. You see the following screen:

(63)

63 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:

(64)

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

(65)

65 b. Click the square icon.

Figure 99. Access profile using RZ10 tCode

(66)

66 c. Double-click your instance profile.

(67)

67 d. The screen closes and looks similar to:

(68)

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

(69)

69 Figure 103. Profile maintenance

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

(70)

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

(71)

71 j. You should see a screen similar to:

Figure 107. After executing copy k. Click back.

(72)

72 l. Click Yes to save your changes.

Figure 109. Saving the changes to the profile m. Click back again.

(73)

73 n. Click Yes again.

(74)

74 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:

(75)

75 q. Activate the profile by clicking Yes.

(76)

76 r. Click the green check button:

(77)

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

(78)

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

(79)

79 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

(80)

80

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

(81)

81

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.

(82)

82 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://<domain>:8001/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html

or

(83)

83 6. Once you have fixed the URL, these the basic authentication login screen on a newly configured system.

Figure 123. Fiori basic authentication screen

7. Enter your user name and password, then click OK.

8. The Fiori Launchpad is initially empty. You’ll learn how to develop and deploy tiles in subsequent chapters.

(84)

84

Fixing the Favorites port and protocol

If you click Launchpad under Favorites, it does not work. 1. Log in to your SAP NetWeaver Gateway system. 2. Right-click Launchpad and select Change Favorites.

Figure 125. Change Favorites URL for Fiori Launchpad

Caution If you inadvertently select Delete Favorites, the Launchpad is deleted

without warning.

3. You should see the following:

Figure 126. Alter the Web Address of Fiori Launchpad home page

4. Change the port from 0 to 8001 or the appropriate number for the http port you have defined. If you are using https, change it to the port for that protocol.

(85)

85 Figure 127. Change/fix URL

5. Click the continue or green check button.

6. Click Launchpad ender Favorites. If your port is correctly configured, you should now see the Fior Launchpad home page.

(86)

86

Fixing the Fiori Logon Screen

Next, change the basic authentication login screen to the the one shown below:

Figure 128. Fiori Logon Screen

1. Log in to your SAP NetWeaver Gateway using your SAP login. 2. Confirm the version and installed components.

a. Select System from the SAP Easy Access User Menu. b. Select Status.

c. Under SAP System data, click the Product Version button. You should see the components that are installed.

Figure 129 Gateway Foundation and User Interface Technology 3. Click the green check mark to close the Installed Software window. 4. Click the red X to close the System Status window.

(87)

87 6. Enter the following service path: /sap/bc/ui5_ui5/ui2/ushell.

(88)

88 7. Click Execute.

Figure 131. Access ushell by executing the report 8. Now you should see the following screen:

(89)

89 9. Double-click ushell.

(90)

90 10. Click the Error Pages tab.

(91)

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

(92)

92 12. Click Configuration.

(93)

93 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.}

(94)

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

Figure 137. System Logon Settings

(95)

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

(96)

96

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, test to see whether the Flight OData endpoint is already enabled in your system:

1. Open a browser, either Chrome or Internet Explorer. 2. Enter the following URL:

http(s)://<HOSTNAME>:<PORT>/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/

Note HOSTNAME: Host name of the NetWeaver Gateway System

PORT: the port on which NetWeaver Gateway is configured to listen. Make sure you are using an appropriate port for HTTP or HTTPS.

3. If Flight is configured, you should see the following result:

(97)

97

Note

If you are using Internet Explorer, you may be asked to open or save RMTSAMPLEFLIGHT, and be given the choice of opening it or ignoring it. These options indicate that you can access the OData endpoint.

If Flight OData endpoint is not configured, configure it: 1. Log in to your NetWeaver Gateway system.

2. Enter transaction code SPRO in the command field.

(98)

98 3. Click SAP Reference IMG.

Figure 141. SAP Reference IMG 4. Expand SAP NetWeaver.

Figure 142. Access SAP NetWeaver 5. Now expand SAP Gateway. 6. Expand OData Channel. 7. Expand Administration. 8. Expand General Settings.

(99)

99 9. Click the green checkmark next to Activate and Maintain Services.

Figure 143. Access Activate and Maintain Services 10. You see the screen below:

(100)

100 11. Click Add Service.

(101)

101 12. Now you are in the Add Selected Services screen:

Figure 146. Add Selected Services

13. Click the square icon next to System Alias.

(102)

102 14. Select LOCAL.

Figure 148. Selecting a LOCAL system alias 15. Click Get Services.

Figure 149. Get the services

16. Double-click Flight from the list under Technical Service Name (/IWEBEP/RMTSAMPLEFLIGHT in the screen shown below):

(103)

103 17. You should see this screen:

(104)

104 18. Click Local Object.

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

(105)

105 20. In the confirmation dialog, click the green checkmark to continue.

(106)

106 21. Click the back button.

(107)

107 22. ZRMTSAMPLEFLIGHT has been added.

(108)

108

Test Flight OData endpoint

1. Select ZRMTSAMPLEFLIGHT and click SAP Gateway Client.

Figure 156. Accessing Sample Flight 2. Under SAP Gateway Client, click Execute.

Figure 157. Testing the newly activated Flight sample

Tip You can use transaction /n/IWFND/MAINT_SERVICE to access the

(109)

109 3. If everything is configured correctly, you should see the following result, which indicates that Flight

Sample OData is active and working successfully:

(110)

110

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.

HCC is necessary for access to the on-premise SAP NetWeaver Gateway and to develop a custom app using WebIDE.

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. In the example used throughout this chapter, HCC is installed and configured on a Windows 2012 Server.

Accessing SAP HANA Cloud Platform

To use HCC with SAP HANA Cloud Platform, you must have an account in HCP. To get an account: 1. Go to https://account.hanatrial.ondemand.com/.

2. Click Register.

3. Follow the registration process.

4. Provide your first and last name, your email address, and set a password.

5. Once you accept the Terms and Conditions, you will be sent the information needed to access HCP.

Installing and configuring HANA Cloud Connector

1. Download HCC version 2.8 or higher from

https://tools.hana.ondemand.com/#cloud.

2. Select Windows x86_64 version 2.8.0.1 or higher.

Figure 159. SAP HANA Cloud Connector binary

3. Download JAVA JDK. Or, if you prefer, you can download SAP JDK 8. 4. Once downloaded, install the JDK on your VM or physical machine:

(111)

111 b. Secure port: 8443.

c. The installer finds anyexisting JDK in your system. d.

e. Accept the defaults.

5. Make sure the service has started as shown below:

6. Now open your browser and go to https://localhost:8443 to access the SAP HANA Cloud Connector Administration.

Figure 160. HCC Connector Login

7. The default User ID is Administrator and the password is manage. These values are case-sensitive.

(112)

112 a. After logging in the first time, select the Installation Type. The example uses the Master

(Primary Installation).

Figure 161. Choosing the installation type of HCC b. Click Apply.

c. Change the default password.

Figure 162. Changing the default password d. Click Save.

(113)

113 e. Provide your HANA Cloud Platform landscape information. The examples uses the HANA Trial

landscape.

(114)

114 f. The completed screen should look similar to the following:

Figure 164. Filling in the landscape information

 Landscape: select hanatrial.ondemand.com from the drop-down list  Account Name: your user ID including trial. (for example, 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, the necessary information

(115)

115 h. You should see the following screen:

Figure 165. HCC connection status

Note If the Disconnect button says Connect, you need to click on it, on order to

(116)

116 8. Configure HCC to connect to the on-premise SAP NetWeaver Gateway. In the HCC Administration

Cockpit, click Access Control.

Figure 166. Access Control

9. Click Add to add a virtual mapping to the internal NetWeaver Gateway system.

(117)

117 10. From the System Mapping dialog, select a back-end type, and click Next.

(118)

118 11. Select HTTP as the protocol.

(119)

119 12. Provide your internal NetWeaver Gateway system and port and click Next:

Figure 170. Specifying internal system

Note In your setup, use whatever HTTP port you have configured, if it differs

from the one used in this example.

13. Provide a virtual name for your server. This name can be anything you like; however, the port number must be the same as the internal one. For example, if your internal host name is nwgtw.sap.com with

(120)

120 port 8001, you might want to name the virtual one virtual.nwgtw.sap.com with port 8001.

(121)

121 14. Accept the default if you are using HTTP, and click Next:

(122)

122 15. Enter a description, and click Next.

(123)

123 16. Review the configuration, and make sure you select Check availability of your internal host, which

allows you to test it.

(124)

124 17. Click Finish. You should see a screen similar to the following:

Figure 175. Virtual and internal system configuration

18. Add accessible resources the server you just added. Click Add under Resources and Accessible.

(125)

125 19. The screen you see should look similar to:

(126)

126 20. Enter a forward slash in URL Path, then select Path and all sub-paths:

(127)

127 21. Click Save. You should see the following:

Figure 179. Finalizing the configuration screen

Note State is turned green, that means the server now can communicate with

(128)

128

Activating Services for HCP and Fiori Launchpad

Before configuring HCP to talk to HCC, activate the following services in NetWeaver Gateway:  /sap/bc/adt

 /sap/bc/ui5_ui5  /sap/opu/odata

1. Log in to your SAP NetWeaver Gateway system. 2. Execute SICF or /nSICF in your command field.

3. In the Service Path, type /sap/bc/adt and click Execute:

(129)

129 4. You should see this screen:

Figure 181. Services needing to be activated

5. Right-click bc If Activate Service is dimmed, you can skip this step, otherwise, click it.

(130)

130 6. Select Yes:

Figure 183. Activate /sap/bc/adt 7. Your screen should now look like this:

(131)

131 8. Repeat the same steps for the following:

a. /sap/bc/ui5_ui5 b. /sap/opu/odata

Note If these services are already activated, you do not need to do anything,

you can skip this step.

Configuring the HCP destination

Log in to SAP HANA Cloud Platform Trial landscape to configure a destination.

1. Open your browser.

2. Go to https://account.hanatrial.ondemand.com.

3. Provide your user ID and password.

4. Click Connectivity to verify whether your HCC is connecting to your HCP Trial landscape account.

(132)

132 5. Select Destinations from the left menu.

(133)

133 6. Create a new destination to HCC using the virtual host name you created. Click New Destination.

Figure 187. Adding a destination

7. Now fill in the information as shown below:

 Name: Any name you like. The example uses FioriGateway.

 Description: Enter the same value used for Name. This appears in the deployment section when you deploy the application through Web IDE to the NetWeaver system.

 URL: The virtual URL you created in HCC of form http://<VIRTUAL-HOSTNAME>:<PORT>  Authentication: The example uses BasicAuthentication.

 Provide your NetWeaver user ID and password  Proxy Type: on-premise

8. Add property for this destination, by clicking New Property.

(134)

134 9. Add another property, WebIDEEnabled, with the value true:

10. Add another property, WebIDESystem, with the value of your NetWeaver system ID. 11. Add another property for WebIDEUSage with these values:

odata_abap,dev_abap,ui5_execute_abap,bsp_execute_abap

12. The end result should look similar to:

13. Click Save.

14. It will now take about 5 minutes before the system is available with the changes you’ve just made. 15. Once it is available, click the destination that you have created.

(135)

135 16. Now you should see the following:

17. Click Check Connection. If everything is configured correctly, you should see the following:

Note If the test failed, check the Troubleshooting section to learn how to fix the

(136)

136

Chapter 6 Accessing WebIDE

You can now create a custom Fiori application that consumes the Flight OData endpoint using WebIDE.

Accessing SAP WebIDE

1. Access SAP WebIDE directly by going to

https://webide-<ACCOUNT-ID>trial.dispatcher.hanatrial.ondemand.com.

Note _{Make sure <ACCOUNT-ID> is replaced with your account.}

a. Alternatively, you can access WebIDE directly from HCP Trial Cockpit. i. Log in to HCP by going to https://account.hanatrial.ondemand.com.

(137)

137 ii. Select Services from the menu shown below:

Figure 189. Access services from HCP Trial Cockpit iii. Enter Web IDE in the search box, as shown below:

(138)

138 iv. If WebIDE shows as Enabled, click it to access it, or enable it if it is not enabled.

Figure 191. Access SAP Web IDE v. Click Open SAP Web IDE:

(139)

139 vi. You see this screen:

Figure 193. Web IDE Interface

Configuring the Fiori Application Template plug-in

The next step is to configure the SAP Fiori Plug-in. 1. In SAP Web IDE, click Preferences:

(140)

140 2. From preferences, click Plugins:

Figure 195. Access Plugins

3. You see all the plugins that are enabled or not enabled. Make sure the Overview Page Application is enabled by switching the button to the ON position.

(141)

141 4. Scroll down and click Save.

Figure 197. Save your changes

5. Click Refresh for your changes to take effect.

(142)

142

Building the application

You can now start building a Fiori Custom Application.

1. Select File ->New -> Project From Template:

Figure 199. Selecting a new project from template

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

(143)

143

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)://<HOSTNAME>:<PORT>/sap/public/bc/ui5_ui5/index.html

3. Select SAP Fiori Worklist and click Next.

(144)

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

(145)

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

(146)

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

(147)

147 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.<COMPANY>.<SYSTEMID>.<APPNAME> Description (Optional) Fiori Flight Sample OData

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

(148)

148 The final configuration screen should look similar to:

(149)

149 10. Click Next. You see a confirmation.

(150)

150 11. Click Finish. to goto your project.

(151)

151

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

(152)

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

(153)

153

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.

(154)

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

(155)

155 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

(156)

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

Executable program. See screen below:

(157)

157

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.

(158)

158 a.

(159)

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

(160)

160  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.

(161)

161 6. You see the Package selection.

(162)

162 7. Enter your package name, $TMP:

(163)

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

Figure 222. Deploy a New Application section 9. Click Next.

(164)

164 10. Click Finish.

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

Note

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

1. In the Web IDE menu bar, click View.

2. From the View menu, select Console or press CTRL+SHFT+M.

(165)

165 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:

(166)

166 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:

(167)

167 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:

(168)

168 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:

(169)

169 Figure 232. Access the component name

(170)

170

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.

(171)

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

(172)

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.

(173)

173

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

(174)

174 13. Click Show Advanced (Optional) Parameters:

Figure 241. Access Advanced Parameters

(175)

175 a. Click the Editor Application Alias button.

(176)

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

(177)

177 c. Under Additional Information, enter the name of the component you copied from page 168.

Your screen should look like this screen below:

(178)

178 15. Click Save.

Figure 244. Save changes

16. You see a confirmation on the bottom taskbar:

(179)

179

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.

(180)

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

(181)

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

(182)

182 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:

(183)

183

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.

(184)

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

(185)

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

(186)

186 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)://<HOST-NAME>: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:

(187)

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

Figure 263. Fiori Launchpad Designer logon screen

(188)

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

(189)

189 5. Create a catalog by clicking the plus sign.

(190)

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

(191)

Figure 268. Fiori Launchpad Designer configuration

Configuring Group

Next, create a group.

(192)

192 1. Click Groups:

(193)

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

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

Document History

CoE Engineer

August 23, 2016

Mobile Technology

TABLE OF CONTENTS

Abstract

Chapter 1 - Configuring Fiori Gateway

Chapter 2 - Configuring Fiori Launchpad

Chapter 3 - Accessing Fiori Launchpad

Chapter 4 – Enabling Flight OData Service

Chapter 5 – Configuring HCP and HCC

Chapter 6 - Using WebIDE

Chapter 7 - Deploying and configuring Application

Chapter 8 - Using Launchpad Designer

Chapter 9 - Testing Fiori Application

Chapter 10 - Troubleshooting

Chapter 1

Configuring Fiori Gateway

Configuring the connection to the NetWeaver Gateway server

Creating a user

Creating a role

Assigning a user to a role

Chapter 2

Configuring Fiori Launchpad

Configuring Fiori Launchpad

Configuring SAP NetWeaver Gateway HTTP/HTTPs protocol

Chapter 3

Accessing Fiori Launchpad

How to access Fiori Launchpad

Test Fiori Launchpad

Fixing the Favorites port and protocol

Fixing the Fiori Logon Screen

Chapter 4

Enabling Flight OData Service

Test Flight OData endpoint

Chapter 5

Configuring HCP and HCC

Accessing SAP HANA Cloud Platform

Installing and configuring HANA Cloud Connector

Activating Services for HCP and Fiori Launchpad

Configuring the HCP destination

Chapter 6

Accessing WebIDE

Accessing SAP WebIDE

Configuring the Fiori Application Template plug-in

Building the application

Testing the Fiori application in the sandbox

Chapter 7 -

Deploying and Configuring the Application

Register as an SAP developer

Deploying Fiori Application to Gateway

Verifying the Deployment in ABAP Workbench

Configure Launchpad Application

Creating a Semantic Object

Chapter 8 -

Using Launchpad Designer

Creating Launchpad Role

Accessing Launchpad Designer

Configuring Group

_{Mobile Technology}