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.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:readOnly
false
true
, false
, "nocursor"
(similar to true
but no cursor is blinking).singleVariable
false
clearButton
true
definition
is an Appmixer specific wrapper around a Vue JS component. The basic functions and properties you can use are: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
.this
keyword, e.g. this.value
): props: {
context: { type: Object },
value: { type: null, required: false },
errors: { type: Array, default: () => ([]) },
disabled: { type: Boolean, default: false }
}
context: {
componentId: { type: String },
inputManifest: { type: Object },
componentManifest: { type: Object },
descriptorPath: { type: String },
variables: { type: Object }
}
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):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):