How to display technical errors in a fiori template

[Former Member]

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:

From:


To:


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 = jQuery.sap.parseJS(sDetails.responseText);

            } 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) {

		return;

	}

	this._bMessageOpen = true;

	MessageBox.error(

		this._sErrorText, {

			id: "serviceErrorMessageBox",

			details: this._extractError(sDetails),

			styleClass: this._oComponent.getContentDensityClass(),

			actions: [MessageBox.Action.CLOSE],

			onClose: function() {

				this._bMessageOpen = false;

			}.bind(this)

		}

	);

}

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