Offline development of UI5 applications using The Mockserver

Motivation

There would be an oData service modeled before the developement phase, at least in an ideal world. We can then let our frontend ui5 developers use the mockserver instead of running oData service on SAP GW. The mockserver responds to all oData requests with some sample data, so our backend developers can feel free to experiment with SAP GW as much as they want and not to be afraid of stopping ui5 developers from work.

Using Mockserver

The mockserver can be found in library sap.ui.core.util.MockServer. The settings are quite simple, even though some mistake can take you hour(s) of debugging (like me).

1. You need to include Mockserver's library.
2. You need to prepare you metadata in xml file. You can use existing service, grab its metadata with $metadata command in gateway client like this you_service/ZSA_USERS_SRV/$metadata
3. You need to prepare JSON sample data of your entities, you can use your_service/ZSA_USERS_SRV/UserSet?$format=application/json and delete metadata.

Critical part of code

    jQuery.sap.require("sap.ui.core.util.MockServer");    // Create mockserver    var oMockServer = new sap.ui.core.util.MockServer({        rootUri: "http://mymockserver/",    });                   oMockServer.simulate("model/metadata.xml", "model/");    oMockServer.start();    // setting up model    var oModel = new sap.ui.model.odata.ODataModel("http://mymockserver/", true);    oModel.setCountSupported(false);    sap.ui.getCore().setModel(oModel);

Running application

I used my example openui5 application that can manage(add, edit, delete) users and boosted it with mockserver.

You can try the application with mockserver by yourself here - http://pmarcely.github.io/mockserver.html

All the codes are also in my github:

• mockserver.html
• metadata.xml
• User.json

Remarks

1. It seems strange to me that metadata are in XML, while sample data in JSON, it would be smooth to work with one format.
2. There are some error messages from mockserver in my application, even though it is working properly. If you know what it is wrong let me know.
3. For more sophisticated usage you can check source code of application Cart in UI5 demo apps.

Hope you enjoy it!