cancel
Showing results for 
Search instead for 
Did you mean: 

Resource binding not happening in both i18n, helloPanel json

kbanerje2022
Participant
0 Kudos

Hi Team,

I am getting resource binding error, getResourceBundle() is undefined in the below code.

code-structure-in-project.png

App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	
	"sap/m/MessageToast"

], function (Controller, MessageToast) {
	"use strict";

	return Controller.extend("opensap.myapp.controller.App", {

		onShowHello : function () {
		// read msg from i18n model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel("helloPanel").getProperty("/recipient/name");
			var sMsg = oBundle.getText("helloMsg", [sRecipient]);

			// show message
			MessageToast.show(sMsg);
	

		}
	});
});<br>

i18.properties

appTitle=My demo app
appDescription=A simple demo app


showHelloButtonText=Say Hello
helloMsg=Hello {0}

<br>

HelloPanel.json

{ 
	"recipient" : {
		"name" : "World"
	}
}<br>

App.view.json

<mvc:View
displayBlock="true"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
		controllerName="opensap.myapp.controller.App">
		<Carousel>
	<pages>
			<Image 		src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Wikipedia_Hello_World_Graphic.svg/2000px-Wikipedia_Hello_World_Graphic.svg.png"
				height="400px"/>
			<Image		src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Wikipedia_Hello_World_Graphic.svg/2000px-Wikipedia_Hello_World_Graphic.svg.png"
				height="400px"/>
		</pages>

	</Carousel>
	<Button
		text="{i18n>showHelloButtonText}"	
		press="onShowHello"/>
		<Input
		value="{helloPanel>/recipient/name}"
		description="Hello {helloPanel>/recipient/name}"
		valueLiveUpdate="true"
		width="100%"/>


</mvc:View><br>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<title>openSAP - Developing Web Apps with SAPUI5</title>

		<script
			id="sap-ui-bootstrap"
			src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
			data-sap-ui-theme="sap_bluecrystal"
			data-sap-ui-libs="sap.m"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-preload="async"
			data-sap-ui-resourceroots='{
			"opensap.myapp": "./"
		}'
>
		</script>


		<script>
	sap.ui.getCore().attachInit(function () {
			sap.ui.xmlview({
				viewName : "opensap.myapp.view.App"
			}).placeAt("content");

		});


		</script>
	</head>
	<body class="sapUiBody" id="content">
	</body>
</html><br>

Component.js

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

	return UIComponent.extend("opensap.myapp.Component", {

		metadata : {
			manifest: "json"
		},

		init : function () {
			// call the init function of the parent
			UIComponent.prototype.init.apply(this, arguments);

			// additional initialization can be done here
		}

	});
});<br>

manifest.json

{
	"_version": "1.3.0",
	"sap.app": {
		"_version": "1.3.0",
		"id": "opensap.myapp",
		"type": "application",
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui": {
		"_version": "1.3.0",
		"technology": "UI5",
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": ["sap_bluecrystal"]
	},
	"sap.ui5": {
		"_version": "1.2.0",
		"rootView": {
			"viewName": "opensap.myapp.view.App",
			"type": "XML",
			"id": "app"
		},
		"autoPrefixId": true,
		"dependencies": {
			"minUI5Version": "1.44",
			"libs": {
				"sap.ui.core": {
					"minVersion": "1.44.0"
				},
				"sap.m": {
					"minVersion": "1.44.0"
				},
				"sap.ui.layout": {
					"minVersion": "1.44.0"
				}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"bundleName": "opensap.myapp.i18n.i18n"
				},
			"helloPanel": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/HelloPanel.json"
			}

		}
	}
}<br>

Error in chrome console

image.png

Resource binding error is coming, default resource binding mode is not supported in asynchronous javascript.

This code is from open sap course u51 and ran twice earlier.

getting-resource-binding-mode-error.png

Thanks

Kaushik

SAP EP/Fiori

Accepted Solutions (1)

Accepted Solutions (1)

junwu
Active Contributor
0 Kudos
"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings":{"bundleName": "opensap.myapp.i18n.i18n"}
				},
kbanerje2022
Participant

Answers (3)

Answers (3)

kbanerje2022
Participant
0 Kudos

But I am getting oData not available in es5 in personal web ide, I connected in January and ran the code.

ES5 oData connection not connecting

Thanks

Kaushik

Jagtar
Participant
0 Kudos

You can access i18n resource bundle as below
this.getOwnerComponent().getModel("i18n").getResourceBundle();

This model is not at view level

Jagtar
Participant
0 Kudos

Below will not work as model is not in view
var oBundle = this.getView().getModel("i18n").getResourceBundle();

kbanerje2022
Participant
0 Kudos

This is sap standard code, ran two times before. I am not getting why resource binding is throwing error here.

obundle-var-not-populated.png

Jagtar
Participant
0 Kudos

There may be you are missing something because first you need to set model on view then only you can get from view . From manifest that model is available on component level or you can say core level not view level by default.

junwu
Active Contributor
0 Kudos
sap.ui.getCore().attachInit(function () {
			sap.ui.xmlview({
				viewName : "opensap.myapp.view.App"
			}).placeAt("content");

		});

put your component there, not your view.

google some good example.

kbanerje2022
Participant
0 Kudos

Code has been just modified.

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<title>openSAP - Developing Web Apps with SAPUI5</title>

		<script
			id="sap-ui-bootstrap"
			src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
			data-sap-ui-theme="sap_bluecrystal"
			data-sap-ui-libs="sap.m"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-preload="async"
			data-sap-ui-resourceroots='{
			"opensap.myapp": "./"
		}'
>
		</script>


		<script>
	sap.ui.getCore().attachInit(function () {
			
		new sap.ui.core.ComponentContainer({
				name : "opensap.myapp.Component"
			}).placeAt("content");

		});


		</script>
	</head>
	<body class="sapUiBody" id="content">
	</body>
</html>

Code error in reading resource binding:

code-error-inresource-binding.png

Carousel is removed, sap_tradeshow theme is coming.