Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

Creating a Fiori Starter Application in SAP Web IDE for Sales Order Tracking Part 2

$
0
0

In the last post I've shown you how you can create a new Fiori Starter Application based on the Sales Order Tracking service provided by the SAP Gateway system. And how you can enhance the detail view by using the Layout Editor.

 

In this part I will show you how you can run the app with mock data and how you can deploy the application to SAP HANA Cloud.

 

 

 

 

Run the application with mock data


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)

39.png

 

Check that data has been generated (sometimes it needs a little bit time!)

40.PNG

 

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.

41.png

 

Select the file metadata.xml the was generated while defining the OData Service connection previously. Righ-click the file and select Edit Mock Data

42.png

 

The popup window Edit Mock Data is displayed. Select the entity set SalesOrders as this is the data we are displaying in our app.

43.png

 

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

44.png

 

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 12345 and 56789 respectively.

45.png

 

When you are finished replacing the data, press OK.

46.png

 

Check that the file SalesOrder.json has been generated in the model folder and check the file content.

47.png

 

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

48.png

 

Select Mock Data. In the Mock Data Source section select JSON files. Then click Save

49.png

 

Acknowledge the information that the project settings have been saved by pressing OK

50.png

 

You may close the project settings pane by pressing Close. You may also close the SalesOrder.json file

51_.png

 

Select the index.html file and run the application again (Run> Run with Mock Data)

52.png

 

Check that the data from the json file is displayed

53.png

 

 

Deploy the application to the cloud

 

Right-click your main project name and select Deploy and then Deploy to SAP HANA Cloud

54.png

 

Provide your password (that is your SCN password). Then press Deploy.

(If you don't know your SCN password, here you can reset it.)

56.png

 

Upon success, press OK

57.png  58.png

 

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.

59.png

 

Notice that your application is deployed but not yet activated. In the next steps, we will activate the application in the Cockpit.

60.png

 

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

61.png

 

Define a new version number, e.g. 1.0, then press Add

62.png

 

Check that the version number has been assigned.

63.png

 

Now we need to activate that version. Select under Content: Version Management, then press on the activate icon of your defined version.

64.png

 

Confirm that you want to start your application by pressing Yes

65.png

 

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.

66.png

 

Provide your credentials of the OData Service.

67.PNG

 

You should see your app running. DONE!

68.PNG

 

 

 

 

More Web IDE stuff published by Technology RIG

 

 

See you

Claudi


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>