Taking user experience one step further: A support library for SAPUI5/Fiori Apps

So after some good moments of UX workshops, design, coding and testing we have our app ready and already in production, Hooray!

So, hopefully our apps will work like a swiss clock and everything will move as planned, but eventually, let’s face it, we might get one call one morning from a user who needs assistance due to her new favorite app needs some tuning and something is not quite working.

Maybe there are procedures in place in the company, maybe not yet, but wouldn’t it be more comfortable if by the time an app fails we could have detail of the errors and the surrounding context of the same, so we can expedite any fixes needed and improve our user’s experience at that moment too?

Well, that precisely is the objective of this small library.

Here is an example of the output that is possible by using the library after an exception in one method:

What we get from this library?
The idea is, that we pass an instance of the methods that we want to “support”, the library will help us log:

  • The method name
  • The arguments that were used while calling a method
  • The full URL used to access the application
  • The SAPUI5 log entries
    The exception description

After that, we will have a JavasScript object that we can explore or send to some database (via a REST call for example).

How can I implement it?

The first step is to add a reference to the library.

So having added the library to the workspace you can for example, add a reference to the library inside the SAP WebIDE like:

Another way could be including it into your project:

And then register it into your Component.js:

How do I use it?

To use it, we will first import them into our code. Next, we will register the methods we want to track by passing to the library one object that contains them, for example, the object containing the methods and properties for a controller:

Read More: SAP Fiori Application Developer Certification

In our example, and differently from many other apps that we could have seen, we encapsulate the properties to create our controller in an object oControllerOptions.

Next, we pass that object to our library function with a call. We also specify the parameters for the library, with bIsActive to activate the library (we could use this part with an url parameter so activating it depends on what we pass in a URL parameter for example), and sRESTUrl (along with user and password) to specify an endpoint where we can record the results every time we get an exception.

Then we pass the oControllerOptions object we created. Finally, we pass what we get back from the library to the BaseController.extend method so we create our controller.

The result

After we have applied the library, we would be able to see in the console all the methods that are being watched:

After an exception occurs, we would be able to see the debug information in the oCurrentFunction object of the library.

Since we specified a REST endpoint in our example, we can also see how the log information is passed to the service so it can be reviewed at a later stage.

Leave a Reply

Your email address will not be published. Required fields are marked *