Versions Compared

Old Version 7

changes.mady.by.user Lydia Hou

Saved on

compared with

New Version Current

changes.mady.by.user Olivia Thomajan

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. In Experience Designer, design a flow as shown below


    or you can use a built-in example flow.

    1. In the Experience Designer, create a new flow.

    2. Click on the hamburger menu on the top right corner and navigate to Import > Built-in > Orbita Flows-(BETA) > Flow Manager.

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

    Code Block
    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;
}

     

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

    Code Block
    const settings = global.get("settings") || {};
settings.emptyString = '';
global.set("settings", settings);

const hooks = global.get("hooks");
global.set("hooks", hooks || {});

return msg;

     

  3. You will register your Hook Event with an Inject node. All the Inject nodes in this flow have the same configuration.

     

  4. When the Custom control named HTMLDirective gets called in Flow studio, the function node named HTML form Hook will be called.

     

    Code Block
    global.get("hooks").HTMLDirective = msg => {
    node.send(msg);
};

     

  5. The next function node calls the HTML form and it is subsequently connected back to the Flow Manager node to continue the conversation flow.

Video Content

https://cdn.orbita.cloud/assets/orbita/flowstudio/Flowstudiohookeventflowstudiohookevent.mp4

Video Key Messages

  • A hook event allows you to add a custom control to your flow by using the name of that control to call whichever function is registered with it.

  • Your project will be set up with the initialize hook settings.

  • Review a BMI Calculator hook event from an open-text chatbot experience.

...