workflow-builder.js
v0.1.7
Published
a simple workflow builder js lib
Downloads
3
Readme
workflow-builder.js
a simple workflow builder js lib
Install
yarn add workflow-builder.js
API
The full API for php-form is contained within the TypeScript declaration file
Example Usage
import {Workflow} from 'workflow-builder.js'
function htmlDecode (input) {
const e = document.createElement('div');
e.innerHTML = input;
return e.childNodes[0].nodeValue;
}
const container = document.getElementById('app')
const tree = {
id: 1,
type: 'start',
title: [
'Workflow Triggered',
{
text: '105,432 contacts',
attr: {
'font-size': 10
}
}
],
children: [
{
id: 2,
type: 'operation',
title: 'Add Tag',
tooltip: 'added_tag_1 \/ added_tag_2',
children: [
{
id: 3,
type: 'operation',
title: 'Delay',
tooltip: '10 minutes',
children: [
{
id: 4,
type: 'condition',
title: 'If/Then Branch',
tooltip: "CTA Clicked",
data: {
yes: 5,
no: 6,
},
children: [
{
id: 6,
type: 'operation',
title: 'Remove Tag',
tooltip: 'added_tag_1',
},
{
id: 5,
type: 'operation',
title: 'Send Campaign',
tooltip: [
'Demo workflow campaign',
{
text: '10,234 emails sent',
attr: {
'font-size': 10
}
},
{
text: htmlDecode(' 54%  6%  6%  6%'),
attr: {
'font-size': 10,
'font-family': '"Font Awesome 5 Free"'
}
},
],
},
],
},
],
},
],
}
]
}
const workflow = new Workflow(container, {
creation: {
tooltip: 'Add New Action',
onClick: (e, node) => alert(`create ${node.title}`),
},
node: {
onClick: (e, node) => alert(node.title),
},
})
workflow.render(tree)