cancel
Showing results for 
Search instead for 
Did you mean: 
Read only

App.view doesn't appear to be loading

Joe__
Associate
Associate
2,006

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"
					}
				}
			}

		}
	}
}



Accepted Solutions (1)

Accepted Solutions (1)

boghyon
Product and Topic Expert
Product and Topic Expert
0 Kudos
The App.view.xml itself is not loading:
  • Ensure that the namespaces are all matching. For example, the `/sap.app/id` value in manifest.json should be also "TQM.RecordsTableCreate". --> Currently, the `id` value is "odataTQM". Having inconsistent namespaces can prevent starting the app properly from FLP.
  • Ensure that the `/sap.ui5/rootView` section is not within other `/sap.*` sections. --> Currently, the entire `/sap.ui5` section and other `/sap.*` sections are within the `/sap.app` section which is incorrect.
The App.view.xml does load but the page is still empty:

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.

Joe_
Discoverer
0 Kudos

Thanks boghyon, it was indeed a misplaced curly bracket that placed the rest of the manifest under the wrong section. Are you aware of any helpful resources for moving development of an existing application in XSA to VS Code?

boghyon
Product and Topic Expert
Product and Topic Expert
0 Kudos
Unfortunately, no. But that would be another great question to post 🙂

Answers (1)

Answers (1)

Noel_Hendrikx
Active Contributor
0 Kudos

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.

https://www.linkedin.com/pulse/async-vs-defer-attributes-javascript-most-crucial-web-elias-soykat-cx...

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

Noel_Hendrikx
Active Contributor
0 Kudos

Also make sure to load your App.view.xml async as well in manifest.json (sap.ui5 section)

"viewName": "TQM.RecordsTableCreate.view.App",
"async": true,

 

Joe__
Associate
Associate
0 Kudos

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:

Joe___0-1720654802634.png