As a Flow Studio designer, you would want the user to fill an HTML form, or ask for the user to log-in, or send a carousel while executing the Flow studio. In such cases, you can use the Custom Control in the Flow Studio to literally come out of the Flow Studio flow and execute your business logic using a function node in the Experience Designer.
If you want to continue the Flow Studio flow after executing the Custom Control, you have to connect the output from the function node to the Flow Manager node in the Experience Designer as shown in the screenshot below.
When execution reaches a Flow Studio Flow's Custom control, Orbita directs the response to the 3rd pin of the Flow Manager node in Experience Designer. (See Flow Manager Node documentation for more information.)
When you drag the Custom control to the Flow Studio canvas, you can see a name field and the control's ID. In Experience Designer, developers can write code that executes when the Custom control is reached.
As a Flow Studio designer, you must make a note of the Custom control's ID and the Name displayed on the dialog.
The value of the control ID and Name are available in the msg object atmsg.payload.session.attributes.orbitaSession.flowInfo.controlId and msg.payload.session.attributes.orbitaSession.flowInfo.controlName respectively.
Using Custom Control ID for hook data
Below is a sample script evaluating the Custom control ID and dispatching accordingly.
Place the below code in a function node.
The third pin of the Flow manager node should be fed to this function node and the output of this function node should be connected back to the Flow manager node.
var controlId = msg.payload.session.attributes.orbitaSession.flowInfo.controlId;
switch(controlId)
{
case "727728496933425673":
return [msg, null];
case "697728492533472789":
return [null, msg];
// etc
}
This process can be used to perform a simple calculation, or dispatch control to an entirely separate Flow Studio Flow or survey.
You can also make use of the switch node if you have multiple custom controls within the same flow studio flow.
The property field should contain the below path
msg.payload.session.attributes.orbitaSession.flowInfo.controlId
Flow jumping
If you want to jump to another flow and control, you can do it by replacing the flowInfo property in the output payload object.
Place the below code in a function node.
The third pin of the Flow manager node should be fed to this function node and the output of this function node should be connected back to the Flow manager node.
msg.payload.session.attributes.orbitaSession.flowInfo = {"flowId":"5ef0e39e8c9100006f001481",
"controlId":"771065401040319953",
"state":"IN_PROGRESS",
"messageArray":[],"answerArray":[],
"checkboxPntr":0,"multiOptionMode":[],
"items":{}};
return msg;
By replacing the flowInfo property and connecting the function node to the Flow manager node, your flow will continue from the next control ID in the new flow manager flow.
In the above example code, the control ID 771065401040319953 is deemed completed and the next control id from the flow 5ef0e39e8c9100006f001481 will be rendered in the chatbot.
Using a Custom Control Name for hook data
You can also configure your logic for a Custom Control based on its Name.
A Hook event lets you use the name of the Custom Control (in the Flow studio) to call whichever function is registered with that name in Experience Designer.
You can use the Hook events if you have reusable functions in your conversation flow.
Setting up Hook Event
In Experience Designer, design a flow as shown below
or you can use a built-in example flow.In the Experience Designer, create a new flow.
Click on the hamburger menu on the top right corner and navigate to Import > Built-in > Orbita Flows-(BETA) > Flow Manager.
Place the flow on the canvas and Deploy the flow
The Hook-Data function node contains the below code to enable the hook to fire the custom logic based on the Custom Control Name.
try { const _ = global.get('lodash'); controlId = msg.payload.session.attributes.orbitaSession.flowInfo.controlId, controlName = msg.payload.session.attributes.orbitaSession.flowInfo.controlName, hookName = controlName.indexOf(":") > - 1 ? controlName.substr(0, controlName.indexOf(":")) : controlName, args = controlName.indexOf(":") > -1 ? [msg, ...controlName.substr(controlName.indexOf(":") + 1).split("|") .map(arg => arg.trim()) .filter(arg => !!arg) .map(arg => arg === "null" ? null : arg)] : [msg]; msg.payload.externalHook = { data: hookName } if (hookName) { const hook = global.get("hooks")[hookName]; msg.hookResult = { hookFound: !!hook }; if (hook) { hook.apply(null, args); } else { msg.hookResult.executionSuccess = false; msg.hookResult.error = `Could not find hook '${hookName}'`; node.warn(`Could not find hook '${hookName}'`); return msg; } } } catch (error) { msg.hookResult.executionSuccess = false; msg.hookResult.error = error; node.warn(`Error executing hook`); node.error(error); return msg; }To set up the Hook Events, you need to initialize the hooks. The Settings / Hooks Initialize function node is used to register the hook condition so that the Hook-Data function knows what to do with it.
const settings = global.get("settings") || {}; settings.emptyString = ''; global.set("settings", settings); const hooks = global.get("hooks"); global.set("hooks", hooks || {}); return msg;You will register your Hook Event with an Inject node. All the Inject nodes in this flow have the same configuration.
When the Custom control named HTMLDirective gets called in Flow studio, the function node named HTML form Hook will be called.
global.get("hooks").HTMLDirective = msg => { node.send(msg); };The next function node calls the HTML form and it is subsequently connected back to the Flow Manager node to continue the conversation flow.