Using dashboards and gadgets

Creating a custom web page using the Actuate JavaScript API : Using dashboards and gadgets

Using dashboards and gadgets

The actuate.Dashboard class loads and displays dashboards and provides access to the gadgets contained in dashboards. To use actuate.Dashboard, load the class with actuate.load( ), as shown in the following code:

actuate.load("dashboard");

Load support for dialog boxes from the Actuate JavaScript API using actuate.load( ), as shown in the following code:

actuate.load("dialog");

Load the dashboard and dialog components to use the dashboard on the page. Call the actuate.Dashboard functions to prepare a dashboard and call the dashboard’s submit( ) function to display the contents in the assigned <div> element.

The actuate.Dashboard class is a container for a dashboard file. Create an instance of the class using JavaScript, as shown in the following code:

dashboard = new actuate.Dashboard("containerID");

The value of "containerID" is the name value for the <div> element that displays the dashboard content. The page body must contain a <div> element with the containerID id, as shown in the following code:

<div id="containerID"></div>

To set the dashboard file to display, use setDashboardName( ) as shown in the following code:

dashboard.setDashboardName("/sharedtab.dashboard");

The setReportName( ) function accepts the path and name of a report file in the repository as the only parameter. In this example, "/public/customerlist.rptdesign" indicates the Customer List report design in the /public directory.

To display the dashboard, call dashboard.submit( ) as shown in the following code:

dashboard.submit(submitCallback);

The submit( ) function submits all of the asynchronous operations that previous viewer functions prepare and triggers an AJAX request for the dashboard. The Actuate web application returns the dashboard and the page displays the dashboard in the assigned <div> element. The submitCallback( ) callback function triggers after the submit operation completes.

The code in the following example displays a dashboard using the Actuate JavaScript API.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

  <title>Dashboard Page</title>

</head>

<body onload="init( )">

<div id="dashboardpane">

  <script type="text/javascript" language="JavaScript"

    src="http://localhost:8700/iportal/jsapi"></script>

  <script type="text/javascript" language="JavaScript">

  function init( ){

    actuate.load("dashboard");

    actuate.initialize( "http://localhost:8900/iportal", null, null, null, runDashboard);

  }  function runDashboard( ){

    var dash = new actuate.Dashboard("dashboardpane");

    dash.setDashboardName("/Dashboard/Contents /Documents.DASHBOARD");

    dash.setIsDesigner(false);

    dash.submit( );

  }

  </script>

</div>

</body>

</html>