You can customize the component's label and description. You can customize component's input/output port labels, the inspector input field labels and output variables as well.
There's a slightly different specification when localizing output variables. As you can see in the example, after outPorts[0].options the next path fragment is the option's value, instead of the index. This is because the component could have a dynamic output instead and different output variables can share the same index, so we use the value to specify them instead.
To switch the language in UI, you call the Appmixer instance set method:
// Create an SDK instance
var appmixer = new Appmixer()
// Will use the strings under 'cs' key
appmixer.set('lang', 'cs')
// Will switch the strings to the ones under 'sk' key
appmixer.set('lang', 'sk')
Note that if you want to customize the whole UI, you must use this in conjunction with the strings object. Here's an example:
var appmixer = new Appmixer();
var mySkStrings = { /* Strings definition for sk language */ };
var myCsStrings = { /* Strings definition for cs language */ };
// This function will be called when the user clicks on some
// "Switch to sk" button
function setLangToSk() {
appmixer.set('lang', 'sk');
appmixer.set('strings', mySkStrings);
}
// This function will be called when the user clicks on some
// "Switch to cs" button
function setLangToCs() {
appmixer.set('lang', 'cs');
appmixer.set('strings', myCsStrings);
}
Strings object's component namespace
The alternative way to customize the component's strings is using the Strings Object. There is a root namespace components which contains all the custom strings definitions for components:
{
"name": "appmixer.twilio",
"label": "Twilio",
"category": "applications",
"description": "Twilio is an easy tool for developers to send and receive SMS and voice calls.",
"icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMj...",
"localization": {
"cz": {
"label": "Modul Twilio",
"description": "Twilio je snadný nástroj pro vývojáře k odesílání a přijímání SMS a hlasových hovorů."
},
"sk": {
"label": "Modul Twilio",
"description": "Twilio je ľahký nástroj pre vývojárov na odosielanie a prijímanie SMS a hlasových hovorov."
}
}
}
Example using Strings object
It follows the same pattern as in components, but we use the service/module path as a key for the definition:
"appmixer.twilio": {
"label": "Modul Twilio",
"description": "Twilio je snadný nástroj pro vývojáře k odesílání a přijímání SMS a hlasových hovorů."
}
Strings resolving
When rendering the component's inspector, the strings are resolved with the following priority:
Localization object in manifest (component.json).
Strings object components namespace.
Property in manifest (component.json).
For example when resolving an input's label, it will first look if there is a localization object in the manifest with a path to that input's label. If not, it will search the Strings Object. If none of that is defined, it will use values from the manifest.
