White page when I run my code with error: Uncaught ReferenceError: ui is not defined

[mahmood_hammood]

<mvc:View
	controllerName="com.volkswagen.ifdb.cc.sopraempSopra_Employee.controller.C"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="jquery.sap.global-dbg.js"
	xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
	<SplitApp
		id="SplitAppDemo"
		initialDetail="detail"
		initialMaster="master">
		<detailPages>
		    
			<Page
				id="detail"
				title="Detail 1"
				backgroundDesign= "Solid">
				<Label text="Detail page 1" />
				<Button text="Go to Detail page2" press=".onPressNavToDetail" />
			</Page>
			<Page
				id="detailDetail"
				title="Detail Detail"
				backgroundDesign= "Solid"
				showNavButton="true"
				navButtonPress=".onPressDetailBack">
				<VBox class="sapUiSmallMargin">
					<Label text="This is Detail Page2" />
					<Text text="Here you could change the Split Application mode. After the mode change, resize the browser window to see the difference in the master form behaviour." />
					<RadioButtonGroup columns="1" width="500px" class="sapUiMediumMarginBottom" select=".onPressModeBtn">
						<RadioButton id="RB1-1" text="show/hide" selected="true" custom:splitAppMode="ShowHideMode" />
						<RadioButton id="RB1-2" text="stretch/compress" custom:splitAppMode="StretchCompressMode" />
						<RadioButton id="RB1-3" text="hide" custom:splitAppMode="HideMode" />
						<RadioButton id="RB1-4" text="popover" custom:splitAppMode="PopoverMode" />
					</RadioButtonGroup>
				</VBox>
			</Page>
			<Page
				id="detail2"
				title="Detail 3 Page"
				backgroundDesign= "Solid"
				showNavButton="true"
				navButtonPress=".onPressDetailBack">
				<Label text="This is Detail Page3" />
				<Input/>
				<Label text="Label 2" />
				<Input/>
				<Label text="Label 3" />
				<Input/>
				<Label text="Label 4" />
				<Input/>
				<Label text="Label 5" />
				<Input/>
			</Page>
		</detailPages>
		<masterPages>
			<Page
				id="master"
				title="Master 1"
				backgroundDesign= "List">
				<List>
					<StandardListItem title="To Master2" type="Navigation" press=".onPressGoToMaster" />
				</List>
			</Page>
			<Page
				id="master2"
				title="Master 2"
				backgroundDesign="List"
				showNavButton="true"
				navButtonPress=".onPressMasterBack">
				<List itemPress=".onListItemPress">
					<items>
						<StandardListItem title="To Detail 1" type="Active" custom:to="detail" />
						<StandardListItem title="To Detail 2" type="Active" custom:to="detailDetail" />
						<StandardListItem title="To Detail 3" type="Active" custom:to="detail2" />
					</items>
				</List>
			</Page>
		</masterPages>
	</SplitApp>
</mvc:View><a href="/storage/temp/2170107-100.png" data-attachment="2170107">100.png</a>

[mahmood_hammood]

sap.ui.define([
	"sap/m/MessageToast",
	"sap/ui/core/mvc/Controller",
	"sap/ui/Device",
	"sap/base/Log"
], function (MessageToast, Controller, Device, Log) {
	"use strict";

	return Controller.extend("com.volkswagen.ifdb.cc.sopraempSopra_Employee.controller.C", {

		onInit: function () {
			this.getSplitAppObj().setHomeIcon({
				'phone': 'phone-icon.png',
				'tablet': 'tablet-icon.png',
				'icon': 'desktop.ico'
			});
       
			Device.orientation.attachHandler(this.onOrientationChange, this);
		},
        
		onExit: function () {
			Device.orientation.detachHandler(this.onOrientationChange, this);
			
		},

		onOrientationChange: function (mParams) {
			var sMsg = "Orientation now is: " + (mParams.landscape ? "Landscape" : "Portrait");
			MessageToast.show(sMsg, { duration: 5000 });
		},

		onPressNavToDetail: function () {
			this.getSplitAppObj().to(this.createId("detailDetail"));
			
		},

		onPressDetailBack: function () {
			this.getSplitAppObj().backDetail();
		},

		onPressMasterBack: function () {
			this.getSplitAppObj().backMaster();
		},

		onPressGoToMaster: function () {
			this.getSplitAppObj().toMaster(this.createId("master2"));
		},

		onListItemPress: function (oEvent) {
			var sToPageId = oEvent.getParameter("listItem").getCustomData()[0].getValue();

			this.getSplitAppObj().toDetail(this.createId(sToPageId));
		},

		onPressModeBtn: function (oEvent) {
			var sSplitAppMode = oEvent.getSource().getSelectedButton().getCustomData()[0].getValue();

			this.getSplitAppObj().setMode(sSplitAppMode);
			MessageToast.show("Split Container mode is changed to: " + sSplitAppMode, { duration: 5000 });
		},

		getSplitAppObj: function () {
			var result = this.byId("SplitAppDemo");
			if (!result) {
				Log.info("SplitApp object can't be found");
			}
			return result;
		}

	});
});

[mahmood_hammood]

{
	"_version": "1.7.0",
	"sap.app": {
		"id": "com.volkswagen.ifdb.cc.sopraempSopra_Employee",
		"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": "com.volkswagen.ifdb.cc.sopraempSopra_Employee.view.V",
			"type": "XML",
			"async": true
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
					"sap.f": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {},
				"sap.ui.unified": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "com.volkswagen.ifdb.cc.sopraempSopra_Employee.i18n.i18n"
				}
			}
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		},
		
		"config": {
			"sample": {
				"stretch": true,
				"files": [
				    
				    "controller/C.controller.js",
				    "view/V.view.xml",
					"manifest.json"
				]
			}
		}
	
	}
}

[mahmood_hammood]

<!DOCTYPE HTML>
<html>

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

		<title>Sopra_Employee</title>
        <script src="path/to/your/jquery.min.js"></script>
        <script src="path/to/your/jquery.ui.min.js"></script>
		<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='{
			"com.volkswagen.ifdb.cc.sopraempSopra_Employee": "./" ,
			"sap.ui.demo.mock": "mockdata" 
			}'
			data-sap-ui-async="true"
	    	data-sap-ui-frameOptions="trusted"
	    	data-sap-ui-oninit="module:sap/ui/core/ComponentSupport">
		</script>

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

		<script>
			sap.ui.getCore().attachInit(function() {
				new sap.m.Shell({
					app: new sap.ui.core.ComponentContainer({
						height : "100%",
						name : "com.volkswagen.ifdb.cc.sopraempSopra_Employee"
					})
				}).placeAt("content");
			});
		</script>
	
	</head>

	<body class="sapUiBody" id="content">
	</body>

</html>

[sergiorecasens]

Hi,

You must define the correct library in your index.html file. Now refers to a wrong UI5 library.

Change the <script> id="sap-ui-bootstrap" src=... with some of this two options:

• Load library locally:

<script id="sap-ui-bootstrap" src="/resources/sap-ui-core.js"

• Load library from CDN server::

<script id="sap-ui-bootstrap" src="https://ui5.sap.com/1.105.4/resources/sap-ui-core.js"

Thank you

[mahmood_hammood]

Hi Sergio,

Thank you for answer, I used the first option but no result. I searched in CDN founder and the result is "DNS lookup of type A failed for localhost: No DNS record available (NXDOMAIN). No Comment."

[sergiorecasens]

Hi mahmood_hammood

Please try with the first option and check if you have the folder 'node_modules' in your project. If not, open a terminal or CMD inside the folder of your app and run the command 'npm install'.

Thanks

[mahmood_hammood]

Hi Sergio,

I tried to find CMD in webide but I hav not got it .

Do you have Zoom, maybe can you explain this for me?

Thanks