Hi everyone,
I'm Daniele Incampo SAPUI5 and HANA’s developer.
I'm writing my first blog post so I hope you will be understanding.
Here is a simple SAPUI5 example of how to show backend errors.
I'm writing this because I found many obstacles during my app development. So I would like to be helpful for those like me who are novice with SAPUI5.
Into YOURENTITY_GET_ENTITY (my use case) or any other method of ZCL_YOURPROJECT_DPC_EXT (I think it shoud works):
(In my case, errors were reported with 'E' or 'A')
The result will be something like this :
After creating the project, the structure is like this. We will focus on writing code into the Utilities.js (You can easily find how to create this here: https://blogs.sap.com/2019/04/08/the-utilities.js-file-a-lot-of-useful-functions-and-scripts/ )
After you create, you need to import into your controller like this :
So now you will be able to use Utilities.js functions into standard Main.Controller.js simply referring with Utilities.function();
After read your entity set, you have to specify success and error functions. You should write something like this:
We will focus on error function, what you will write into success function is irrelevant for this blog post. So, we will retrieve errors from backend in this way:
That's why you can see debugging the code:
That's how it works for me.
I made something like the sample of MessageView ( https://sapui5.hana.ondemand.com/#/entity/sap.m.MessageView/sample/sap.m.sample.MessageViewInsideDia... ) with some customization like a preview message as title, signal error by severity, exc.
And that's the final result:
We achieved the goal to show errors coming from back-end into our app using Utilities.js and bapiret2_t as type table.
Please comment if you have any queries. Also request you to let me know if any changes required.
Thanks,
Daniele
I'm Daniele Incampo SAPUI5 and HANA’s developer.
I'm writing my first blog post so I hope you will be understanding.
Here is a simple SAPUI5 example of how to show backend errors.
I'm writing this because I found many obstacles during my app development. So I would like to be helpful for those like me who are novice with SAPUI5.
BACK-END
Into YOURENTITY_GET_ENTITY (my use case) or any other method of ZCL_YOURPROJECT_DPC_EXT (I think it shoud works):
Declaration
DATA: lo_meco TYPE REF TO /iwbep/if_message_container,
lx_busi_exc TYPE REF TO /iwbep/cx_mgw_busi_exception,
lt_log TYPE bapiret2_t.
Code:
(In my case, errors were reported with 'E' or 'A')
IF lt_log IS NOT INITIAL. "Se vengono restituiti dei messaggi
LOOP AT lt_log INTO DATA(ls_log) WHERE type EQ 'E' OR type EQ 'A'.
ENDLOOP.
IF sy-subrc EQ 0. "Se ci sono messaggi di errore
lo_meco = mo_context->get_message_container( ).
lo_meco->add_messages_from_bapi(
EXPORTING
it_bapi_messages = lt_log
).
CREATE OBJECT lx_busi_exc
EXPORTING
message_container = lo_meco.
RAISE EXCEPTION lx_busi_exc.
ENDIF.
ENDIF.The result will be something like this :
FRONT-END
After creating the project, the structure is like this. We will focus on writing code into the Utilities.js (You can easily find how to create this here: https://blogs.sap.com/2019/04/08/the-utilities.js-file-a-lot-of-useful-functions-and-scripts/ )
After you create, you need to import into your controller like this :
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageBox",
"./Utilities"
], function (Controller, JSONModel, MessageBox, Utilities) {
"use strict";So now you will be able to use Utilities.js functions into standard Main.Controller.js simply referring with Utilities.function();
After read your entity set, you have to specify success and error functions. You should write something like this:
We will focus on error function, what you will write into success function is irrelevant for this blog post. So, we will retrieve errors from backend in this way:
var a = JSON.parse(response.responseText);
var errDetails = a.error.innererror.errordetails;
Utilities.manageErrors(errDetails);That's why you can see debugging the code:
Utilities.js
That's how it works for me.
I made something like the sample of MessageView ( https://sapui5.hana.ondemand.com/#/entity/sap.m.MessageView/sample/sap.m.sample.MessageViewInsideDia... ) with some customization like a preview message as title, signal error by severity, exc.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
'sap/m/Link',
"sap/ui/core/Icon",
"sap/m/MessageItem",
"sap/m/MessageView",
"sap/m/Button",
"sap/m/Bar",
"sap/m/Text",
"sap/m/Dialog"
], function (Controller, JSONModel, Link, Icon, MessageItem, MessageView, Button, Bar, Text, Dialog) {
"use strict";
return {
initMessage: function (errDetails) {
// var oLink = new Link({
// text: "Show more information",
// href: "http://sap.com",
// target: "_blank"
// });
var a = this.getText("year");
var oMessageTemplate = new MessageItem({
type: '{type}',
title: '{title}',
description: '{description}',
subtitle: '{subtitle}',
counter: '{counter}',
markupDescription: '{markupDescription}'
// link: oLink
});
var aMockMessages = [];
for (var i = 0; i < errDetails.length; i++) {
var name = errDetails[i].severity;
var nameCapitalized =
name.charAt(0).toUpperCase() + name.slice(1);
var semiDescription =
errDetails[i].message.slice(0, 10);
semiDescription =
semiDescription.concat('...');
var oMockMessage = {
type: nameCapitalized,
title: semiDescription,
description: errDetails[i].message
};
aMockMessages.push(oMockMessage);
}
var oModel = new JSONModel();
oModel.setData(aMockMessages);
var that = this;
var oBackButton = new Button({
icon: sap.ui.core.IconPool.getIconURI("navback"),
visible: false,
press: function () {
that.oMessageView.navigateBack();
this.setVisible(false);
}
});
this.oMessageView = new MessageView({
showDetailsPageHeader: false,
itemSelect: function () {
oBackButton.setVisible(true);
},
items: {
path: "/",
template: oMessageTemplate
}
});
this.oMessageView.setModel(oModel);
this.oDialog = new Dialog({
resizable: true,
content: this.oMessageView,
state: 'Error',
beginButton: new Button({
press: function () {
this.getParent().close();
},
text: "Close"
}),
customHeader: new Bar({
contentMiddle: [
new Text({
text: "Error"
})
],
contentLeft: [oBackButton]
}),
contentHeight: "300px",
contentWidth: "500px",
verticalScrolling: false
});
},
manageErrors: function (errDetails) {
this.initMessage(errDetails);
this.oMessageView.navigateBack();
this.oDialog.open();
}
};
});And that's the final result:
We achieved the goal to show errors coming from back-end into our app using Utilities.js and bapiret2_t as type table.
Please comment if you have any queries. Also request you to let me know if any changes required.
Thanks,
Daniele
- SAP Managed Tags:
3 Comments
