docs

Step 6: Resource Models

Business applications often require language-specific (translatable) text used as labels and descriptions on the user interface.

The example we used at the start of this tutorial was quite simplistic as we stored language-specific text directly in a JSON model object. Generally speaking, unless language-specific text comes directly from a back-end system, it’s not considered good programming practice to put translatable texts directly into a model. So, let’s fix this by placing all translatable texts (such as field labels) into a resource bundle.

Preview

The texts are now derived from a resource model (No visual change to last step)

The graphic has an explanatory text

Coding

You can view and download all files in the Demo Kit at Data Binding - Step 6.

  1. Create a new entry in the manifest.json file under the models entry as shown in the coding below. The resource model is set to the component using the model name i18n. The data comes from the i18n.properties file as specified in the bundleName entry in the settings. Since we’re creating a resource model, the file name is assumed to have the extension .properties; this does not need to be stated explicitly.

    webapp/manifest.json

    ...
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "1.120.0",
			"libs": {
				"sap.m": {},
				"sap.ui.core": {},
				"sap.ui.layout": {}
			}
		},
		"models": {
			"": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "./model/data.json"
			},
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "ui5.databinding.i18n.i18n",
					"supportedLocales": [
						"",
						"de"
					],
					"fallbackLocale": ""
				}
			}
		},
...

    Note:

    The configured supportedLocales represent the following i18n files present (see Step 7):

    • "" - i18n/i18n.properties
    • "de" - i18n/i18n_de.properties

    The configured fallbackLocale should represent one of these files. According to the fallback chain, the root bundle ("") is the last fallback. Configuring it explicitly avoids side effects when additional resource files are added. For more information, see Supported Locales and Fallback Chain.

  2. Create a new folder i18n in the webapp folder and a new file i18n.properties within this folder. Add the code shown below.

    webapp/i18n/i18n.properties (New)

    # Field labels
firstName=First Name
lastName=Last Name
enabled=Enabled
    
# Screen titles
panelHeaderText=Data Binding Basics

    The panelHeaderText property has been moved from the JSON model into the i18n resource bundle. Also, the field labels are no longer hard-coded in the XML view. This is because all of these text fields need to be translated.

    Language-specific text stored in resource models obeys the Java convention for internationalization (i18n).

  3. Modify the data binding for the panel header and the labels in App.view.xml to include the model name. Note that a “greater than” character separates the model name and the property name. Also, i18n property names must not start with a slash character.

    webapp/view/App.view.xml

    <mvc:View
	xmlns="sap.m"
	xmlns:form="sap.ui.layout.form"
	xmlns:mvc="sap.ui.core.mvc">
	<Panel headerText="{i18n>panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
		<form:SimpleForm editable="true" layout="ColumnLayout">
			<Label text="{i18n>firstName}"/>
			<Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
			<Label text="{i18n>lastName}"/>
			<Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
			<Label text="{i18n>enabled}"/>
			<CheckBox selected="{/enabled}"/>
		</form:SimpleForm>
	</Panel>
</mvc:View>

  4. Remove the line panelHeaderText : "Data Binding Basics" from the model data in the data.json file. This text has now been moved to the resource model.

    webapp/model/data.json

    {
	"firstName": "Harry",
	"lastName": "Hawk",
	"enabled": true
}

  5. Remove the init function and the import of sap/ui/model/BindingMode from Component.js as we do not want to set the one-way binding mode anymore.

    webapp/Component.js

    sap.ui.define([
	"sap/ui/core/UIComponent"
], (UIComponent) => {
	"use strict";
	return UIComponent.extend("ui5.databinding.Component", {
		metadata: {
			interfaces: ["sap.ui.core.IAsyncContentCreation"],
			manifest: "json"
		}
	});
});

You can use multiple model instances by using different model names. The model name can be set as the second parameter when using the setModel(oResourceModel,"i18n") method. The model is then propagated under this name to all aggregated child controls (and their children, and so on …). All these controls have access to this model under the name i18n as well as to the JSONModel (default model, which has no name).

Parent topic:Data Binding Tutorial

Next:Step 5: One-Way Data Binding

Previous:Step 7: (Optional) Resource Bundles and Multiple Languages

Related Information

Resource Model

This site is open source. Improve this page.