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.
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
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 casethis.invalid
will betrue
.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):
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):
To style your inspector field, just use regular CSS in your application, e.g:
Last updated