LogoLogo
5.1
6.16.05.25.15.0v4v4.1v4.2v4.3v4.4v4.5
  • Docs
  • Connector Configuration
  • Knowledge Base
  • Changelog
5.1
6.16.05.25.15.0v4v4.1v4.2v4.3v4.4v4.5
  • Introduction
  • Migration from 5.0
  • 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
  • App Registration
    • Azure Cognitive Services
    • Blackboard
    • DeepAI
    • Google
    • Highrise
    • Hubspot
    • Microsoft
    • Salesforce
    • Schoology
    • Screenshot API
    • Slack
    • Trello
    • Typeform
    • Utilities
      • Email
      • Language
      • Tasks
      • Test
      • Weather
    • Zoho
  • Connectors
    • Connector Request
Powered by GitBook
On this page

Was this helpful?

Export as PDF

Last updated 1 year ago

Was this helpful?

Create the html demo below and follow the steps ahead to learn the essentials.

  1. Get Appmixer constructor from appmixer.js file and create a new instance:

2. Set baseUrl to connect the API module to the REST API of your engine:

3. Create a new user and set accessToken to authorize your appmixer instance:

Change USERNAME(e.g. example@domain.com) and PASSWORD(e.g. 12345678) parameters to valid credentials for registration of a new user. Or use an authentication method if the user already exists:

Thetoken is used by Appmixer to identify the user. Store the token and credentials in a database of your product. This way, you can always associate your users with the (virtual) ones created for Appmixer.

4. Create new instances of Flow Manager and Designer widgets:

5. Open Flow Manager to browse the flows and switch to Designer when a flow is selected:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://my.YOURTENANT.appmixer.cloud/appmixer/appmixer.js"></script>
</head>
<body>
  <div id="flow-manager"></div>
  <div id="designer"></div>

  <script async type="module">
    const appmixer = new Appmixer()

    appmixer.set('baseUrl', BASE_URL)

    try {
        const auth = await appmixer.api.signupUser(USERNAME, PASSWORD)
        appmixer.set('accessToken', auth.token)
    } catch (error) {
        alert(error)
    }

    const flowManager = appmixer.ui.FlowManager({ el: '#flow-manager' })
    const designer = appmixer.ui.Designer({ el: '#designer' })

    flowManager.on('flow:open', flowId => {
        flowManager.close()
        designer.set('flowId', flowId)
        designer.open()
    })

    flowManager.open()
  </script>
</body>
</html>
  <script src="https://my.YOURTENANT.appmixer.cloud/appmixer/appmixer.js"></script>
const appmixer = new Appmixer()
appmixer.set('baseUrl', BASE_URL)
const auth = await appmixer.api.signupUser(USERNAME, PASSWORD)
appmixer.set('accessToken', auth.token)
const auth = await appmixer.api.authenticateUser(USERNAME, PASSWORD)
<div id="flow-manager"></div>
<div id="designer"></div>
const flowManager = appmixer.ui.FlowManager({ el: '#flow-manager' })
const designer = appmixer.ui.Designer({ el: '#designer' })
flowManager.open()

flowManager.on('flow:open', flowId => {
    flowManager.close()
    designer.set('flowId', flowId)
    designer.open()
})
  1. Appmixer SDK

Quick Start

Let's start with a simple user interface to browse and manage your flows.

PreviousInstallationNextConstructor
Flow Manager
Designer