KapBox Constructor

Syntax

Kap.KapBox({

    settings

});

Parameters

settings. JSON object with parameters applied on creating the KapBox component.

The following parameters are available:

Parameter name Type Brief description
Mandatory parameters:
Metabase PP.Mb.Metabase Repository, to which connection is established.
ParentNode string DOM node, which will house the component.
Optional parameters:
BlockExportControl boolean

It determines whether export block to file is available:

  • true. Default value. Block export to file is available.

  • false. Block export to file is unavailable.
BlockFocused function Callback function that is called on selecting block.
BlockLinkControl boolean

It determines whether the Block Link button is displayed in the block corner's drop-down menu:

  • true. Default value. The button is displayed if the Embed parameter is set to True.

  • false. The button is not displayed.
BlockMaximizeMinimizeControl boolean

It determines whether block is collapsed and expanded:

  • true. Default value. A block can be collapsed and expanded.

  • false. A block cannot be collapsed and expanded.
BlockPrintControl boolean

It determines whether block print is available without preview:

  • true. Default value. Block print is available.

  • false. Block print is unavailable.
BlockSettingsControl boolean

It determines whether visualizer settings are available in a block:

  • true. Default value. Visualizer setup is available.

  • false. Visualizer setup is unavailable.
BlockShowDataControl boolean

It determines whether displaying of data, based on which a block is built, is available:

  • true. Default value. Data displaying is available.

  • false. Data displaying is unavailable.
CMCorner2XSIZE boolean

It determine block corner icon size:

  • true. Default value. Corner icon is displayed in a standard size.

  • false. Corner icon is displayed in a 2x size.
ContextMenu function Callback function that is called before displaying context menu.
Embed boolean

It determines whether a block link can be obtained:

  • true. A link can be obtained.

  • false. Default value. A link cannot be obtained.
ExpressReport boolean

It determines whether express report can be inserted to a block:

  • true. Express report can be inserted to a block.

  • false. Default value. Express report cannot be inserted to a block.
HTMLBlock boolean

It determines whether HTML block can be inserted:

  • true. Default value. HTML block can be inserted.

  • false. HTML cannot be inserted.
ImagePath string The path to the folder with image files - ../build/img.
Inited function Callback function that is called after component initialization.
Key number Dashboard key.
Mode string

Dashboard opening mode:

  • edit. Edit.

  • view. View.
Moniker string Moniker of opened dashboard.
Opened function Callback function that is called on dashboard opening.
RegularReport boolean

It determines whether regular report can be inserted to a block:

  • true. Default value. Regular report can be inserted to a block.

  • false. Regular report cannot be inserted to a block.
Rendered function Callback function that is called on rendering dashboard.
ResourcesPath string The path to the folder with web application resources - ../resources.
Saved function Callback function that is called on saving dashboard.
ServicesPlugins boolean

It determines displaying of plugins registered in services:

  • true. Plugins are displayed.

  • false. Default value. Plugins are not displayed.
SidePanelEnableResize boolean

If determines whether side panel can be resized:

  • true. Side panel can be resized.

  • false. Default value. Side panel cannot be resized.
TimeSeries boolean

It determines whether time series can be inserted to a block:

  • true. Time series can be inserted to a block.

  • false. Default value. Time series cannot be inserted to a block.
ViewModeContextMenuOFF boolean

It determines whether block context menu is displayed on opening a dashboard for view:

  • true. Context menu is not displayed.

  • false. Default value. Context menu is displayed.

Description

The KapBox constructor creates an instance of the Dashboard class.

Comments

It implements the KapBox component to work with a dashboard.

When a plugin is connected to a dashboard via a repository, the dashboard setup is executed. To display the plugin registered in the services:

  1. Set the Kap.ServicesPlugins property with the True value, for example:

kapBox = new Kap.KapBox({
    Metabase: metabase,
    ParentNode: "DashboardBox",
    Key: ppKey,
    Mode: ppMode,
    ServicesPlugins: true
});

  1. Restart the web server used by the web application.

After executing the operations the plugin will be connected in the web application.

Example

To open dashboard using the KapBox constructor, create an HTML page and execute the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>KapBox</title>
    <script src="build/PP.js" type="text/javascript"></script>
    <script src="build/PP.Metabase.js" type="text/javascript"></script>
    <script src="build/PP.App.js" type="text/javascript"></script>
    <script src="build/PP.Express.js" type="text/javascript"></script>
    <script src="resources/Kap.resources.ru.js" type="text/javascript"></script>
    <script src="dashboard/dashboard.nocache.js" type="text/javascript"></script>
    <link href="build/PP.css" rel="stylesheet" type="text/css" />
    <link href="build/PP.App.css" rel="stylesheet" type="text/css" />
    <link href="build/PP.Metabase.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript">
        // Set PP.SOM service URL as follows:
        // <http://<ServerName | IP-address>[:<Port>][/<VirtualCatalog>]/axis2/services/PP.SOM.Som>
        var serviceUrl = "http://localhost/FPBI_App_v10.x/axis2/services/PP.SOM.Som";
        var exportUrl = "http://localhost/FPBI_App_v10.x/axis2/services/PP.SOM.Som";
        var importUrl = "http://localhost/FPBI_App_v10.x/axis2/services/PP.SOM.Som";
        // Create a function to open dashboard
        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, // repository, to which connection is established
                ParentNode: "DashboardBox", // DOM node, to which the KapBox component will be moved
                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 rendering event handler
                ContextMenu: kapContextMenu, // context opening event handler
                Collaboration: false, // disable collaboration mode
                BlockFocused: kapBlockFocused // block selection event handler
            });
        }
        function onModuleInit() {
            if (PP.App.isMetabaseOpened()) {
                OpenKap(PP.App.getConnectionId());
            } else {
                // entry point for autonomous initialization of the KapBox component
                var metabaseLogin = new PP.Mb.Metabase({ PPServiceUrl: serviceUrl,
                    Id: "Repository",
                    UserCreds: { UserName: "user", Password: "password" }
                });
                // If there are repository connection errors, the appropriate messages are displayed
                metabaseLogin.Error.add(function (sender, args) {
                    alert(args.ResponseText);
                });
                metabaseLogin.open(function (sender, args) {
                    // Remember opened repository if page reloads
                    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 designer")
        };
        function kapBoxOpened() {
            console.log("Open dashboard designer")
        };
        function kapBoxRendered() {
            console.log("Render dashboard designer")
        };
        // When block is selected, the console displays JSON object with selected block parameters
        function kapBlockFocused(sender, args) {
            currentBlock = args.Block;
            console.log(currentBlock)
        };
        // Clicking the right mouse button on the dashboard working area opens context menu (not opened by default)
        function kapContextMenu() {
            function kapContextMenu(sender, args) {
                args.Menu.ShowMenu = true
            }
        };
    </script>
</head>
<body style="height: 100%;">
    <div id="DashboardBox" style="width: 100%; height: 100%;">
    </div>
</body>
</html>

NOTE. Use the onModuleInit() function to ensure database connection. The function should be called before creating KapBox and Metabase.

After executing the example, the dashboard designer opens on the page:

When the dashboard designer is initialized, opened and rendered, the browser console displays appropriate messages.

Clicking the right mouse button on the component working area opens the menu:

When a dashboard block is selected (focus is moved to dashboard block), the console displays JSON object with selected block parameters.

NOTE. To add a block, select the New Block context menu item on the dashboard working area.

See also:

KapBox | Example of Placing the KapBox Component