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., [phone] (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:

1. Localization object on manifest

2. Strings object components namespace

3. 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.