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.
Copy <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:
Copy < script src = "https://my.YOURTENANT.appmixer.cloud/appmixer/appmixer.js" ></ script >
Copy const appmixer = new Appmixer ()
2. Set baseUrl
to connect the API module to the REST API of your engine:
Copy appmixer .set ( 'baseUrl' , BASE_URL )
3. Create a new user and set accessToken
to authorize your appmixer
instance:
Copy 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:
Copy const auth = await appmixer . api .authenticateUser ( USERNAME , PASSWORD )
The
token 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:
Copy < div id = "flow-manager" ></ div >
< div id = "designer" ></ div >
Copy 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:
Copy flowManager .open ()
flowManager .on ( 'flow:open' , flowId => {
flowManager .close ()
designer .set ( 'flowId' , flowId)
designer .open ()
})
Last updated 10 months ago