KapBox Constructor

Syntax

Kap.KapBox (settings)

Parameters

settings. JSON object that contains parameters applied on creation of the KapBox component.

The following parameters are available:

Parameter Name Type Brief description
Mandatory parameters:
Metabase PP.Mb.Metabase Repository to which the user will connect.
ParentNode string DOM node that will store the component.
Optional parameters:
Key number Dashboard key.
Moniker string Moniker of open dashboard.
Mode string Dashboard opening mode: edit - edit mode, view - view mode.
Inited function Callback function invoked after component initialization.
Saved function Callback function invoked on dashboard saving.
ServicesPlugins boolean It determines how pluginsregistered via services are displayed: true - displayed, false (by default) - are not displayed.
Opened function Callback function invoked on dashboard opening.
Rendered function Callback function invoked on dashboard drawing.
BlockFocused function Callback function invoked on block selection.
ContextMenu function Callback function invoked before showing context menu.

Description

The KapBox constructor creates a dashboard constructor.

Comments

Creates an instance of the Kap.Dashboard class.

Example

Create the HTML page and perform the following steps to execute an example:

1. In the HEAD tag add a link to the dashboard.nocache.js file. The "dashboard" folder (that contains executable files for dashboard constructor) "build" folder (that contains source files of Foresight Analytics Platform web application). These folders can be obtained from the root folder of installed Foresight  Analytics Platform web application.

2. In the SCRIPT tag add code for dashboard constructor creation:

    <script type="text/javascript">
        var serviceUrl = "PPService.axd?action=proxy";
        var exportUrl = "PPService.axd?action=export";
        var importUrl = "PPService.axd?action=import";
        var kapBox;
        function OpenKap(connId) {
            metabase = new PP.Mb.Metabase({
                Id: "Metabase",
                PPServiceUrl: serviceUrl,
                ExportUrl: exportUrl,
                ImportUrl: importUrl,
                ConnectionOdId: { id: connId }
            });
            kapBox = new Kap.KapBox({
                Metabase: metabase, //Foresight Analytics Platform repository to which connection will be created
                ParentNode: "DashboardBox", //DOM node where the KapBox component will be placed
                ImagePath: "../build/img/", //path to folder containing pictures
                ResourcesPath: "../resources/", //path to resource folder
                Inited: kapBoxInited, //handler of the component initialization event
                Opened: kapBoxOpened, //component opening event handler
                Rendered: kapBoxRendered, //component rendering event handler
                ContextMenu: kapContextMenu, //context menu call event handler
                BlockFocused: kapBlockFocused //block selection event handler
            });
        }
        function onModuleInit() {
            if (PP.App.isMetabaseOpened()) {
                OpenKap(PP.App.getConnectionId());
            } else {
                PP.Ui.getConfig().setChart(PP.AppConfig.Chart); // determine global setting for chart
                //entry point for autonomous startup the KapBox component
                var metabaseLogin = new PP.Mb.Metabase({ PPServiceUrl: serviceUrl,
                    Id: "PrognozPlatform_systest",
                    UserCreds: { UserName: "sa", Password: "Qwerty1" }
                });
                //if there are errors on repository connection, corresponding messages appear
                metabaseLogin.Error.add(function (sender, args) {
                    alert(args.ResponseText);
                });
                metabaseLogin.open(function (sender, args) {
                    //remember the repository opened in case of page reload
                    var connectionId = metabaseLogin.getConnectionId();
                    PP.App.setStorage("ConnectionId", connectionId);
                    PP.App.setStorage("ConnectOdId", { id: connectionId });
                    PP.App.setStorage("IsMbOpened", true);
                    OpenKap(connectionId);
                });
            }
        }
        function kapBoxInited() {
            console.log("Initialize dashboard constructor (KAP)")
        };
        function kapBoxOpened() {
            console.log("Open dashboard constructor (KAP)")
        };
        function kapBoxRendered() {
            console.log("Render dashboard constructor (KAP)")
        };
        //on selecting the block the console displays an JSON object with selected block parameters
        function kapBlockFocused(sender, args) {
            currentBlock = args.Block;
            console.log(currentBlock)
        };
        //right click on the dashboard workspace opens context menu (by default it is not opened)
        function kapContextMenu() {
            function kapContextMenu(sender, args) {
                args.Menu.ShowMenu = true
            }
        };
    </script>

NOTE. There must be connection to database via the onModuleInit() function. The function is called to create KapBox and Metabase.

3. In the BODY tag add a DIV element that will contain dashboard constructor:

<body style="height: 100%;">
    <div id="DashboardBox" style="width: 100%; height: 100%;">
    </div>
</body>

After executing the example a dashboard designed is placed in the page:

The browser console displays appropriate messages on initializing, rendering and opening the dashboard constructor.

Clicking the right mouse button on the component workspace opens the following menu:

On selecting a dashboard block (when the focus moves to a dashboard block), the console shows a JSON object that contains parameters of the selected block.

NOTE. To add a block, select the New Block option from context menu of the dashboard working area.

See also:

KapBox | Example of the KapBox Component Layout