Add Your Own Requests to SAPUI5 MockServer

A couple of weeks ago I was playing around with SAP HCP Trial WebIDE and noticed that the Fiori sample applications were using the MockServer for all OData Entity requests and also for the custom OData Function Imports.

This week I had a requirement to create a simple Function Import, the function calls the backend SAP system to determine whether or not to show a button, I used as an opportunity to investigate and learn how to add my own mock xhr request to the SAPUI5 Mockserver and thought I would share.

To add your own requests to a MockServer instance is quite simple, first set up the MockServer, retrieve the current requests, then add your request and then set the updated requests back to Mockerver.

//initialize the MockServer as per normal"sap.ui.core.util.MockServer");
var oMockServer = new sap.ui.core.util.MockServer({
    rootUri: sServiceUrl
oMockServer.simulate("model/metadata.xml", "model/");
//add your requests to the ones already set 
try {"myapp.model.mockRequests");
  var aMyRequests = myapp.model.mockRequests.getRequests();
  if (aMyRequests.length > 0) {
} catch (oErr) {;
//start the mockserver

The documentation for UI5 MockServer setRequests gives a good explanation on the structure of requests

method : “GET”|”POST”|”DELETE|”PUT”
path : “/path/to/resource”
response : function(xhr, param1, param2, …) { }

Here is the code I wrote for the ShowAddButton Mock call

    function(jQuery) {
        "use strict";
        var mockRequests = {
             * This mock determines whether the '+' add button should be shown
            mockShowAddButton: function() {
                return {
                    method: "GET",
                    path: new RegExp("ShowAddButton?(.*)"), 
                    response: function(oXhr, sUrlParams) {
              "Incoming request for ShowAddButton");
                        oXhr.respondJSON(200, {}, JSON.stringify({
                            d: {
                                ShowAddButton: true
             * get requests
             * @return {array} Array of mock request
            getRequests: function() {
                return [mockRequests.mockShowAddButton()];
        return mockRequests;

For those interested here’s a link to the Fiori Reference Apps

in the WebIDE you can find them under File->New->Project from Sample Application