cancel
Showing results for 
Search instead for 
Did you mean: 

App.view doesn't appear to be loading

Joe__
Employee
Employee
666

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

		}
	}
}



View Entire Topic
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 🙂