Skip to Content

Mock Data in Fiori Launchpad apps on Cloud Portal

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.

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


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.


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.

], function(UIComponent, Device, models, ListSelector, ErrorHandler, MockServer) {
	"use strict";

		init: function() {

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() {
			var oModel = new sap.ui.model.odata.v2.ODataModel({serviceUrl: "/destinations/service"});

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:

You must be Logged on to comment or reply to a post.
  • Great Post. I Followed your instruction but unfortunately In HCP I still see "old" Component.js without MockServer as parameter and without additional like MockServer.init()

    What i'm missing?

    thanks in advance

    • Hi Michael,

      You can connect to a real service instead of using mock data. You would of course not need make the changes I made to enable mock data to run in the portal.

      Are you looking to use something explicitly from BUILD? If not a WebIDE template created app that consumes and OData service can act as an efficient starting point for building an app.


  • Hi,

    I want load information from JSON with mock for launchpad because I haven’t oData. I don’t know how to configuration mockserver.js,  manifest.json and component.js

    I hope that you are able to help me.



  • It worked a little bit different for me.   Instead of   "generated/app/localService/mockserver"  place    "./localService/mockserver"




  • Hi John,

    Thank you for this tutorial! I'm beginning with the cloud platform and your way is the only way i found to deploy apps with mock data!

    I will definitely take a look at your other blogs !

  • Hi John,
    you looked for a maybe more elegant way of doing this.

    We ran into same issue and solved it so far using a custom model/MockODataModel.js to be able to preprocess mockserver.init before manifest models are created.

    ], function (ODataModel, mockserver) {
    	"use strict";
    	return ODataModel;
    }, true);

    Just change the type inside manifest.json to your custom MockODataModel

    "": {
      "dataSource": "mainService",
      "preload": true,
      "type": "abc.def.model.MockODataModel",
      "settings": {
        "defaultBindingMode": "TwoWay",
        "defaultCountMode": "Inline",
        "useBatch": true

    Using it this way, you do not need custom coding inside Component.init().

    This also makes Component more cleaner, because you do not have to load mockserver dependencies and Component will stay clear as the prod version without mock.

    To use real oData service, just rename "type" to "xtype" to comment it out ;-),

    Regards Holger

    • Hi Holger Schäfer 

      I tried your approach, but running app still tries to connect to real metadata and reach uri from manifest.json.

      What I did:

      1. Added MockODataModel.js file under model folder
      2. Changes model type under “sap.ui5” in manifest.json.

      Yet I still get error in console that [ODataMetadata] initial loading of metadata failed.


      Can you advise, please?