Example of the KapBox Component Layout

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 repository, to which connection is established
                ParentNode: "DashboardBox",//DOM node, to which the KapBox component is placed
                ImagePath: "../build/img/",//path to images folder
                ResourcesPath: "../resources/"//path to resources folder
            });
        }
        // Create a function for connecting to repository
        function onModuleInit() {
            if (PP.App.isMetabaseOpened()) {
                OpenKap(PP.App.getConnectionId());
            } else {
                PP.Ui.getConfig().setChart(PP.AppConfig.Chart); // set global setting for chart
                //test entry point for autonomous startup of the KapBox component
                var metabaseLogin = new PP.Mb.Metabase({ PPServiceUrl: serviceUrl,
                    Id: "PrognozPlatform7_systest",
                    UserCreds: { UserName: "sa", Password: "Qwerty1" }
                });
                metabaseLogin.Error.add(function (sender, args) {
                    alert(args.ResponseText);
                });
                metabaseLogin.open(function (sender, args) {
                    //remember opened metabase 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);
                });
            }
        }
    </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 dashboard constructor is placed in the page. To open a dashboard from the repository or to create a new dashboard, use the Document > Open and Document > New Document main menu items respectively. In the figure below see constructor with an open panel in the working area:

See also:

KapBox