Internationalization and translation with the Loginapp REST UI SDK

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 UI SDK provides a mechanism to access translations in a simple way:

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:

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

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 HTML template variables in the Loginapp REST UI SDK

Programmatic translations

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

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:

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

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:

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

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"