If your app replaces the default UI displayed by the Web App SDK with a custom UI, the App SDK can still substitute localized strings from a JSON UI configuration file for the default strings. The HTML elements in your custom UI, like <div>, <button>, <input>, <label>, can include a special data-tag attribute with a value that tells the App SDK which strings from your JSON UI configuration file to use in your replacement UI.
Your Web app must contain code that directs the App SDK to your JSON UI configuration file and applies your UI configuration to specific views. For details on these code changes, see Localizing Strings in Your Replacement UI.
To prepare a JSON UI Configuration file that contains localized strings to be displayed in the HTML for your replacement UI:
In your JSON UI configuration, create a strings object at the top level. Place key:value pairs for your localized strings into this top level strings object. For example:
{
…"strings":{
"my_ok_button":"Bien",
"my_cancel_button":"Cancelar"
}…
}Store this file as usual.
In the HTML for your replacement UI, use the data-tag attribute whose value tells which key in the JSON strings object corresponds to the localized word.
<div id="my_view">
<button data-tag="strings:my_ok_button">OK</button>
<button data-tag="strings:my_cancel_button">Cancel</button>
</div>The Web App SDK displays the following HTML:
<div id="my_view">
<button data-tag="strings:my_ok_button">Bien</button>
<button data-tag="strings:my_cancel_button">Cancelar</button>
</div>