Quick Start

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

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

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

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

  <script src="https://my.YOURTENANT.appmixer.cloud/appmixer/appmixer.js"></script>

const appmixer = new Appmixer()

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

appmixer.set('baseUrl', BASE_URL)

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

const auth = await appmixer.api.signupUser(USERNAME, PASSWORD)
appmixer.set('accessToken', auth.token)

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:

const auth = await appmixer.api.authenticateUser(USERNAME, PASSWORD)

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:

<div id="flow-manager"></div>
<div id="designer"></div>

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

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

flowManager.open()

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

PreviousInstallation NextConstructor

Last updated 1 year ago

Was this helpful?

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