Internationalization and translation

Internationalization and translation are important whenever end-user UIs are being rendered. There are two ways how to translate text, within an HTML template or programmatically.

Using translations in HTML

HTML often contains text that needs to be available in different languages. The Design Kit provides a mechanism to access translations in a simple way:

Example

class MyCustomLayout extends iam.api.types.CustomLayout { 
   
    headerHtml() { 
        return '<div>{{#translate}}custom.i18n.key.to.translate{{/translate}}</div>'; 
    } 
}

It is also possible to pass arguments for text that contains interpolation parameters:

Example

custom.i18n.key.to.translate = Hello {{name}}

Example

class MyCustomLayout extends iam.api.types.CustomLayout { 
   
    headerHtml() { 
        return '<div>{{#translate}}{"key": "custom.i18n.key.to.translate", "arguments": {"name": "john"}}{{/translate}}</div>'; 
    } 
} 
  
// "Hello john"

Alternatively, the arguments can be passed to the renderHtml method.
See: HTML rendering and template variables

Programmatic translations

Translations might also be retrieved programmatically, e.g.:

Example

class MyCustomLayout extends iam.api.types.CustomLayout { 
   
    onPageEnter() { 
        var translation = this.translate('custom.i18n.key.to.translate'); 
        console.log(translation); 
    } 
}

As with translations in HTML, interpolation parameters can be used as follows:

Example

custom.i18n.key.to.translate = You are working with version {{version}} of {{name}}

Example

class MyCustomLayout extends iam.api.types.CustomLayout { 
   
    onPageEnter() { 
        var translation = this.translate('custom.i18n.key.to.translate', { version: '10.6.1', name: 'CustomApp' }); 
        console.log(translation); 
    } 
} 
   
// -> "You are working with version 10.6.1 of CustomApp"

Alternatively, entire data models can also be passed:

Example

custom.i18n.key.to.translate = You are working with version {{app.version}} of {{app.name}}

Example

class MyCustomLayout extends iam.api.types.CustomLayout { 
   
    onPageEnter() { 
        const app = { 
            name: "CustomApp", 
            version: '10.6.1', 
            build: '192ed' 
        }; 
   
        var translation = this.translate('custom.i18n.key.to.translate', { app }); 
        console.log(translation); 
    } 
} 
   
// -> "You are working with version 10.6.1 of CustomApp"