Solved: App.view doesn't appear to be loading

Joe__ · ‎2024 Jul 10

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

		}
	}
}

boghyon · ‎2024 Jul 12

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.
- When developing in an environment that supports Visual Studio Code extensions, UI5 Language Assistant can help catching such errors early at development time.
- The structure of manifest.json is documented in topic "Descriptor for Applications, Components, and Libraries (manifest.json)" - SAPUI5 Documentation.

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.

App.view doesn't appear to be loading

The App.view.xml itself is not loading:

The App.view.xml does load but the page is still empty:

SAP Build Work Zone Applikacation Router App Versi...

Re: SAP CAP: How to add query parameters to S/4 ba...

Re: i am using custom v2 service mdk after that i ...

Write PDF to Azure Blob Storage

Re: Troubleshooting 431 Status Code When Creating ...