Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Method
Description
Appmixer({ baseUrl })
A constructor function to create an instance of the Appmixer SDK. Pass the base URL of the engine (Appmixer API).
appmixer.set(key, value)
Set a property on the appmixer SDK object. Currently only accessToken
should be set to be able to make calls to the Appmixer API.
appmixer.onInvalidAccessToken(callbackFn)
Allows setting a callback function that will be called whenever the current access token on the SDK is not valid. More information can be found on the tutorial.
The appmixer.ui.FlowManager is a UI widget that displays a list of flows the user created.
Method
Description
appmixer.ui.FlowManager(config)
A function that accepts a config object and returns an instance of flow manager. The config object must contain at least the el property that points to a container DOM element where the flow manager will be rendered. el can either be a CSS selector or a reference to a DOM element.
config.options.menu
can optionally define the flow menu. For example:
{ options: { menu: [ { label: 'Rename', event: 'flow:rename' }, { label: 'Insights', event: 'flow:insights' }, { label: 'Clone', event: 'flow:clone' }, { label: 'Export to SVG', event: 'flow:export-svg' }, { label: 'Export to PNG', event: 'flow:export-png' }, { label: 'Print', event: 'flow:print' } ] }
defines a menu with 6 items. Note that each item can also optionally contain icon property (which we omitted from the example above to save space. The icon property is a URL of an image.
config.sharePermissions
can optionally define the sharing options for the flows. For example:
sharePermissions: [ { label: 'Read', value: 'read' }, { label: 'Start', value: 'start' }, { label: 'Stop', value: 'stop' } ]
Define a share dialog box that gives the user permission to share their flows for all the read/start/stop permissions. Additionally, you can also define the scope of the share with config.shareTypes
:
shareTypes: [ { label: 'Email', value: 'email', placeholder: 'Enter an email' }, { label: 'Scope', value: 'scope', placeholder: 'Enter a scope' }, { label: 'Domain', value: 'domain', placeholder: 'Enter a domain' }, ]
config.options.customFilter
is an optional object that can contain properties that we'd like to filter on. This is especially useful in connection with customFields metadata object as it allows you to display multiple different Flow Managers each listing a different category of flows. For example:
options: {
customFilter: {
'customFields.template': true
'customFields.category': 'healthcare'
}
}
config.options.layout.default
is an optional string that determines the default layout of the flow manager. Currently list and thumbnail are supported. If not specified, the default layout is thumbnail.
config.options.layout.table
is an optional object that allows customizing the list layout column headers and values displayed. For example:
options: {
layout: {
table: {
columns: [
{ property: 'name', label: 'Flow Name' },
{ property: 'status', label: 'Current Status' },
{ property: 'btime', label: 'Start Time' },
{ property: 'mtime', label: 'Last Updated' }
]
}
}
}
The label property makes reference to the label displayed on the column header, while property makes reference to the flow property value that will be displayed on that column.
open()
Render the flow manager inside its container.
close()
Close the flow manager.
on(event, handler)
React on events of the flow manager. See below for the list of events the flow manager supports.
off([event, handler])
Remove event listeners. If no arguments are provided, remove all event listeners. If only the event
is provided, remove all listeners for that event. If both event
and handler
are given, remove the listener for that specific handler only.
state(name, value, [details])
Change the state of the UI. Currently, only "loader"
and "error"
states are supported. For example, in order to show a loader in the flow manager UI, just call state("loader", true)
. If you want to display an error in the flow manager UI, call state("error", "Something went wrong.")
. The optional details
parameter allows you to add details to the error
message, for exmaple: state('error', 'Something went wrong', 'Loading failed because ....')
.
reload()
Re-render the flow manager. Call this when you changed the state of a flow (e.g. renamed a flow, started a flow, ...) to make sure the flow manager reflects the new changes.
Event
Callback
Triggered when...
flow:open
function(flowId)
the user clicks on a flow to open it.
flow:create
function()
the user clicks the "Create Flow" button.
flow:start
function(flowId)
the user clicks the button to start the flow.
flow:stop
function(flowId)
the user clicks the button to stop the flow.
flow:insights
function(flowId)
the user clicks the button to open Insights for the flow.
flow:clone
function(flowId)
the user clicks the button to clone the flow.
flow:remove
function(flowId)
the user clicks the button to delete the flow.
Method
Description
appmixer.ui.InsightsLogs(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the InsightsLogs will be rendered.
set(property, value)
Set a property value. Currently only "flowId" is supported. Use it to set the flow for which you want to display logs. If you don't set the "flowId", logs of all the flows of the user will be displayed.
get(property)
Get a property value.
open()
Render the InsightsLogs inside its container.
close()
Close the InsightsLogs.
state(name, value)
Change the state of the UI. Currently, only "loader"
and "error"
states are supported. For example, in order to show a loader in the flow manager UI, just call state("loader", true)
. If you want to display an error in the flow manager UI, call state("error", "Something went wrong.")
.
reload()
Refreshes the InsightsLogs. Since the UI contains a way to reload flows, calling this can be useful only when any flows has changed, so the changes are reflected in the flows filter.
Method
Description
appmixer.api.authenticateUser(username, password)
Authenticate a user to Appmixer. Note that this can be a "virtual" user that exists for the sole purpose of associating a real user of your own product to a user in Appmixer. Each user in Appmixer can have a set of flows, can run and stop flows and can see data going through their flows. The returned promise is either resolved with an object that contains token
(which you need to set with appmixer.set('accessToken', token)
to be able to make calls to the API backend. Or the promise is rejected with an error object. If the error object returns 403 status code (i.e. err.response.status === 403
), the user does not exist in Appmixer.
appmixer.api.signupUser(username, password)
Create a new user in Appmixer. The returned promise is either resolved with an authentication object (containing the token
property) or rejected if the sign-up fails.
appmixer.api.createFlow(name, [descriptor], [properties])
Create a new flow in Appmixer. The returned promise resolves to the ID of the newly created flow. The properties
object can contain your own custom metadata inside the customFields
property. This is especially useful for filtering flows based on your own custom metadata.
appmixer.api.deleteFlow(flowId)
Delete an existing flow identified by flowId
.
appmixer.api.getFlow(flowId)
appmixer.api.getFlows(query)
Get all flows of the user or filter them by query
. query
is an object with the following properties: limit
, offset
, pattern
(a string to filter flows containing pattern in their names), sort
, projection
(allows you to exclude properties from the returned flow objects), sharedWithPermissions
and filter.
Example: { limit: 20, offset: 0, pattern: "slack", projection: "-flow,-thumbnail", sort: "mtime:-1", sharedWithPermission: "read", filter: "userId:423jfdsalfjl4234fdsa" }
appmixer.api.getFlowsCount(query)
Get the number of all flows of the user or filter them by query
. query
is an object with pattern
property that can include a string to filter flows containing a pattern in their names. Example: { "pattern": "dropbox" }
.
appmixer.api.updateFlow(flowId, update)
Update an existing flow. update
can contain the following information: { flow, name, customFields }
, where flow
is the Flow Descriptor of the flow and customFields
is an object with your own custom metadata for this flow.
appmixer.api.startFlow(flowId)
Start a flow.
appmixer.api.stopFlow(flowId)
Stop a flow.
appmixer.api.cloneFlow(flowId)
Create a copy of an existing flow. The returned promise resolves to the ID of the newly created flow.
appmixer.api.getUser()
Get current user. The returned promise resolves to an object with username
.
appmixer.api.getStores()
Get all the data stores. The returned promise resolves to an array of stores each an object with name
and storeId
properties.
appmixer.api.getStore(storeId)
Get one store. The returned promise resolves to an object with name
and storeId
properties.
appmixer.api.getStoreRecordsCount(query)
Get the number of records in a store. query
is an object with storeId
and pattern
properties where pattern
is a string to filter records that contain the string in their keys or values.
appmixer.api.getStoreRecords(query)
Get store records. query
is an object with storeId
, pattern
(string to search for in keys/values), limit
, offset
and sort
properties. Example: { limit: 30, offset: 0, pattern: “foo”, sort: “updatedAt:-1", storeId: “5c6d643f4849f447eba55c1d” }
appmixer.api.createStore(name)
Create a new store. The returned promise resolves to the ID of the newly created store.
appmixer.api.deleteStore(storeId)
Delete a store.
appmixer.api.renameStore(storeId, newName)
Rename an existing store.
appmixer.api.createStoreItem(storeId, key, value)
Create a new record in a store.
appmixer.api.deleteStoreItems(items)
Delete store items. items
is an array of objects each having a key
and storeId
properties identifying the item and store from which the item should be removed.
appmixer.api.createAccount(params, data)
Create a custom account.
appmixer.api.getAccounts(filter)
appmixer.api.getComponentAccounts(componentType, componentId)
Get a list of accounts connected to a specific component.
appmixer.api.getAccountFlows(accountId)
Get a list of flows this account is used in. The returned promise resolves to an array of objects with flowId
and name
properties.
appmixer.api.setAccountName(accountId, newName)
Rename a connected account. Note that this name is displayed in the Accounts widget and also in the Inspector UI of the Designer.
appmixer.api.getLogs(query)
Get logs. query
is an object of the form { from, size, sort, query }
. Example: { from: 0, size: 30, sort: "@timestamp:desc", query: "@timestamp:[2018-01-01 TO 2018-01-01]" }
. To get logs of a specific flow, use e.g. { from: 0, size: 30, sort: "@timestamp:desc", query: "@timestamp:[2018-01-01 TO 2018-01-01] AND +flowId:FLOW_ID" }
appmixer.api.getLog(logId, index)
Get one log. logId
and index
are values returned from getLogs()
.
appmixer.api.getPeopleTasks(query)
Get all tasks of the user. query.role
can be either "approver" or "requester" and allows you to filter tasks based on the role. query.pattern
filters returned tasks by a term that must be contained in the task title. Settingquery.secret
to either the approverSecret
or requesterSecret
allows you to get a list of tasks of a different user for which you have the secret (other than the one identified by the access token, i.e. the currently signed-in user).
appmixer.api.getPeopleTasksCount(query)
Returns the number of tasks based on the query. See getPeopleTasks(query)
for more info.
appmixer.api.getPeopleTask(id)
Return one task identified by id
.
appmixer.api.approveTask(id, [params])
Approve a task identified by id
. params
is an optional object that can contain the secret
property (approver secret). Having the secret allows you to approve a task of any user for which you have the secret, not just the currently signed-in user.
appmixer.api.rejectTask(id, [params])
Reject a task identified by id
. params
is an optional object that can contain the secret
property (approver secret). Having the secret allows you to reject a task of any user for which you have the secret, not just the currently signed-in user.
appmixer.api.getCharts()
Returns all the Insights charts of the user.
appmixer.api.getChart(chartId)
Return one Insights chart identified by chartId
.
appmixer.api.deleteChart(chartId)
Delete an Insights chart identified by chartId
.
The appmixer.ui.Designer is a UI widget that displays the drag&drop Flow Designer.
Method
Description
appmixer.ui.Designer(config)
Constructor function that acceptsconfig
object. Theconfig
object must contain at least the el
property that points to a container DOM element where the Designer will be rendered. el
can either be a CSS selector or a reference to a DOM element. Note that the recommended width of your container is at least 1200px for best Designer UI/UX. config.options.menu
can optionally define the flow menu inside Designer. For example: { options: { menu: [ { label: 'Rename', event: 'flow:rename' }, { label: 'Insights', event: 'flow:insights' }, { label: 'Clone', event: 'flow:clone' }, { label: 'Export to SVG', event: 'flow:export-svg' }, { label: 'Export to PNG', event: 'flow:export-png' }, { label: 'Print', event: 'flow:print' } ] }
defines a menu with 6 items. Note that each item can also optionally contain icon
property (which we omitted from the example above to save space. The icon
property is a URL of an image. It's important to note that the designer supports built-in events: "flow:rename"
, "flow:export-svg"
, "flow:export-png"
and "flow:print"
. These events cannot be re-defined. These events trigger built-in UX for renaming, exporting to SVG and PNG, and printing flows. If you don't want to use this built-in behaviour, just redefine your menu with your own custom events. config.sharePermissions
can optionally define the sharing options for the flow. For example:
sharePermissions: [
{ label: 'Read', value: 'read' },
{ label: 'Start', value: 'start' },
{ label: 'Stop', value: 'stop' }
]
Define a share dialog box that gives the user permission to share the flow for all the read/start/stop permissions. Additionally, you can also define the scope of the share with config.shareTypes
:
shareTypes: [
{ label: 'Email', value: 'email', placeholder: 'Enter an email' },
{ label: 'Scope', value: 'scope', placeholder: 'Enter a scope' },
{ label: 'Domain', value: 'domain', placeholder: 'Enter a domain' },
]
toolbar: [
['undo', 'redo'],
['zoom-to-fit', 'zoom-in', 'zoom-out'],
['logs'],
[{
tooltip: 'Lorem ipsum',
widget: { template: 'My button' },
}],
]
set(property, value)
Set a property of the designer. Currently only "flowId" is supported. Use it to set the flow the designer should open for (set("flowId", "123abc456")
). You can also call this to change the currently opened flow in the designer dynamically.
get(property)
Return a property value.
open()
Render the Designer inside its container.
close()
Close the designer.
on(event, handler)
React on events of the designer. See below for the list of events the designer supports.
off([event, handler])
Remove event listeners. If no arguments are provided, remove all event listeners. If only the event
is provided, remove all listeners for that event. If both event
and handler
are given, remove the listener for that specific handler only.
state(name, value)
Change the state of the UI. Currently, only "loader"
and "error"
states are supported. For example, in order to show a loader in the flow manager UI, just call state("loader", true)
. If you want to display an error in the flow manager UI, call state("error", "Something went wrong.")
.
reload()
Re-render the designer. Call this when you changed flow's state (started/stopped) to make sure the state change is reflected.
Event
Callback
Triggered when...
flow:insights
function(flowId)
the user clicks the insights menu item.
flow:clone
function(flowId)
the user clicks the clone menu item.
The appmixer.ui.InsightsChartEditor is a UI widget that allows the user to configure a new chart visualization of any data of their flows. Different types of charts are supported including bar, line, area, scatter, pie and more. Moreover, the user can select from a wide range of aggregations to create an aggregated visualization of their data such as Date Histogram, Sum, Min, Max, Average, Unique Count, Range and Filter.
Method
Description
appmixer.ui.InsightsChartEditor(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the InsightsChartEditor will be rendered.
open()
Render the InsightsChartEditor inside its container.
close()
Close the InsightsChartEditor.
on(event, handler)
React on events of the InsightsChartEditor. See below for the list of events the InsightsChartEditor supports.
off([event], [handler])
Remove event listeners. If no arguments are provided, remove all event listeners. If only the event
is provided, remove all listeners for that event. If both event
and handler
are given, remove the listener for that specific handler only.
set(property, value)
Set a property. Currently only "chartId" is supported. Use it to set the chart the chart editor should open for (set("chartId", "123abc456")
). You can also call this to change the currently opened chart dynamically.
get(property)
Get a property value.
state(name, value)
Change the state of the UI. Currently, only "loader"
and "error"
states are supported. For example, in order to show a loader in the InsightsChartEditor UI, just call state("loader", true)
. If you want to display an error in the InsightsChartEditor UI, call state("error", "Something went wrong.")
.
reload()
Refresh the content of the chart editor.
Event
Callback
Triggered when...
close
function()
the user clicks on the close button.
The appmixer.ui.Accounts is a UI widget that displays the user's connected accounts.
Method
Description
appmixer.ui.Accounts(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the Accounts will be rendered. Filter accounts by setting a custom query string to config.options.filter
.
open()
Render the Accounts inside its container.
close()
Close the Accounts.
on(event, handler)
React on events of the accounts widget. See below for the list of events the accounts widget supports.
off([event, handler])
Remove event listeners. If no arguments are provided, remove all event listeners. If only the event
is provided, remove all listeners for that event. If both event
and handler
are given, remove the listener for that specific handler only.
reload()
Refresh the Accounts.
Event
Callback
Triggered when...
flow:open
function(flowId)
the user clicks to open a flow the account is associated with.
The appmixer.ui.Storage is a UI widget that displays the user's data stores.
Method
Description
appmixer.ui.Storage(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the Storage widget will be rendered.
open()
Render the Storage inside its container.
close()
Close the Storage widget.
state(name, value)
Change the state of the UI. Currently, only "loader"
and "error"
states are supported. For example, in order to show a loader in the flow manager UI, just call state("loader", true)
. If you want to display an error in the flow manager UI, call state("error", "Something went wrong.")
.
reload()
Reload the Storage. Calling this can be useful when stores have been added or removed, so the changes are reflected in the UI.
The appmixer.ui.InsightsDashboard is a UI widget that displays all the charts that the user has defined. The charts are interactive and can be re-arranged with drag&drop, refreshed to reflect the latest state, cloned and removed. Usually, you would listen to the chart:open event to open the appmixer.ui.InsightsChartEditor for the user to be able to re-configure their chart.
Get flow. The returned promise resolves to an object with the following information: { id, flow, name, stage, btime, mtime, thumbnail }
, where flow
is the Flow Descriptor, stage
is either 'running'
or 'stopped'
, btime
is the time the flow was created ("birth" time), mtime
is the time the flow was modified and thumbnail contains a thumbnail image (self-contained, in the format).
Get a list of connected accounts of the user. filter
is a custom query string (see the for an example). The returned promise resolves to an array of objects of the form { accountId, name, displayName, service, icon, profileInfo }
.
config.options.toolbar
can define buttons of the Designer toolbar which is empty by default. Use presets (all shown in the example below) or Vue Component options for custom buttons. The custom button definition is the same as for . Complete toolbar definition example:
Method
Description
appmixer.ui.InsightsDashboard(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the InsightsDashboard will be rendered.
open()
Render the InsightsDashboard inside its container.
close()
Close the InsightsDashboard.
on(event, handler)
React on events of the InsightsDashboard. See below for the list of events the InsightsDashboard supports.
off([event], [handler])
Remove event listeners. If no arguments are provided, remove all event listeners. If only the event
is provided, remove all listeners for that event. If both event
and handler
are given, remove the listener for that specific handler only.
state(name, value)
Change the state of the UI. Currently, only "loader"
and "error"
states are supported. For example, in order to show a loader in the InsightsDashboard UI, just call state("loader", true)
. If you want to display an error in the InsightsDashboard UI, call state("error", "Something went wrong.")
.
reload()
Refresh the content of InsightsDashboard.
Event
Callback
Triggered when...
chart:open
function(chartId)
the user clicks the "tripple-dot" tool button.
chart:remove
function(chartId)
the user clicks the trash icon tool button.
Method
Description
appmixer.ui.PeopleTasks(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the PeopleTasks widget will be rendered.
set(property, value)
Set a property of the people tasks. Currently only secret
and role
is supported. Setting the secret
allows you to open the people task dashboard of any user for which you have the secret (not just the currently signed-in user. This secret comes from either the approverSecret
or requesterSecret
property of the object returned when you create a new task. Setting role
to either "approver"
or "requester"
allows you to change the default view of the people task dashboard. In other words, if a user is both an approver and a requester, they have different lists of tasks for both roles.
reload()
Refresh the PeopleTasks. This can be called when tasks have been modified through API, to make sure changes are reflected in the UI.
Method
Description
appmixer.ui.Components(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the widget will be rendered.
open()
Render the widget inside its container.
close()
Terminate widget and empty the container.
reload()
Reload the widget data.
The appmixer.ui.Wizard is a UI widget that creates a custom integration instance.
Method
Description
appmixer.ui.Wizard(config)
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the Wizard will be rendered.
open()
Render the Wizard inside its container.
close()
Close the Wizard.
on(event, handler)
React on events of the Wizard widget. See below for the list of events the Wizard widget supports.
off([event, handler])
Remove event listeners. If no arguments are provided, remove all event listeners. If only the event
is provided, remove all listeners for that event. If both event
and handler
are given, remove the listener for that specific handler only.
reload()
Refresh the Wizard.
Event
Callback
Triggered when ...
flow:start
function(flowId)
The user clicked the submit button and the integration was started.
cancel
function()
The user clicked the cancel button.
The appmixer.ui.Integrations is a UI widget that displays available and active integrations.
Method
Description
appmixer.ui.Integrations()
Constructor function that accepts config
object. The config
object must contain at least the el
property that points to a container DOM element where the Integrations will be rendered.
open()
Render the Integrations inside its container.
close()
Close the Integrations.
on(event, handler)
React on events of the Integrations widget. See below for the list of events the Integrations widget supports.
off([event, handler])
Remove event listeners. If no arguments are provided, remove all event listeners. If only the event
is provided, remove all listeners for that event. If both event
and handler
are given, remove the listener for that specific handler only.
reload()
Refresh the Integrations.
Event
Callback
Triggered when ...
integration:create
function(templateId)
User clicks to opens an available Integration.
integration:edit
function(integrationId)
User clicks to edits an active Integration.