how to create a fiori starter pplication for sales order tracking

8/10/2019 How to Create a Fiori Starter pplication for Sales Order Tracking

http://slidepdf.com/reader/full/how-to-create-a-fiori-starter-pplication-for-sales-order-tracking 1/34

SAP Web IDEHow-To Guide

Provided by Customer Experience Group

Creating a Fiori Starter Application for sales ordertracking

Applicable Releases:SAP Web IDE 1.4

Version 2.0 - October 2014



Creating a Fiori Starter Application for sales order tracking

3

TABLE OF CONTENTS

1. Business Scenario ............................................................................................................................ 4

2. Background Information .................................................................................................................. 4

3. Prerequisites ................................................................................................................................... 4

4. Step-by-Step Procedure ................................................................................................................... 5

4.1 Start creating a new project................................................................................................................ 5

4.2 Using a template to create a Starter Fiori Application ....................................................................... 7

4.3 Run the application and show the resulting app .............................................................................. 13

4.4 Continue building the application using the Layout Editor ............................................................... 16

4.5 Run the application with mock data ................................................................................................. 23

4.6 Deploy the application to the cloud .................................................................................................. 29




4

1. BUSINESS SCENARIO

SAP Web IDE is a next-generation cloud-based meeting space where multiple project stakeholders can worktogether 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 andaccelerate 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 OrderTracking service provided by the SAP Gateway system. We will then enhance the detail view by using theLayout 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.




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 project2. Using a template to create a Starter Fiori Application3. Run the application and show the resulting app4. Continue and build the application using the Layout Editor5. 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 localworkspace.

Explanation Screenshot

1. Start from creating a newproject File > New > Project

2. The wizard to create a newproject displays the first stepon Basic Information. Atwizard step #1 (Basic

Information), define theProject Name:MySalesOrderTracking




6

3. Click on Next button




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


4. At wizard step #2 (Select aTemplate), select the SAPFiori Application templatecatalog.You could also select AllCategories, and you would

get all available templatesdisplayed on the screen.

5. Select the tile SAP FIoriStarter Application if it is notalready selectedautomatically. You can see ifthe template is selected bythe upper right corner.Then click on Next




8

6. At wizard step #3 (DataConnection), click onService Catalog to get all

the available OData Serviceson the SAP Gateway system

7. Open the drop down list andselect the Gateway system(GM6).




9

8. You can usesalesrep02/kelley123 forcredentials in the SAP

system. You would need toask your system admin foryour specific credentials.The list of OData Services isbeing fetched

9. Scoll down the list to see allthe OData Services availableon the Gateway systemselected




10

10. Search for "tracking" toshow search and filtercapabilities

11. Select the relevant ODataService,SRA018_SO_TRACKING_SRVE [Ext]

12. Expand the ODataService and show defineddata collections for thisOData Service. Select

SRA018_SO_TRACKING_SRVE [Ext and click Next




11

13. At wizard step #4(Template Customization),click on the screenshot to

display a bigger view of theMaster/Detail applicationlook

14. Close the pop-up window

15. Enter the mapping datafor the Master Section

a. Title: Sales Ordersb. OData Collection:

SalesOrdersc. Item Title:SalesOrderNumber

d. Numeric Attribute:TotalAmount

e. Units Attribute:Curreny

f. Attribute 1:CustomerId

g. Attribute 2:CustomerName

h. Search Field:SalesOrderNumber




12

16. Scroll down to the end tosee the fields for the DetailSection.

Enter the mapping data forthe Detail Section

a. Title: Sales Orderb. Detail Text: Sales

Order Detailsc. Item Title:

CustomerNamed. Numeric Attribute:

SalesOrderNumbere. Units Attribute:

CustomerIDf. Attribute 1:

NetPriceAmountg. Attribute 2:TaxAmount

h. Attribute 3: OrderDate

Press Next

17. Click Finish. This willgenerate all the files in yourworkspace.




13

4.3 Run the application and show the resulting app


18.Open the new project folder




14

19. Select the file index.htmlof the application

20. Click on the icon Run

21. You can usesalesrep02/kelley123 forcredentials in the SAPsystem. You would need toask your system admin for

your specific credentials.




15

22. The Application Preview isstarted, the application isloading and data is fetched

from the OData Service

23. Show the app in thedifferent screen sizes,

24. Select the size Small andchange the orientation




17

27. Notice that when clickingon the different controls inthe view the properties of the

control are shown

28. On the left side, expandsome down-arrows to seethe different controls that areavailable

29. See that a control can bedeleted from the UI. Click onthe icon on the bottom bar

and delete (<del>)




19

33. Open the Outline pane (far right dark grey verticalbar, last icon). If you have a

small display, you mayarrange by minimizing forexample the control patterns.

34. Make sure that the KpiTile is selected, otherwiseclick on it. In the Outlinepane on the right, thesap.suite.ui.commons.KpiTile ishighlighted




20

35. Expand it and expandagain the underlyingproperties

36. Select the property value,

now the Data is showninstead of the controlProperties




21

37. Scoll down the data underSalesOrders and selectTotalAmount

38. Repeat for ValueUnit,select data Currency

39. Click on icon Save or File> Save




22

40. Run the application andshow the resulting app

1. Select the file

index.html of theapplication

2. Click on the icon Run

41. The Application Preview isstarted, the application isloading and data is fetchedfrom the OData Service.Check that the total amountis displayed in the detail viewas designed.




23

4.5 Run the application with mock data


42.You may close open tabsand select the file index.htmlof the application. Run theapp with mock data this time.(Run > Run with MockData)

43. Check that data has beengenerated




24

44. To have more meaningfuldata we can create a JSONfile with predefined data. Go

back to your project view andexpand the folder model.

45. Select the filemetadata.xml the wasgenerated while defining theOData Service connectionpreviously. Righ-click the fileand select Edit Mock Data

46. The popup window EditMock Data is displayed.Select the entity set

SalesOrders as this is thedata we are displaying in ourapp.




25

47. You could enter your datarow by row. To simplify thistask we will let SAP Web IDE

generate random data for us.Click on Generate RandomData

48. You can overwrite somedata fields. Just click in thetext field and write your data.In our example, we havereplaced theSALESORDERNUMBER inthe first two by 12345 and56789 respectively.

49. When you are finishedreplacing the data, press OK.




26

50. Check that the fileSalesOrder.json has beengenerated in the model

folder and check the filecontent.

51. Now we need to tell thesystem that it should use theJSON file when running theapp with mock data. Theconfiguration is done in theproject settings.Right-click the project mainfolder and select ProjectSettings

52. Select Mock Data. In theMock Data Source sectionselect JSON files. Then clickSave




27

53. Acknowledge theinformation that the projectsettings have been saved by

pressing OK

54. You may close the projectsettings pane by pressingClose. You may also closethe SalesOrder.json file

55. Select the index.html fileand run the application again(Run > Run with Mock

Data)




28

56. Check that the data fromthe json file is displayed




29

4.6 Deploy the application to the cloud


1. Right-click your mainproject name and selectDeploy and then Deployto SAP HANA Cloud

2. You will get theinformation that the namemust be lower case.




30

3. Change the name andprovide your password(that is your SCN

password). Then pressDeploy

4. Upon success, press OK

5. Logon to your SAP HANACloud Platform Cockpitaccount and select the

contentHTML5 Applications.Check that your newapplication is listed. Clickon your application name.




31

6. Notice that yourapplication is deployedbut not yet activated. In

the next steps, we willactivate the application inthe Cockpit.

7. For this we need first tocreate a version of the lastcommit. Select underContent: Development and then click on the iconCreate Version of the lastcommitted line (that willbe at the top of the list).

8. Define a new versionnumber, e.g. 1.0, thenpress Add




32

9. Check that the versionnumber has beenassigned.

10. Now we need to activatethat version. Select underContent: VersionManagement, then presson the activate icon ofyour defined version.

11. Confirm that you want tostart your application bypressing Yes

12. Check that the applicationis activated, you shouldsee a check in “is Active”. Now we want to launchthe application by clickingon the link provided.




33

13. Provide your credentialsof the OData Service. Inour example:

salesrep02/kelley123

14. You should see your apprunning.DONE!



© 2014 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 Germanyand 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 materialsare provided by SAP SE and its affiliated companies ("SAP Group")

f i f ti l l ith t t ti t f

www.sap.com

how to create a fiori starter pplication for sales order tracking

Documents