Creating a Fiori Starter Application for sales order tracking

Transcription

1 SAP Web IDE How-To Guide Provided by Customer Experience Group Creating a Fiori Starter Application for sales order tracking Applicable Releases: SAP Web IDE 1.4 Version October 2014

2 Creating a Fiori Starter Application with an Additional View Document History Document Version Authored By Description 1.0 Customer Experience Group 2.0 Customer Experience Group First release of this guide Update for SAP Web IDE release 1.4 plus Layout Editor 2

3 TABLE OF CONTENTS 1. Business Scenario Background Information Prerequisites Step-by-Step Procedure Start creating a new project Using a template to create a Starter Fiori Application Run the application and show the resulting app Continue building the application using the Layout Editor Run the application with mock data Deploy the application to the cloud

4 1. BUSINESS SCENARIO SAP Web IDE is a next-generation cloud-based meeting space where multiple project stakeholders can work together from a common web interface -- connecting to the same shared repository with virtually no setup required. It includes multiple interactive features that allow you to collaborate with your colleagues and accelerate the development of your HTML5/UI5 applications. 2. BACKGROUND INFORMATION In this How-To Guide we will start off by creating a new Fiori Starter Application based on the Sales Order Tracking service provided by the SAP Gateway system. We will then enhance the detail view by using the Layout Editor and run the app with mock data. At the end we will deploy the application to SAP HANA Cloud. 3. PREREQUISITES To connect to your SAP Web IDE system, open the browser and enter the URL of your system. 4

5 4. STEP-BY-STEP PROCEDURE The following major steps will be described in detail step-by-step with screenshots for every step 1. Start from creating a new project 2. Using a template to create a Starter Fiori Application 3. Run the application and show the resulting app 4. Continue and build the application using the Layout Editor 5. Run the application with mock data 4.1 Start creating a new project The first step is about creating a new project. In this guide we will simply create a project on the local workspace. Explanation Screenshot 1. Start from creating a new project File > New > Project 2. The wizard to create a new project displays the first step on Basic Information. At wizard step #1 (Basic Information), define the Project Name: MySalesOrderTracking 5

6 3. Click on Next button 6

7 4.2 Using a template to create a Starter Fiori Application We will now select the application template that will at the end generate the code for our starter Fiori application. The Starter Fiori Application template will generate a master/detail list application accessing an OData Service. In this guide we will access a SAP Gateway system for the OData Service of sales orders. The SAP Gateway system GM6 is a system within SAP, you may want to access your own system. Explanation Screenshot 4. At wizard step #2 (Select a Template), select the SAP Fiori Application template catalog. You could also select All Categories, and you would get all available templates displayed on the screen. 5. Select the tile SAP FIori Starter Application if it is not already selected automatically. You can see if the template is selected by the upper right corner. Then click on Next 7

8 6. At wizard step #3 (Data Connection), click on Service Catalog to get all the available OData Services on the SAP Gateway system 7. Open the drop down list and select the Gateway system (GM6). 8

9 8. You can use salesrep02/kelley123 for credentials in the SAP system. You would need to ask your system admin for your specific credentials. The list of OData Services is being fetched 9. Scoll down the list to see all the OData Services available on the Gateway system selected 9

10 10. Search for "tracking" to show search and filter capabilities 11. Select the relevant OData Service, SRA018_SO_TRACKING_S RVE [Ext] 12. Expand the OData Service and show defined data collections for this OData Service. Select SRA018_SO_TRACKING_S RVE [Ext and click Next 10

11 13. At wizard step #4 (Template Customization), click on the screenshot to display a bigger view of the Master/Detail application look 14. Close the pop-up window 15. Enter the mapping data for the Master Section a. Title: Sales Orders b. OData Collection: SalesOrders c. Item Title: SalesOrderNumber d. Numeric Attribute: TotalAmount e. Units Attribute: Curreny f. Attribute 1: CustomerId g. Attribute 2: CustomerName h. Search Field: SalesOrderNumber 11

12 16. Scroll down to the end to see the fields for the Detail Section. Enter the mapping data for the Detail Section a. Title: Sales Order b. Detail Text: Sales Order Details c. Item Title: CustomerName d. Numeric Attribute: SalesOrderNumber e. Units Attribute: CustomerID f. Attribute 1: NetPriceAmount g. Attribute 2: TaxAmount h. Attribute 3: OrderDate Press Next 17. Click Finish. This will generate all the files in your workspace. 12

13 4.3 Run the application and show the resulting app Explanation Screenshot 18. Open the new project folder 13

14 19. Select the file index.html of the application 20. Click on the icon Run 21. You can use salesrep02/kelley123 for credentials in the SAP system. You would need to ask your system admin for your specific credentials. 14

15 22. The Application Preview is started, the application is loading and data is fetched from the OData Service 23. Show the app in the different screen sizes, 24. Select the size Small and change the orientation 15

16 4.4 Continue building the application using the Layout Editor Explanation Screenshot 25. In the project, click the folder view if not already expanded 26. Select the file Detail.view.xml and rightclick. Select Open with > Layout Editor and WYSIWYG mode of the view is displayed 16

17 27. Notice that when clicking on the different controls in the view the properties of the control are shown 28. On the left side, expand some down-arrows to see the different controls that are available 29. See that a control can be deleted from the UI. Click on the icon on the bottom bar and delete (<del>) 17

18 30. Click on {i18n>description and delete (<del>) 31. Expand the Tile control section 32. Select the Kpi Tile and drag it to the UI at the postion above the information icon. Change the description from Revenue to Total Amount 18

19 33. Open the Outline pane (far right dark grey vertical bar, last icon). If you have a small display, you may arrange by minimizing for example the control patterns. 34. Make sure that the Kpi Tile is selected, otherwise click on it. In the Outline pane on the right, the sap.suite.ui.commons.kpitile is highlighted 19

20 35. Expand it and expand again the underlying properties 36. Select the property value, now the Data is shown instead of the control Properties 20

21 37. Scoll down the data under SalesOrders and select TotalAmount 38. Repeat for ValueUnit, select data Currency 39. Click on icon Save or File > Save 21

22 40. Run the application and show the resulting app 1. Select the file index.html of the application 2. Click on the icon Run 41. The Application Preview is started, the application is loading and data is fetched from the OData Service. Check that the total amount is displayed in the detail view as designed. 22

23 4.5 Run the application with mock data Explanation Screenshot 42. You may close open tabs and select the file index.html of the application. Run the app with mock data this time. (Run > Run with Mock Data) 43. Check that data has been generated 23

24 44. To have more meaningful data we can create a JSON file with predefined data. Go back to your project view and expand the folder model. 45. Select the file metadata.xml the was generated while defining the OData Service connection previously. Righ-click the file and select Edit Mock Data 46. The popup window Edit Mock Data is displayed. Select the entity set SalesOrders as this is the data we are displaying in our app. 24

25 47. You could enter your data row by row. To simplify this task we will let SAP Web IDE generate random data for us. Click on Generate Random Data 48. You can overwrite some data fields. Just click in the text field and write your data. In our example, we have replaced the SALESORDERNUMBER in the first two by and respectively. 49. When you are finished replacing the data, press OK. 25

26 50. Check that the file SalesOrder.json has been generated in the model folder and check the file content. 51. Now we need to tell the system that it should use the JSON file when running the app with mock data. The configuration is done in the project settings. Right-click the project main folder and select Project Settings 52. Select Mock Data. In the Mock Data Source section select JSON files. Then click Save 26

27 53. Acknowledge the information that the project settings have been saved by pressing OK 54. You may close the project settings pane by pressing Close. You may also close the SalesOrder.json file 55. Select the index.html file and run the application again (Run > Run with Mock Data) 27

28 56. Check that the data from the json file is displayed 28

29 4.6 Deploy the application to the cloud Explanation Screenshot 1. Right-click your main project name and select Deploy and then Deploy to SAP HANA Cloud 2. You will get the information that the name must be lower case. 29

30 3. Change the name and provide your password (that is your SCN password). Then press Deploy 4. Upon success, press OK 5. Logon to your SAP HANA Cloud Platform Cockpit account and select the content HTML5 Applications. Check that your new application is listed. Click on your application name. 30

31 6. Notice that your application is deployed but not yet activated. In the next steps, we will activate the application in the Cockpit. 7. For this we need first to create a version of the last commit. Select under Content: Development and then click on the icon Create Version of the last committed line (that will be at the top of the list). 8. Define a new version number, e.g. 1.0, then press Add 31

32 9. Check that the version number has been assigned. 10. Now we need to activate that version. Select under Content: Version Management, then press on the activate icon of your defined version. 11. Confirm that you want to start your application by pressing Yes 12. Check that the application is activated, you should see a check in is Active. Now we want to launch the application by clicking on the link provided. 32

33 13. Provide your credentials of the OData Service. In our example: salesrep02/kelley You should see your app running. DONE! 33

34 SAP SE. 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 SE 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, 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 SE 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.