on 2024 Jul 10 1:15 AM
I'm trying to build an XSA application and am currently following Thomas Jung's Hana Developer series. Specifically, I'm on this video, trying to implement a UI for my OData v2 service. I have everything set up similar to how he does, however when I run the web module the only thing that loads is the nav bar at the top which is coming seperately from my startup.js file, nothing from my App.view.xml is getting loaded. I'm getting no errors and nothing in my console logs. I've checked my namespaces and everything appears to be correct and pointing to where it should. Please let me know if there any additional files that would be useful in identifying the issue.
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link type="image/x-icon" href="/images/favicon.ico" rel="shortcut icon">
<link type="image/x-icon" href="/images/favicon.ico" rel="icon">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize_plus"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-language="en"
data-sap-ui-resourceroots='{
"TQM.RecordsTableCreate": "./"
}'
data-sap-ui-libs="sap.m,sap.ui.comp,sap.ui.core,sap.ui.layout,sap.ui.unified">
</script>
<script type="text/javascript" src="../common/startup.js"></script>
<script>
localShellStartup("TQM.RecordsTableCreate");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Manifest.json:
{
"_version": "1.4.0",
"start_url": "index.html",
"sap.app": {
"_version": "1.4.0",
"type": "application",
"resources": "resources.json",
"i18n": "i18n/i18n.properties",
"id": "odataTQM",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "${project.version}"
},
"dataSources": {
"tqmService": {
"uri": "/xsodata/TQM.xsodata/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
},
"sap.fiori": {
"_version": "2.0.0",
"registrationIds": [],
"archeType": "transactional"
},
"sap.ui": {
"_version": "1.40.0",
"technology": "UI5",
"icons": {
"icon": "/images/favicon.ico",
"favIcon": "/images/favicon.ico"
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_bluecrystal",
"sap_belize"
]
},
"sap.ui5": {
"config": {
"sapFiori2Adaptation": true
},
"rootView": {
"viewName": "TQM.RecordsTableCreate.view.App",
"type": "XML",
"id": "app"
},
"dependencies": {
"minUI5Version": "1.40.0",
"libs": {
"sap.ui.core": {
"minVersion": "1.40.0"
},
"sap.ui.comp": {
"minVersion": "1.40.0"
},
"sap.m": {
"minVersion": "1.40.0"
},
"sap.ui.layout": {
"minVersion": "1.40.0"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"handleValidation": true,
"models": {
"": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultBindingMode": "TwoWay"
}
},
"tqmModel": {
"dataSource": "tqmService",
"type": "sap.ui.model.odata.v2.ODataModel",
"preload": "true",
"settings": {
"useBatch": false,
"json": true,
"defaultBindingMode": "TwoWay",
"defaultUpdateMethod": "PUT"
}
},
"config": {
"type": "sap.ui.model.json.JSONModel"
},
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleUrl": "./i18n/i18n.properties"
}
}
}
}
}
}
Request clarification before answering.
The root view (App.view.xml) is probably missing a root control such as the sap.m.App. Refer to my other answer https://stackoverflow.com/a/50951902/5846045.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Joe,
If nothing is being displayed in your console.log, the issue might be in your index.html file. You are loading a script file and 1 line after you are calling a function from it (I assume).
<script type="text/javascript" src="../common/startup.js"></script>
<script>
console.log('before calling localShellStartup');
localShellStartup("TQM.RecordsTableCreate");
console.log('after calling localShellStartup');
</script>
set a breakpoint and check if your startup.js file is loaded already. You could move up your startup.js file to the top of your index page (but still have the risk it is not loaded yet) or use defer (or async) to make sure it is loaded.
Is there nothing in your network tab that fails? You could try a different theme: sap_fiori_3 instead of sap_belize_plus.
These are my thoughts and my way of finding the issue. I assume your App.view.xml is loaded in your network tab? If so, you will probably get an error of ui5 if something goes wrong there.
Regards,
Noël
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Noel, thanks for the response.
I added the logs and the both run before and after. The startup.js is just loads the unified shell with a logo, logoff, etc. buttons and initializes the UI framework to load within the shell.
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0, no-shadow:0*/
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);
}
function localShellStartup(name) {
sap.ui.getCore().attachInit(function () {
var ComponentContainer = new sap.ui.core.ComponentContainer({
height: "100%"
});
var username = getSessionInfo();
// create a shell
new sap.ui.unified.Shell({
id: "myShell",
icon: "/images/logo.png",
headEndItems: new sap.ui.unified.ShellHeadItem({
icon: "sap-icon://log",
tooltip: "Logoff",
press: function () {
window.location.href = "/my/logout";
}
}),
user: new sap.ui.unified.ShellHeadUserItem({
image: "sap-icon://person-placeholder",
username: username
}),
content: ComponentContainer
}).placeAt("content");
var oComponent = sap.ui.component({
id: "comp",
name: name,
manifestFirst: true,
async: true
}).then(function (oComponent) {
ComponentContainer.setComponent(oComponent);
});
});
}
I also added console logs to the component.js when the init function is called and after to make sure it runs:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"./model/models"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("TQM.RecordsTableCreate.Component", {
metadata: {
manifest: "json"
},
init: function () {
console.log("Component init called");
sap.ui.require([
"sap/m/MessageBox",
"sap/m/MessageToast"
], function (MessageBox, MessageToast) {
// Now MessageBox and MessageToast can be used here
});
this.setModel(models.createDeviceModel(), "device");
UIComponent.prototype.init.apply(this, arguments);
console.log("Root view name: " + this.valueOf());
},
destroy: function () {
// call the base component's destroy function
UIComponent.prototype.destroy.apply(this, arguments);
}
});
});
App.view.xml is being loaded asynch:
"rootView": {
"viewName": "TQM.RecordsTableCreate.view.App",
"async": true,
"type": "XML",
"id": "app"
},
No errors in the console, but actually the App.view.xml is not loading in the network, last things to load are component and models:
User | Count |
---|---|
41 | |
15 | |
10 | |
9 | |
6 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.