JsBlock.setBlockType

Syntax

setBlockType({

    settings

});

Parameters

settings. JSON object with parameters:

Parameter name Type Brief description
Mandatory parameters:
Type string

Block type:

  • Table. Table.

  • Chart. Chart. Histogram is used by default.

  • Map. Map.

  • Bubbles. Bubble chart.

  • BubbleTree. Bubble tree.

  • TreeMap. Tree map.

  • Gauge. Indicator.
Optional parameters:
Callback function() {} The function is executed after block type is changed.

Description

The setBlockType method sets block type.

Comments

It is used only for the visualizer block type: table, chart, map, bubble chart, bubble tree, tree map, indicator.

Example

To execute the example, make sure that the repository contains a dashboard with the 88665 key.

Create an HTML page with the code that implements repository connection, dashboard opening using the KapBox constructor and creates the Change Block Type button to change block type from table to chart.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>JsBlock.setBlockType</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.xx64/axis2/services/PP.SOM.Som";
        var importUrl = "http://localhost/FPBI_App_v10.xx64/axis2/services/PP.SOM.Som";
        // Create a function to open dashboard and get access to block export
        function OpenDashBoard(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
                Key: 88665, // dashboard key
                BlockFocused: kapBlockFocused // block selection event handler
            });
            type = new PP.Ui.Button({
                ParentNode: "but",
                Content: "Change block type",
                Click: function () {
                    var blockType = currentBlock.getBlockType();
                    if (blockType == "Table") {
                        currentBlock.setBlockType({
                            "Type": "Chart",
                            "Callback": function () {
                                currentBlock.refresh();
                                console.log("Block type has been changed");
                            }
                        });
                        currentBlock.refresh;
                    }
                    else console.log("Select table block");
                }
            });
        }
        function kapBlockFocused(sender, args) {
            currentBlock = args.Block;
            console.log(currentBlock)
        };
        // Create a function for repository connection
        function onModuleInit() {
            if (PP.App.isMetabaseOpened()) {
                OpenDashBoard(PP.App.getConnectionId());
            } else {
                // Test entry point for autonomous startup of the KapBox component
                var metabaseLogin = new PP.Mb.Metabase({
                    PPServiceUrl: serviceUrl,
                    Id: "Repository",
                    UserCreds: {
                        UserName: "user",
                        Password: "password"
                    }
                });
                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);
                    OpenDashBoard(connectionId);
                });
            }
        }
    </script>
</head>
<body style="height: 100%;">
    <div id="DashboardBox" style="width: 100%; height: 100%;"></div>
    <div id="but"></div>
</body>
</html>

After executing the example select the dashboard block with table and click the Change Block Type button. The table will be changed to chart, and the dashboard block is refreshed, the console displays the message about changed block.

See also:

JsBlock