Card Translations

Cards can be translated into other languages without changing the manifest. To achieve this you should create a resource bundle. The resource bundle is a collection of <filename>_<locale>.properties files. Each file contains key-value pairs, where the values are language-dependent texts and the keys are language independent. Inside the manifest, the card developers should use the keys with special double curly bracket syntax. During manifest processing the keys are replaced with their translated values, according to the current locale. The developer should provide a default (i18n.properties) fallback file that could be used if there is no better locale match found in the resource bundle. The path to the default (i18n.properties) file has to be set as a value to the "i18n" property of the "sap.app" namespace of the manifest. Besides the double curly bracket syntax, translated texts can also be accessed through the i18n model the card automatically creates (see examples below).

Note: If a key from the resource bundle is used, but "i18n" property is not set, the default value "i18n/i18n.properties" will be used, to request a resource bundle.

Predefined Translation Keys

The i18n model also includes a set of predefined translations which are common for all cards and can be used by each card. The predefined translations have "CARD." prefix in their key.

List of predefined translation keys:

Translation Key	English translation	Since
CARD.COUNT_X_OF_Y	{0} of {1}	1.67

Text with Placeholders

It is possible that a resource bundle value contains placeholders. In such case use the text formatter.

Examples

Translating properties during manifest processing

i18n/i18n.properties

TITLE=My Products
SUBTITLE=Some Great Products

i18n/i18n_de.properties

TITLE=Meine Produkte
SUBTITLE=Gro\u00DFartige Produkte

manifest.json

{
	"sap.app": {
		"id": "card.explorer.translation.card",
		"type": "card",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"header": {
			"title": "{{TITLE}}",
			"subTitle": "{{SUBTITLE}}",
			...
		},
		...
	}
}

Translations in binding syntaxes by using the i18n model of the card (where the user i18n files contain keys EXPECTED_ITEMS and subtitle):

{
	"sap.app": {
		"id": "card.explorer.translation.card",
		"type": "card",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"header": {
			"data": {
				"json": {
					"numberOfItems": "17"
				}
			},
			"title": "{i18n>EXPECTED_ITEMS} {/numberOfItems}",
			"subTitle": "{i18n>SUBTITLE}",
			...
		},
		...
	}
}

Try it Out