Custom Component Strings
Appmixer lets you manage the components' inspector fields through the manifest or the strings object.
There are two ways for customizing the components' inspector fields:
Through a localization object inside the component's manifest
Adding custom strings to components namespace inside strings object
Component's manifest localization object
You can include custom strings inside the component's manifest itself using a localization object. The following is an example of how to include it:
{
"name": "appmixer.twilio.sms.SendSMS",
"author": "David Durman <[email protected]>",
"icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwMCIgaGVp...",
"description": "Send SMS text message through Twilio.",
"private": false,
"auth": {
"service": "appmixer:twilio"
},
"outPorts": [
{
"name": "sent",
"options": [
{ "label": "Message Sid", "value": "sid" }
]
}
],
"inPorts": [
{
"name": "message",
"schema": {
"type": "object",
"properties": {
"body": { "type": "string" },
"to": { "type": "string" },
"from": { "type": "string" }
},
"required": [
"from", "to"
]
},
"inspector": {
"inputs": {
"body": {
"type": "text",
"label": "Text message",
"tooltip": "Text message that should be sent.",
"index": 1
},
"from": {
"type": "select",
"label": "From number",
"placeholder": "Type number",
"tooltip": "Select Twilio phone number.",
"index": 2,
"source": {
"url": "/component/appmixer/twilio/sms/ListFromNumbers?outPort=numbers",
"data": {
"transform": "./transformers#fromNumbersToSelectArray"
}
}
},
"to": {
"type": "text",
"label": "To number",
"tooltip": "The destination phone number. <br/><br/>Format with a '+' and country code e.g., +16175551212 (E.164 format).",
"index": 3
}
}
}
}
],
"localization": {
"cs": {
"inPorts[0].inspector.inputs.body.label": "Textova zprava",
"inPorts[0].inspector.inputs.from.label": "Cislo volajiciho",
"inPorts[0].inspector.inputs.from.placeholder": "Hledej cislo"
},
"sk": {
"inPorts[0].inspector.inputs.body.label": "Textova zprava",
"inPorts[0].inspector.inputs.from.label": "Cislo volajiciho",
}
}
}
As you can see, there's a localization object at the end whose keys are language codes, that allows you to have multiple custom strings in case your implementation supports multiple languages. Each key value is an object whose keys are paths to the elements that will be customized (label, tooltip, placeholder, etc). The paths follow jsonpath syntax.
Now to switch the language on the 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 a contrived example to clear this up:
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. For this, there is a root namespace components
which contains all the custom strings definitions for components:
{
components: {
"appmixer.twilio.sms.SendSMS": {
"inPorts[0].inspector.inputs.body.label": "Textova zprava",
"inPorts[0].inspector.inputs.from.label": "Cislo volajiciho",
"inPorts[0].inspector.inputs.from.placeholder": "Hledej cislo"
}
}
// Other namespaces (designer, storage, accounts...)
}
Each key in components
object is the path to the component, and their value is an object whose keys are the path to the element to customize (label, tooltip, placeholder, etc). This paths follow the jsonpath syntax. For more information about the Strings Object refer to the Custom Strings section.
Strings resolving
When rendering the component's inspector, the strings are resolved with the following priority:
Localization object on manifest
Strings object components namespace
Property on manifest
So for example when resolving an input label, it will first look if there is a localization object on the manifest and if the required string is defined on the localization object in the manifest. If is not, it will lookup within the Strings Object if the components
namespace exist and if it contains the required string. Lastly it will resort to the string that is defined in the manifest field itself.
Last updated
Was this helpful?