HELP!
© XpertRule

How do I embed Viabl.ai Platform development in my webpage?

Overview

The Viabl Platform developer can be integrated within other development platforms through the use of an iFrame on a container page.

Example

The Viabl.ai Platform iFrame URL can optionally have the following parameters in order to auto-login, auto-load a knowledge base, hide the explorer etc.

iFrame URL Example

'http://localhost/wauthor/editor.html?a=7&e=adam@adam.com&p=adam&t=Expenses&m=noexp&cb=WAcallback'

Parameters "e" This input parameter refers to the user login email address. This is required for user authentication and privs access. "p" This input parameter refers to the user login password. This is required for user authentication. "a" This input parameter refers to the ID of the knowledge base to auto-open. You can retrieve the knowledge base ID by using the "Get Direct Link" menu option on the knowledge bases selector screen "t" This input parameter refers to the chosen decision tree to be auto-opened in the iframe. "m" This optional input parameter refers to the Viabl.ai Platform editor mode. This can be one of the following values... "noexp" - This option removes the tree explorer from view. "cb" This input parameter refers to the name of the wrapper callback function to be called in response to various Viabl.ai Platform events. See next section for more details

Viabl.ai Platform Action Notifications

The Viabl.ai Platform provides a callback integration scheme which allows the wrapper to be notified of various events. Many of these events are triggered in response to user interactions.

If the "cb" parameter is passed in the Viabl.ai Platform URL, the named JavaScript function is called in response to various Viabl.ai Platform events.

The referenced function receives a single parameter which is an object giving details of the event. The format of the event object varies by event but there will ALWAYS be a "type" property detailing the name of the event.

Viabl Platform Callback Event Types

tree_node_select

{
    type: "tree_node_select",
    tree: "decision_tree_name",
    node: 42
}

This event occurs when the user selects a node on a decision tree.

Viabl.ai Platform Client Integration

The client page (i.e. the page containing the Viabl.ai Platform iFrame) can access various aspects of the currently open knowledge-base via the exposed xrkb_integrate object.

Methods exposed via the xrkb_integrate Object getNodeFilter

getNodeFilter: function(treeName, nodeID);

Retrieve a filter description for the specified (data mined) decision tree node The return from this method is an object detailing the filter (path) to the specified node. e.g.

{
    ok: true,
    filter: {
    valid: true,
    attributes: [
        {
            "name": "Time_bank",
            "type": "num",
            "values": [
                "lt": 3
            ]
        }, {
            "name": "Occupation",
            "type": "text",
            "values": [
                "creative_",
                "driver",
                "labourer"
            ]
        }, {
            "name": "Time_employed",
            "type": "num",
            "values": [
                "ge": 1
            ]
        }
    ]
}

If an error occurs, the return message looks something like this...

{
    ok: false,
    error: "A general error occurred"
}

Complete Wrapper Example (editor_wrap.html)

<html>
    <head>
        <script type="text/javascript">
        var currentTreeSelection;
        var WAintegration;
        // Viabl Platform operation callback.
        // The name of this function is passed in the iFrame URL as the cb parameter
        function WAcallback(operation) {
            if (!WAintegration) {
                var iframe = document.getElementById("WAframe");
                if (!iframe) {
                    alert("Fatal Error: Cannot find iframe");
                    return;
                } else {
                    WAintegration = (iframe.contentWindow || iframe.contentDocument).xrkb_integrate;
                }
            }
            switch (operation.type) {
                case "tree_node_select":
                    // the user has selected a node on a decision tree
                    // just store the selection in a global variable for use by the "show records" button
                    currentTreeSelection = operation;
                    break;
            }
        }
        // called by the "Show Records" button
        // uses global "currentTreeSelection" object
        function populateRecords() {
            var debugDiv = document.getElementById("dbg_table");
            var s = "";
            if (!currentTreeSelection) {
                s = "No currently selected node";
            } else {
                var result = WAintegration.getNodeFilter(currentTreeSelection.tree, currentTreeSelection.node);
                if (result.ok) {
                    var aFilter = result.filter;
                    if (!aFilter.valid) {
                        // todo : Hit a database and retrieve all the records
                        s = "Show all data";
                    } else {
                        // todo : Hit a database and retrieve the filtered records
                        s = "Show filtered data: " + JSON.stringify(aFilter);
                    }
                } else {
                    s = "There was an internal error : " + result.error;
                }
            }
            debugDiv.innerHTML = s;
        }
        </script>
    </head>
    <body>
        <h2>Web Editor Integration</h2>
        <iframe id="WAframe" src="editor/editor.html?a=42&e=joe&p=password&t=Decision&m=noexp&cb=WAcallback" width="95%" height="75%" frameborder="0" scrolling="no"></iframe><br>
        <button id="dbg_table_go" onclick="populateRecords()">Show Records</button>
        <div id="dbg_table"></div>
    </body>
</html>

On This Page