Skip to Content
Author's profile photo Former Member

How to display technical errors in a fiori template

If you are using the Fiori templates to create your application, then you may have received an error dialog.

For example:

You can improve the usability of when the Show Details link is chosen by displaying meaningful errors from a backend message class. For example:



To do so, add a new function _extractError  and modify the _showServiceError function found in the ErrorHandler JavaScript file found the controller package.

* Extract errors from a backend message class.
* @param {object} sDetails a technical error
* @return a either messages from the backend message class or return the initial error object
* @function
* @private
_extractError: function(sDetails) {
    if (sDetails.responseText) {
        var parsedJSError = null;
           try {
               parsedJSError =;
            } catch (err) {
              return sDetails;
            if (parsedJSError && parsedJSError.error && parsedJSError.error.code) {
              var strError = "";
               //check if the error is from our backend error class
               if (parsedJSError.error.code.split("/")[0] === "MY_MSG_CLASS") {
                   var array = parsedJSError.error.innererror.errordetails;
                       for (var i = 0; i < array.length; i++) {
                          strError += String.fromCharCode("8226") + " " + array[i].message + "\n";
                  } else {
                    //if there is no message class found
                       return sDetails;
                 return strError;
    return sDetails;

Add a call to this._extractError(sDetails)  to the _ showServiceError function for the details property,

_showServiceError: function(sDetails) {
	if (this._bMessageOpen) {
	this._bMessageOpen = true;
		this._sErrorText, {
			id: "serviceErrorMessageBox",
			details: this._extractError(sDetails),
			styleClass: this._oComponent.getContentDensityClass(),
			actions: [MessageBox.Action.CLOSE],
			onClose: function() {
				this._bMessageOpen = false;

Meaningful errors from a backend message class will now be displayed.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN

      Thanks for the code, very useful.

      Something I don't understand is that in the backend, when you develop the service, you can use technical exception and business exception. I think that this popup is ok for technical exception (like a bug for example), but for business exception ("customer not allowed", "start date must be lower than end date" for example) I would expect a popup something different than a "technical error" popup.

      In this example, it doesn't make sense to say "try again later" because the user wrote an invalid value...

      I don't think there is a way to handle differently technical error and business error.

      Author's profile photo Former Member
      Former Member
      Blog Post Author


      Hi Louis-Arnaud,

      Thank you for the great feedback. I agree with you. One way would be to display either an error dialog if it’s a technical error, but a warning dialog if it’s a business error. To differentiate between the two, we could parse the response’s error code. If the message originates from the application’s ABAP message class, then it’s a business exception. Otherwise, it is a technical one.
      A better solution in my opinion would be handle as many of the business exceptions through client-side validation, if possible. Then for the exception that need backend validation I would set the control’s ValueState property to ‘Error’ and set its ValueStateText property to backend message.

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN

      Hi Nicola,

      You are right, the best option is to handle errors through client-side validation. It can be very time consuming because you have to code every controls 2 times, server-side and client side… ?