LogoLogo
5.2
  • Docs
  • Connector Configuration
  • Knowledge Base
  • Changelog
5.2
  • Introduction
  • Migration from 5.1
  • Overview
    • Introduction
    • Component
    • Flow
    • End User Guide
  • Component Definition
    • Basic Structure
    • Manifest
      • name
      • label
      • icon
      • marker
      • author
      • description
      • auth
      • authConfig
      • quota
      • properties
      • inPorts
      • outPorts
      • firePatterns
      • tick
      • private
      • webhook
      • state
      • localization
    • Behaviour
    • Dependencies
    • Authentication
    • Quotas & Limits
    • Configuration
    • Example Component
  • Customizing UI
    • Custom Inspector Fields
    • Custom Theme
    • Custom Strings
    • Custom API
    • Custom Component Strings
    • Custom Component Shapes
    • Custom Auth Popups
  • Appmixer hosted
    • Getting started
    • Creating Custom Components
    • Using Appmixer SDK
    • Using Appmixer API
    • Using Oauth applications
  • Appmixer Self-Managed
    • Installation
    • Getting Started
    • Custom Component: HelloAppmixer
    • Using Appmixer SDK
    • Using Appmixer API
    • Using OAuth applications
    • Installation GCP
    • System Webhooks
    • Configuration
    • Appmixer Architecture
    • Appmixer Deployment Models
    • System Plugins
  • API
    • ACL
    • Accounts
    • Apps
    • Authentication
    • Charts
    • Config
    • Data Stores
    • Files
    • Flows
    • Insights
    • Modifiers
    • People Task
    • Public Files
    • Service Configuration
    • Unprocessed Messages
    • User
    • Variables
  • Appmixer SDK
    • Introduction
    • Installation
    • Quick Start
    • Constructor
    • API Module
    • UI & Widgets
      • Flow Manager
      • Designer
      • Insights Logs
      • Insights Chart Editor
      • Insights Dashboard
      • Accounts
      • Storage
      • People Tasks
      • Connectors
      • Integrations
      • Wizard
    • Developer mode
  • Appmixer Backoffice
    • Getting Started
    • Services
    • Quotas
    • Public Files
    • System Configuration
    • Modules
  • Tutorials
    • Managing Authentication
    • Sharing Flows
    • Flows Metadata & Filtering
    • People Tasks
    • Customizing modifiers
    • Setting ACL
    • Integration Templates
    • Installing and updating modules
    • Custom Webhook Trigger
    • Appmixer Virtual Users
    • Working with outport schemas
  • Appmixer CLI
    • Appmixer CLI
    • Appmixer OpenAPI Generator
      • Getting started
      • Open API Extensions
      • Examples
  • App Registration
    • Airtable
    • Azure Cognitive Services
    • Blackboard
    • DeepAI
    • DocuSign
    • Google
    • Highrise
    • Hubspot
    • Microsoft
    • Microsoft Dynamics 365 CRM
    • Quickbooks
    • Redmine
    • Salesforce
    • Schoology
    • Screenshot API
    • ServiceNow
    • Slack
    • Trello
    • Typeform
    • Utilities
      • Email
      • Language
      • Tasks
      • Test
      • Weather
    • Xero
    • Zendesk Tickets
    • Zoho
  • Connectors
    • Connector Request
Powered by GitBook
On this page
  • Configuration
  • Instance
  • State
  • Events
  • Example

Was this helpful?

Export as PDF
  1. Appmixer SDK
  2. UI & Widgets

Designer

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

PreviousFlow ManagerNextInsights Logs

Last updated 1 year ago

Was this helpful?

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.

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()
                  }
              }
          }
        }]
    ]
  }
}

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: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()

Learn about widget config .

Specify Vue under widget to create a custom toolbar button.

Learn about widget instance .

ComponentOptions
here
here
Designer