Esta página HTML hace referencia a tres bibliotecas de JavaScript de utilidad:
– common/csrf.js
para manejar señales CSRF
– common/error.js
para producir mensajes de error
– common/index.js
para arrancar el caparazón
Crear un common
carpeta en recursos y agregue estos tres archivos.
Aquí está la codificación de csrf.js
:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0*/
$.ajaxSetup({
beforeSend: function(xhr,settings) {
if (settings && settings.hasOwnProperty("type")
&& settings.type !== "GET"){
var token = getCSRFToken();
xhr.setRequestHeader("X-CSRF-Token", token);
}
},
complete: function(xhr,textStatus) {
var loginPage = xhr.getResponseHeader("x-sap-login-page");
if (loginPage) {
location.href = loginPage + "?x-sap-origin-location=" + encodeURIComponent(window.location.pathname);
}
}
});
function getCSRFToken() {
var token = null;
$.ajax({
url: "/xsjs/csrf.xsjs",
type: "GET",
async: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "Fetch");
},
complete: function(xhr) {
token = xhr.getResponseHeader("X-CSRF-Token");
}
});
return token;
}
Y aquí está el código para error.js
:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0*/
/*eslint-env es6 */
function onErrorCall(jqXHR, textStatus, errorThrown) {
sap.ui.require(["sap/ui/core/Core", "sap/m/MessageBox"], function (Core, MessageBox) {
if (typeof jqXHR.status === "undefined") {
var errorRes = JSON.parse(jqXHR.response.body);
MessageBox.show(
errorRes.error.innererror.errordetail.DETAIL, {
icon: MessageBox.Icon.ERROR,
title: "Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
} else {
if (jqXHR.status === 500 || jqXHR.status === 400) {
MessageBox.show(jqXHR.responseText, {
icon: MessageBox.Icon.ERROR,
title: "Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
return;
} else {
MessageBox.show(jqXHR.statusText, {
icon: MessageBox.Icon.ERROR,
title: "Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
return;
}
}
});
}
function onODataError(oError) {
sap.ui.require(["sap/m/MessageBox"], (MessageBox) => {
if (oError.statusCode === 500 || oError.statusCode === 400 || oError.statusCode === "500" || oError.statusCode === "400") {
var errorRes = JSON.parse(oError.responseText);
if (!errorRes.error.innererror) {
MessageBox.alert(errorRes.error.message.value);
} else {
if (!errorRes.error.innererror.message) {
MessageBox.alert(errorRes.error.innererror.toString());
} else {
MessageBox.alert(errorRes.error.innererror.message);
}
}
return;
} else {
MessageBox.alert(oError.response.statusText);
return;
}
});
}
function oDataFailed(oControlEvent) {
sap.ui.require(["sap/m/MessageBox"], (MessageBox) => {
MessageBox.show("Bad Entity Definition", {
icon: MessageBox.Icon.ERROR,
title: "OData Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
});
return;
}
Finalmente, compruebe que su common
la carpeta también contiene un archivo con nombre index.js
. Probablemente creó esto en un tutorial anterior. Si no es así, créelo ahora con el siguiente contenido:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0, no-shadow:0*/
/*eslint-env es6 */
sap.ui.require(["sap/ui/core/Core", "sap/ui/core/Component"], (oCore, Component) => {
function onLoadSession(myJSON) {
try {
var result = JSON.parse(myJSON);
if (result.session.length > 0) {
if (result.session[0].familyName !== "") {
return result.session[0].givenName + " " + result.session[0].familyName;
} else {
return result.session[0].UserName;
}
}
} catch (e) {
return "";
}
return "";
}
function getSessionInfo() {
var aUrl = "/node/getSessionInfo";
return onLoadSession(
jQuery.ajax({
url: aUrl,
method: "GET",
dataType: "json",
async: false
}).responseText);
}
Component.create({
id: "comp",
name: "root",
manifestFirst: true,
async: true
}).then((oComp) => {
sap.ui.require(["sap/ui/core/ComponentContainer"], (ComponentContainer) => {
let oCont = new ComponentContainer({
component: oComp,
height: "100%"
});
let username = "Test User";
oCore.loadLibrary("sap.ui.unified", {
async: true
}).then(() => {
let oShell = new sap.ui.unified.Shell({
id: "myShell",
icon: "/images/sap_18.png",
headEndItems: new sap.ui.unified.ShellHeadItem({
icon: "sap-icon://log",
tooltip: "Logoff",
press: () => {
window.location.href = "/my/logout";
}
}),
user: new sap.ui.unified.ShellHeadUserItem({
image: "sap-icon://person-placeholder",
username: username
}),
content: oCont
}).placeAt("content");
});
});
});
});