Custom Inspector Fields

Last updated 9 months ago

The Inspector widget in the Designer UI provides some 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.

Defining Custom Inspector Fields

To define your custom inspector field, create a JavaScript file in webapp/src/designer/src/inspector-fields/ directory. The convention is to use the same name for your JavaScript file as the type of your field. If your field requires custom styling, add your stylesheet to webapp/src/designer/css/inspector-fields/ directory.

Here's an example of a skeleton file for your custom type "my-type":

appmixer.inspectorFields = appmixer.inspectorFields || {};
appmixer.inspectorFields['my-type'] = joint.mvc.View.extend({
renderField: function() {
// Render your field and return HTML or DOM node that will
// be appended to the inspector field.
// this.options.options ... contains the options passed in your component manifest file for this inspector field
// this.options.value ... the actual value to be set in your custom field
// this.options.cell ... [advanced] the graph cell the inspector was opened for
// this.options.path ... [advanced] the field path
// this.options.schema ... [advanced] the JSON schema for this inspector
getValue: function() {
// Return the value of the field. Inspector requests the value when necessary.
focus: function() {
// [optional]
// Set focus on your field.
remove: function() {
// [optional]
// Clean-up if necessary.
getCursor: function() {
// [optional, advanced]
// Return an object of the form { line: Number, ch: Number } that specifies
// the position of the cursor inside the inline variables editor that replaces your field
// when the user selects a variable in the variables picker.
// This allows for placing the variable at the same cursor position as the user
// was in your custom field before selecting that variable.
}, {
// Optional object with options for the inline editor that replaces your custom
// field when the user selects a variable.
inlineEditorOptions: {
// Set read only mode on the inline editor.
// Possible values:
// false, true, 'nocursor' (similar to 'true' but no cursor is blinking)
readOnly: false,
// Show clear button at the right edge of the inline editor
// allowing the user to switch back to your custom field.
clearButton: false,
// Set to true if you want the value of your custom field to be set in the
// inline editor. This makes only sense for textual kind of custom fields.
setValue: 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.
singleVariable: false

Important note: your custom field must trigger the 'change' event on itself (call this.trigger('change')) when the user is done editing the field to tell the Inspector that it should save the new value to the flow descriptor.