cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

UI5 Routing (does not load)

Go to solution
former_member522350
Explorer

on ‎10-06-2017 11:15 PM

0 Kudos

Hello colleagues,


I just started at SAP and had my first UI5 training.
Next week we have to programm a shopping app in UI5 and I wanted to try a simple routing (unfortunately, this has not been addressed). I read through many sites and checked my code 3 times.. but I can't find my mistake.
Can you help me?
He simple not loading the manifest.json file.

I know it looks like really much code to check but the most is generated.

I really hope that you can help me. I am stuck for 3 hours.

Best regards
Christian

<!DOCTYPE HTML>
<html>


	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta charset="UTF-8">


		<title>HelloWorld</title>


		<script id="sap-ui-bootstrap"
			src="../../resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m"
			data-sap-ui-theme="sap_belize"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-resourceroots='{"sap.training": ""}'>
		</script>


		<link rel="stylesheet" type="text/css" href="css/style.css">


		<script>
			var oView = sap.ui.view({
            				    id:"idmain",
            				    viewName:"sap.training.view.main",
            				    type:sap.ui.core.mvc.ViewType.XML
				                    });
				oView.placeAt("content");
		</script>
	</head>


	<body class="sapUiBody" role="application">
		<div id="content"></div>
</html>

<mvc:View controllerName="sap.training.controller.main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
 xmlns="sap.m">
	


	<App id="app">
	
	</App>
</mvc:View>

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";


	return Controller.extend("sap.training.controller.main", {


	});
});

{
	"_version": "1.7.0",
	"sap.app": {
		"id": "sap.training.HelloWorld",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"sourceTemplate": {
			"id": "ui5template.basicSAPUI5ApplicationProject",
			"version": "1.40.12"
		}
	},


	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_hcb",
			"sap_belize"


		]
	},


	"sap.ui5": {
		"rootView": {
			"viewName": "sap.training.view.main",
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {}
			}
		},
		
	
      
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.trainingHelloWorld.i18n.i18n"
				}
			}
		},
		
			"routing": {
         "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "sap.training.view",
            "controlId": "App",
            "controlAggregation": "pages",
            "transition": "slide"
         },
         "routes": [
         	{
            "pattern": "",
            "name": "App",
            "target":"home"
         },
        	{
            "pattern": "S2",
            "name": "S2",
            "target":"Page2"
        	}],
        	"targets": {
            "home": {
               "viewName": "App",
               "viewLevel" : 1
               },
             "Page2": {
              "viewName": "S2",
              "viewLevel" : 1
              }
        	}
      },
               
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}
}

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"sap/trainingHelloWorld/model/models"
], function(UIComponent, Device, models) {
	"use strict";


	return UIComponent.extend("sap.trainingHelloWorld.Component", {


		metadata: {
			manifest: "json"
		},


		/**
		 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
		 * @public
		 * @override
		 */
		init: function() {
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);
			this.getRouter().initialize();


			// set the device model
			this.setModel(models.createDeviceModel(), "device");
		}
	});
});

<mvc:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="sap.training.controller.App"
	xmlns:html="http://www.w3.org/1999/xhtml">
	
	
	<App>
		<pages>
			<Page title="Title">
				<content>
					<Button text="Go To View 2" press="onGo" />
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";


	return Controller.extend("sap.training.controller.App", {


		onGo:function(){
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("S2");
		}


	});


});

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.training.controller.S2"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<App>
		<pages>
			<Page title="Title">
				<content>
					<Text text="This is View 2" />
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";


	return Controller.extend("sap.training.controller.S2", {


	


	});


});
Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

junwu
Active Contributor
‎10-07-2017 2:28 AM

<script>
sap.ui.getCore().attachInit(function () {

new sap.ui.core.ComponentContainer({
name: "YOURCOMPONENTID",
height: "100%"
}).placeAt("content");

});
</script>

your current component id is not correct to me.

you should use sap.training.***

Show replies
Show replies
former_member522350
Explorer
‎10-07-2017 10:34 AM
0 Kudos

Sir you really saved my day!!

Thank You!!

Answers (1)

Answers (1)

Former Member
‎10-07-2017 6:09 AM
0 Kudos

Hi Christian,

In your component.js file, the namespace you mentioned ("sap.trainingHelloWorld") is not same as the namespace mentioned in index.html file ("sap.training"). Please check.

Show replies
Show replies
Ask a Question