Appmixer
v4.5
Search
⌃K

Designer

Build, edit and inspect individual flows in a comprehensive editor.
Designer

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 ...

Learn about widget config here.

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.

config.options.showHeader

Type: Boolean | Default: true
Toggle visibility of the header.

config.options.menu

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' }
]
}
}
The optional icon property is a URL of an image or a base64 string.

config.options.toolbar

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()
}
}
}
}]
]
}
}
Specify Vue ComponentOptions under widget to create a custom toolbar button.

Instance

Learn about widget instance here.

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: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.
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()
Previous
Flow Manager
Next
Insights Logs
Last modified 4mo ago