Technical Articles
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!
it's a little like CAP as a mockserver, only ... darker 😂🙃