SAPUI5 A trip to the Dark side

For ui5 development we are normally quite tied to the backend and often waiting for the API to be developed. Yes we can use the mock server, but personally I find stubbing requests to be a bit tedious when you go above and beyond the typical lists with dummy data.

A colleague of mine recently showed me the Dark side. I thought the idea was pretty cool.

Dark is a new way of building serverless backends. Just code your backend, with no infra, framework or deployment nightmares.

Build APIs, CRUD apps, internal tools and bots – whatever your backend needs.

This video shows a bit more about the full power of Dark. I’m only scratching the surface.

Obviously we can’t use this to magically deploy to our Abap stack or similar. But it can be used to quite easily stub the requests that you need.

Let me show you how it works.

I’ve added a simple UI5 app with a main page with a list and a detail page with some navigation properties.

For simplicity I’m using the northwind service to get the data.

Use the UI5-middleware-simpleproxy to create a proxy call to the dark workspace. Check out the UI5 YAML file if you are in doubt.

When you start Dark, you get a blank canvas where you can stub your requests. You have a few options to do more advance stuff that I want to cover here. I’m happy for you to comment with ideas.

First this is that I want the metadata to be served through. If we run the app, we will see a 404 request added asking for the metadata

Let’s create a response for that call by clicking the + button.

Now paste the edmx metadata from your service into a variable. I’ve copied from the northwind service  and changed it slightly for this example. Find the altered metadata document here

It’s not pretty doing it like this. And you could add a database store and create a repl job to store the metadata in there. I won’t do that here, but here is a screeenshot to get you started.

Now back to the example. In the end of our block. We need to send a response by adding the following:

Http::responseWithHeaders
  metadata
  {
    content-type : "application/xml;charset=utf-8"
  }
  200

Here we tell the API to return our metadata variable with the content type header XML and a status code of 200.

You can now click the little burger icon and test out the API.

Alright so we can load the metadata now. But our odata call to get the orders are now returning a 404

Back in the Dark editor we can now see that call added to the list

When clicking the + icon it will create the HTTP handler for us. I’ll just paste in a couple of entries to return.

Now when refreshing we see a list with two entries

When clicking an item we get a request to the order and expanding the order details and the customer

Again we use the 404 function to create the handler.

Now we get data here as well

Let’s add a little price calculation

The calc price button is added and does a call function with two parameters product and quantity.

When we press the button in the UI. We again get a 404 in Dark. But we can now use this request to create a proper response.

So it’s fairly easy to develop a proper response to this

let amount = if request.queryParams.product == "11"
             then
               10 * String::toIntv1 request.queryParams.quantity
             else
               20 * String::toIntv1 request.queryParams.quantity
Http::responseWithJson
  {
    d : {
          product : request.queryParams.product
          quantity : request.queryParams.quantity
          amount : amount
        }
  }
  200

And when adding this in we can see the response from that request is indeed bringing us back the right amount. Bear in mind that you need the “d” in the return json to comply with the structure of the odata json.

I hope that gives you an idea. In my opinion this enables us UI developers to quickly get off the ground with our app development with also more complex data returns instead of using the mockserver.

Let me know what you think!