Technical Articles

EDGAR MARTINEZ

April 20, 2019 3 minute read

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).

Where can I find it?

You can find it in the following GitHub repository:

https://github.com/eamarce/technicalSupportLibrary

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:

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.

Conclusion

I hope you can find this library useful, so it can help you get better debug and support information to provide a faster experience to your users.

Also, being at a initial stage, it is pretty open for further improvements and collaboration, so I appreciate any suggestions.

Thank you!

Best Regards!

2 Comments

You must be Logged on to comment or reply to a post.

Julian Haupt

May 3, 2019 at 8:29 am

Hello,

Thank you very much for sharing this.

I really think that could be very helpfull.

But i have some problems with the integration. Can you please tell me how to implement this library with the ne code structure of controllers in ui5? i don’t get it to work.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("RadioButtonWrapping.controller.View1", {

	});

});

Thank you for your help

EDGAR MARTINEZ

Blog Post Author

May 4, 2019 at 6:02 pm

Hello Julian,

Thanks for your feedback, I´ve just added an example project in the repo.

As a small reference, one way to do it is adding the files directly into the project.

Next, we need to register the library inside the Component.js, for example, in the init method:

	
/// Just a fragment for reference


init: function() {
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);
			
			jQuery.sap.registerModulePath("com.support.technicalsupportlibrary", "../libraries/com/support/technicalsupportlibrary");

}

Afterwards, we will include a library import in the controller.

Perhaps the important part here is, we need to pass the JavaScript object that is used to configure the controller (the one that contains the methods of the controller) as a parameter of the function. Based in your example, it could be something similar to:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
        "com/support/technicalsupportlibrary/library"
], function (Controller) {
	"use strict";

	return Controller.extend("RadioButtonWrapping.controller.View1", 
/// This part is what we pass to the library
        {

	}
/// This part is what we pass to the library
        );

});

And so, the "final" result could look like:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
        "com/support/technicalsupportlibrary/library"
], function (Controller) {
	"use strict";

	return Controller.extend("RadioButtonWrapping.controller.View1", 

/// This is the actual library call
  SupportLibrary.activateSupportOnObject.call
			 (null, {
			 	bIsActive : "true", 
			 	sRESTUrl: "https://user.hanatrial.ondemand.com/support/xs/support.xsjs",
			 	sUser:"APIUser",
			 	sPassword:"APIPassword"
			 }, 

/// This part is what we pass to the library
        {
               //// Your controller methods would be here
	}
/// This part is what we pass to the library )

});

Please notice, we are passing what would normally be the contents of the controller as the last parameter of the library method call.

I hope this is helpful 🙂 I can provide more assistance if needed.