Configuration
Set up a new instance with config parameters and set/get methods:
const designer = appmixer.ui.Designer(config)
designer.set(key, value)
designer.get(key)
config.el ...
config.flowId
Type: String | Default: null
ID of a flow that is opened in the editor.
config.componentId
Type: String | Default: null
ID of a component that is opened in the editor.
config.shareTypes
Type: Object | Default: DefaultShareTypes
Override default sharing dialog types.
config.sharePermissions
Type: Object[] | Default: DefaultSharePermissions
Override default sharing dialog permissions.
Type: Boolean | Default: true
Toggle visibility of the header.
Type: Object[] | Default: []
Add a dropdown menu input to trigger built-in and custom events:
appmixer.ui.Designer({
/* ... */
options: {
menu: [
{ event: 'flow:rename', label: 'Rename', icon: 'data:image/svg+xml;base64,...' },
{ event: 'flow:share', label: 'Share', icon: 'https://www.example.com/images/image.jpg' },
{ event: 'flow:wizard-builder', label: 'Wizard' },
{ event: 'flow:export-svg', label: 'Export SVG' },
{ event: 'flow:export-png', label: 'Export PNG' },
{ event: 'flow:print', label: 'Print' }
]
}
}
Type: Array[] | Default: []
Add a toolbar with groups of built-in and custom buttons:
const designer = appmixer.ui.Designer({
/* ... */
options: {
toolbar: [
['undo', 'redo'],
['zoom-to-fit', 'zoom-in', 'zoom-out'],
['logs'],
[{
tooltip: 'Reload',
widget: {
template: (
`<div @click="onClick" style="border: solid 1px gray; border-radius: 3px;">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
</svg>
</div>`
),
methods: {
onClick() {
designer.reload()
}
}
}
}]
]
}
}
config.options.autoOpenLogs
Type: Boolean | Default: true
Automatically open logs view when the flow is running.
const designer = appmixer.ui.Designer({
/* ... */
options: {
autoOpenLogs: true
toolbar: [
['logs']
]
}
}
config.options.triggerSelector
Type: Object | Default: null
Automatically open trigger selector dialog when the flow has no trigger.
const designer = appmixer.ui.Designer({
/* ... */
options: {
triggerSelector: {
enabled: true,
featured: [
{
name: 'appmixer.utils.timers.Timer'
},
{
name: 'appmixer.utils.controls.OnStart',
label: 'Custom label',
description: 'Custom description',
marker: 'Custom marker text',
icon: 'data:image/svg+xml;base64,...',
}
]
}
}
}
Instance
State
designer.state(name, value)
loader
Type: Boolean | Default: null
Toggle a custom loading state.
error
Type: String | Default: null
Toggle a custom error message.
Events
designer.on(event, handler)
flow:start
designer.on('flow:start', flow => {/* ... */})
Toggle stage button to start the flow.
flow:stop
designer.on('flow:stop', flow => {/* ... */})
Toggle stage button to stop the flow.
flow:share
designer.on('flow:share', flow => {/* ... */})
Click menu item to open sharing of the flow.
flow:rename
designer.on('flow:rename', flow => {/* ... */})
Click menu item to rename the flow.
flow:export-svg
designer.on('flow:export-svg', flow => {/* ... */})
Click menu item to export diagram of the flow to SVG.
flow:export-png
designer.on('flow:export-png', flow => {/* ... */})
Click menu item to export diagram of the flow to PNG.
flow:print
designer.on('flow:print', flow => {/* ... */})
Click menu item to print diagram of the flow.
flow:validation
An event containing an array with flow validation errors. If the array is empty, there are no validation errors in the flow.
designer.on('flow:validation', errors => {
console.log('flow:validation', '===>', errors);
});
// Example
[
{
"keyword": "required",
"dataPath": ".text",
"schemaPath": "#/required",
"params": {
"missingProperty": "text"
},
"message": "Should have required property \"Message\".",
"schema": {
"text": {
"type": "string"
}
},
"parentSchema": {
"type": "object",
"properties": {
"text": {
"type": "string"
}
},
"required": [
"text"
]
},
"data": {
"message.d9a25ebe-84ef-4460-a061-f9acac76d28f.out.lambda": {}
},
"componentId": "d1c48d6f-0225-46a8-9600-1c19adf75768",
"descriptorPath": "config.transform.message.d9a25ebe-84ef-4460-a061-f9acac76d28f.out.lambda.text",
"fieldLabel": "Message"
}
]
flow:wizard-builder
designer.on('flow:wizard-builder', flow => {/* ... */})
Click menu item to open a wizard builder dialog.
component:add
designer.on('component:add', ({ data, next }) => {/* ... */})
Add a new component to the flow.
component:open
designer.on('component:open', ({ data, next }) => {/* ... */})
Open component inspector.
component:close
designer.on('component:close', ({ data, next }) => {/* ... */})
Close component inspector.
component:rename
designer.on('component:rename', ({ data, next }) => {/* ... */})
Rename a component.
component:update-type
designer.on('component:update-type', ({ data, next }) => {/* ... */})
Use selection input to change component type.
navigate:validation
designer.on('navigate:validation', (flowId) => {/* ... */})
Click a button to show validation errors.
Example
const designer = appmixer.ui.Designer({
el: '#designer',
options: {
menu: [
{ event: 'flow:rename', label: 'Rename' },
{ event: 'flow:share', label: 'Share' },
{ event: 'flow:wizard-builder', label: 'Wizard' },
{ event: 'flow:export-svg', label: 'Export SVG' },
{ event: 'flow:export-png', label: 'Export PNG' },
{ event: 'flow:print', label: 'Print' }
],
toolbar: [
['undo', 'redo'],
['zoom-to-fit', 'zoom-in', 'zoom-out'],
['logs']
]
}
})
const flowId = await appmixer.api.createFlow('New flow')
designer.set('flowId', flowId)
designer.open()
