Kap.KapBox

Syntax

KapBox.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.
Collaboration Boolean Determines whether the Collaboration tab is available in the side panel: True (default) - available, False - not available.
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 designer) and "build" folder (that contains source files of Prognoz Platform 9). These folders can be obtained from the root folder of installed Prognoz Platform 9 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, //Prognoz Platform 9 filter, to which connection is established
                ParentNode: "DashboardBox", //DOM node, to which the KapBox component will be placed
                ImagePath: "../build/img/", //path to images folder
                ResourcesPath: "../resources/", //path to resources folder
                Inited: kapBoxInited, //component initialization event handler
                Opened: kapBoxOpened, //component opening event handler
                Rendered: kapBoxRendered, //component drawing event handler
                ContextMenu: kapContextMenu, //context menu calling event handler
                BlockFocused: kapBlockFocused, //block selection event handler
                Collaboration: true//enable collaboration mode
            });
        }
        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