Skip to Content
Author's profile photo SIMMACO FERRIERO

Creating and deploying SAP Fiori app with SAP Web IDE – DC Exercise (part 2 of 3)

This is the continuation of the blog presented here.

This blog has been split in 3 parts:

Link Content
Part1 Creating a new application with SAP Web IDE – Adding a new ObjectAttribute to the Detail view
Part2 Running the application with mock data – Creating run configurations
Part3 Deploying the app to HANA Cloud Platform – Deploying the app to SAP Fiori Launchpad (optional)

In this second part we are going to see how to run the application with mock data and how to create run configurations.


For this part of the exercise, you will use the Mock Data Server to run the application with mock data. Since we used the new SAPUI5 template for creating our project, there is a new mechanism here for displaying mock data. Now the mock data server is included in the application itself and in order to invoke it you just need to start the app with a different link. Let’s see this in detail.

1. Select the test.html file in the application and click on the Run button on the top toolbar. This will show you another page: on this page, instead of running the application as a standard application in the Fiori Launchpad, we’ll run it as assisted by the mock data service by running it through the second option “test/testFLPService.html


2. The application is executed with some on the fly randomly generated data. The Mock Data Server takes the metadata.xml file in the localService folder and generates the random data for you


3. Open the localService folder and right click on the metadata.xml file. Select Edit Mock Data


4. Select the SalesOrderSet entity set, since that is one of the collections used by our application, and click on the Generate Random Data button. You will get some random data according with their field types.


5. Do the same for the SalesOrderLineItemSet and click on OK to close this window

6. If you look now in your localService folder you will find two new files named SalesOrderSet.json and SalesOrderLineItemSet.json. These two files are containing the random generated data in the JSON format. Just double click on one of these files to show its content


7. Reopen the mock data generator as described at step 3 and change one of the records (i.e. the 4th record). You can change for example the CustomerName and set it equal to Acme and the GrossAmount equal to 2000. Make sure that the “Use the data above as my mock data source” flag is selected and click on OK


8. Create a new subfolder named “mockdata” under the localService folder and move the two JSON files there


9.Run the application again with mock data and you will see the changes in the SAP Web IDE preview. Close the preview when finished



For this part of the exercise, you will be creating a run configurations in order to execute your app under some specific constraints.

1. Right click on the name of the project and choose  Run –> New Configuration…


2. Select the Web Application branch, don’t care about other existing run configurations  and click on the button New Run Configuration


3. Enter a name (i.e. “RunWithFrame”), specify the application file path which in our case points to the “/webapp/test.html” file, select the “Open with frame” option, save the file and click on the Run now button to test this new run configuration


4. The application is executed according to your settings, so in this case it’s displayed within the SAP Web IDE Preview frame


5. Now, no matter where your cursor is located inside the project explorer, if you open the Run menu, you can always run your application with the specified settings


Let’s continue with the final part of this exercise!

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.