Mock Data in Fiori Launchpad apps on Cloud Portal

[johna69]

From BUILD to Portal

Sometime we want to throw a quick mockup together to show the look and feel of FLP and Fiori applications and the possibilities in the Cloud Portal

Using Build, WebIDE and Cloud Portal with theming a good looking demo Fiori Launchpad with dynamic tiles and news feed can be put together in a few hours.

One of the challenges some developers are facing in this area is reusing MockData in FLP from the applications they generate from build projects. The following discussion archive from earlier this year delves into the problem and looks for solutions.
https://archive.sap.com/discussions/thread/3783679

We will perform a simple walkthrough on how I overcome the MockData issue (perhaps there is a more elegant solution someone can share).

Build

Build comes with a really useful gallery that provides a significant time saving when starting to build an app. For this demo we will use the Create Sales Order template from the gallery.

Create Sales Order enables a Sales Representative to create or display sales orders. You can use this as starter prototype for your related project. Pattern: Collect & Checkout / Responsive: Yes / Persona: Sales Representative.



Clone the template into your build account. We won't make any changes, we will simply publish it so that we can import the project into SAP WebIDE on an HCP Trial account.

Select the PUBLISH button at the upper right of the page.



Then Publish Project. Once the URL is visible we can then import the project into WebIDE.

WebIDE

In my trial HCP account i have the WebIDE service enabled. Inside of WebIDE the BUILD plugin is enabled.



This allows us to import the project into WebIDE from build by creating a new application from template.



From the STANDARD_TENANT I am selected the Create Sales Order app created earlier.



This creates the project in WebIDE complete with Mock Data.



Running this application with "Run as... Web Application" from WebIDE we can see the app running with Mock Data.

In minutes we have been able to create good looking Fiori application that we can test from WebIDE.



We will now push this app to HCP so that we can use it in the Cloud Portal.



Register it to the SAP Fiori Launchpad and follow the wizard to select the Site to deploy it to.



Once the wizard is complete and the app successfully registered, open the Launchpad.

Cloud Portal

My debug portal looks like this with 3 tiles:



Now if we execute the Create Sales Order application from the tile we will see something like this if we look at the error details:



The application was created from build and imported into WebIDE. The data was not created from a real OData service. We can see in the error that the application is trying to retrieve the metadata from a service that is not configured.

If we go back to WebIDE and look at the Manifest.json file we can see the configured data source with the non existent uri:

 

		"dataSources": {

			"main": {

				"uri": "/here/goes/your/serviceurl/",

				"type": "OData",

				"settings": {

					"odataVersion": "2.0",

					"localUri": "localService/metadata.xml"

				}

			}

		},

We need to enable the Mock Server in this scenario so that it handles the data requests. We can also see the failed request in the debug view:



When the app runs in the launchpad, the Mock Server is not initialized as it would be from the test.html in WebIDE. We need to initialize the Mock Server in Component.js.

	"generated/app/localService/mockserver"

], function(UIComponent, Device, models, ListSelector, ErrorHandler, MockServer) {

	"use strict";

...

		init: function() {

			

			MockServer.init();

Change the data source uri in your Manifest.json

		"dataSources": {

			"main": {

				"uri": "/destinations/service",

				"type": "OData",

				"settings": {

					"odataVersion": "2.0",

					"localUri": "localService/metadata.xml"

				}

			}

		},

 

If deployed again to HCP this will load the Mock Data, however we will get an error popup again.



Now however if you press "retry" the Mock Data will load.



The reason we are getting the error can be seen by putting a breakpoint on the call to MockServer.init() in Component.js in the network trace:



The metadata is being loaded before the MockServer is initialized. This means that the Mock Server will not handle the metadata request, but it will as we can see become a failed network request.

To prevent this, and I am hoping there may be a more elegant solution, I removed the default model from Manifest.json and created the model in Component.js after the Mock Server is initialized.

Delete this (including ',') in Manifest.json sap.ui5.models section.

,

			"": {

				"dataSource": "main",

				"type": "sap.ui.model.odata.v2.ODataModel",

				"settings": {

					"loadMetadataAsync": false,

					"json": true,

					"bJSON": true,

					"defaultBindingMode": "TwoWay",

					"useBatch": true,

					"refreshAfterChange": false

				}

			}

In Component.js add the model creation after MockServer.init:

		init: function() {

			

			MockServer.init();

			

			var oModel = new sap.ui.model.odata.v2.ODataModel({serviceUrl: "/destinations/service"});

			this.setModel(oModel);

Once again deploy the app to HCP and run from the Launchpad. The app should now be loading the Mock Data without any error messages.


If there is a more elegant way of enabling MockData on FLP I am all ears, however for now the process to go from an idea in BUILD to running a proof of concept in Cloud Portal is something that can be achieved quickly.

Source in github:
https://github.com/jastill/CreateSalesOrderMockFLP