Custom Inspector Fields

The Inspector widget in the Designer UI provides built-in types such as text, number, toggle, select and others (See the Properties section of the Component Manifest for details). However, thanks to the modular design of the Designer UI, customized installations of the Appmixer system allows to extend the set of Inspector fields by custom types.
Custom Inspector Field for Polygon Selection in Google Maps
Custom Inspector Field with Rich Text Editor
Custom Inspector Field with Price Calculator
Defining Custom Inspector Fields
To define your custom inspector field, use the Appmixer JavaScript SDK appmixer.registerInspectorField(type, definition, options) method. To style your inspector field, just use regular CSS. definition is a Vue JS component. The component must call the change(value) method to tell the SDK to change the value of the inspector field and save the flow. The componet additionally adds this.value which stores the current value of the field in the flow descriptor. Therefore, calling change(newValue) will also change this.value.  options are additional options that control the behaviour of the inline editor that replaces your inspector field when the user selects a variable from the variable picker. Available options are:
Option
Default value
Description
readOnly
false
Set read only mode on the inline editor. Available values are true, false, "nocursor" (similar to true but no cursor is blinking).
singleVariable
false
Allow only a single variable to be selected in the variable picker, i.e. selecting another variable will replace the current inline editor content.
clearButton
true
Show clear button at the right edge of the inline editor allowing the user to switch back to your custom field.
Note that the definition is an Appmixer specific wrapper around a Vue JS component. The basic functions and properties you can use are:
Template and Render function: https://vuejs.org/v2/api/#template, https://vuejs.org/v2/api/#render​
Data objects: https://vuejs.org/v2/api/#data, https://vuejs.org/v2/api/#computed, https://vuejs.org/v2/api/#methods, https://vuejs.org/v2/api/#watch​
Livecycle hooks: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks​
this.invalid computed property is a boolean value that tells the field whether its value is valid or not. An example is a required field that is empty. In that case this.invalid will be true.
Properties propagated by Appmixer are (properties that can be accessed via this keyword, e.g. this.value):  
props: {
   context: { type: Object },
   value: { type: null, required: false },
   errors: { type: Array, default: () => ([]) },
   disabled: { type: Boolean, default: false }
}
The context object contains contextual data from the component and the current input. It has the following structure:

context: { 
   componentId: { type: String }, 
   inputManifest: { type: Object }, 
   componentManifest: { type: Object }, 
   descriptorPath: { type: String }, 
   variables: { type: Object } 
}
Basic example
Here's a very basic example of a custom inspector field with just one HTML input element. Note how we use the Vue JS template definition. Also note that we need to call the change() method to propagate the value back to the flow descriptor (i.e. to save the flow with the new value of the field when the user makes a change):
appmixer.registerInspectorField('your-custom-text-input', {
    template: `
        <div class="your-custom-text-input">
            <label>Name</label>
            <input :value="value" @change="change($event.target.value)">
        </div>
    `
});
Advanced example
Here's another example of a custom inspector field that accepts a value that represents first and last name of a person in one string. The inspector field renders two HTML inputs, one for first name and one for last name. The returned value (the one stored back to the flow descriptor) is again one string. Note how we call this.change(value) to propagate value of the inspector field to the flow descriptor (i.e. to save the flow with a new value for this field):
appmixer.registerInspectorField('your-custom-input-type', {
    template: `
        <div class="your-custom-input-field">
            <label>Firstname</label>
            <input v-model="firstname" @change="onChange">
            <label>Lastname</label>
            <input v-model="lastname" @change="onChange">
        </div>
    `,
    watch: {
        value: {
            immediate: true,
            handler(value = '') {
                this.firstname = value.split(' ')[0] || '';
                this.lastname = value.split(' ')[1] || '';
            },
        },
    },
    data() {
        return {
            firstname: '',
            lastname: '',
        };
    },
    methods: {
        onChange() {
            const name = [
                this.firstname.trim(),
                this.lastname.trim(),
            ].join(' ');
            this.change(name);
        },
    },
});
​
To style your inspector field, just use regular CSS in your application, e.g:
.your-custom-input-field {
    font: 14px 'Segoe UI', Verdana, sans-serif;
}
.your-custom-input-field label {
    display: block;
    margin: 10px 0 5px;
    color: #888;
}
.your-custom-input-field input {
    display: block;
    padding: 0.5em;
    border: solid 1px #e8e8e8;
    border-radius: 5px;
}
​

Component Definition - Previous

Example Component

Next - Customizing UI

Custom Theme

Last modified 1yr ago

Copy link

Outline

Defining Custom Inspector Fields

Basic example

Advanced example