Upload
rajesh-gadamsetty
View
229
Download
0
Embed Size (px)
Citation preview
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
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 2/34
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 3/34
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
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 4/34
Creating a Fiori Starter Application for sales order tracking
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.
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 5/34
Creating a Fiori Starter Application for sales order tracking
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
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 6/34
Creating a Fiori Starter Application for sales order tracking
6
3. Click on Next button
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 7/34
Creating a Fiori Starter Application for sales order tracking
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.
Explanation Screenshot
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/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 8/34
Creating a Fiori Starter Application for sales order tracking
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).
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 9/34
Creating a Fiori Starter Application for sales order tracking
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
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 10/34
Creating a Fiori Starter Application for sales order tracking
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
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 11/34
Creating a Fiori Starter Application for sales order tracking
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
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 12/34
Creating a Fiori Starter Application for sales order tracking
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.
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 13/34
Creating a Fiori Starter Application for sales order tracking
13
4.3 Run the application and show the resulting app
Explanation Screenshot
18.Open the new project folder
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 14/34
Creating a Fiori Starter Application for sales order tracking
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.
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 15/34
Creating a Fiori Starter Application for sales order tracking
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
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 16/34
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 17/34
Creating a Fiori Starter Application for sales order tracking
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>)
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 18/34
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 19/34
Creating a Fiori Starter Application for sales order tracking
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
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 20/34
Creating a Fiori Starter Application for sales order tracking
20
35. Expand it and expandagain the underlyingproperties
36. Select the property value,
now the Data is showninstead of the controlProperties
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 21/34
Creating a Fiori Starter Application for sales order tracking
21
37. Scoll down the data underSalesOrders and selectTotalAmount
38. Repeat for ValueUnit,select data Currency
39. Click on icon Save or File> Save
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 22/34
Creating a Fiori Starter Application for sales order tracking
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.
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 23/34
Creating a Fiori Starter Application for sales order tracking
23
4.5 Run the application with mock data
Explanation Screenshot
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
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 24/34
Creating a Fiori Starter Application for sales order tracking
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.
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 25/34
Creating a Fiori Starter Application for sales order tracking
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.
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 26/34
Creating a Fiori Starter Application for sales order tracking
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
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 27/34
Creating a Fiori Starter Application for sales order tracking
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)
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 28/34
Creating a Fiori Starter Application for sales order tracking
28
56. Check that the data fromthe json file is displayed
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 29/34
Creating a Fiori Starter Application for sales order tracking
29
4.6 Deploy the application to the cloud
Explanation Screenshot
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.
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 30/34
Creating a Fiori Starter Application for sales order tracking
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.
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 31/34
Creating a Fiori Starter Application for sales order tracking
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
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 32/34
Creating a Fiori Starter Application for sales order tracking
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.
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 33/34
Creating a Fiori Starter Application for sales order tracking
33
13. Provide your credentialsof the OData Service. Inour example:
salesrep02/kelley123
14. You should see your apprunning.DONE!
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 34/34
© 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