Object-based interface

If you use the object-based interface, your Management view components are initially declared and created (instantiated) as objects. After the HTML page loaded, the instantiated objects of your Management views are initialized and represented.

To ensure that your Management view components are displayed only after the HTML page has loaded completely, specify the JavaScript method that calls the init methods of your Management view objects in the onload attribute of the <body> HTML tag of your HTML page, for example <body onload="initMVComponents();">.

Declaration

You must first create each object of the Management view components of your html structure file with the new method and save it in a JavaScript variable. For Flex-based Management views, the MVFlexComponent object class is available.

With the following JavaScript line, you create an MVFlexComponent object and save it in the variable mv1:

...

var mv1 = new MVFlexComponent();

...

Initialization and display

Already created Management view components are displayed by calling the init() object method in your html page. The method has the following parameters:

init(id, favoritePath, favoriteServer, width, height, view, filterMaster, externalLink);

Parameter

Description

id

Identifier of the HTML element in which the Management view component is displayed.

favoritePath

Path to the favorite in the source system

Syntax: \<Favorites folder>\...\<Favorite name>

Replace the backslash character in the favorites path with the string %5c and avoid special characters such as accents etc. in folder and favorite names. 

favoriteServer

Type of favorite, valid values:

FAVORITE_PRIVATE: User-specific

FAVORITE_SHARED: General

width

Width of the embedded Flex component in pixels or percent

height

Height of the embedded Flex component in pixels or percent

view

If the Management view component contains a chart, you can choose between two chart types:

  • BITMAP:
    The chart is integrated as a graphic created by PPM. Except for the display of tooltips, no interaction with the chart is possible. In particular, it cannot be used as an interactive filter component.
  • FLEX:
    The chart is represented using the Flex-specific chart library. The available interaction options allow it to be used as an interactive filter component (see chapter on Interactive filters between MV components).

filterMaster
(optional)

The comma-separated list (array) of the Management view components and global filter components that will act as a filter for the selected component (see chapter on Interactive filters between MV components or Integrate global filter components).

externalLink
(optional)

In addition to the source system URL call with the analysis data for the selected Management view component, you can specify another URL to call up an external HTML page.

You cannot enter descriptions for external links.

If you specify a percentage for the width of the Management view component, the width of the Management view component displayed automatically adjusts to the size of the browser window.

Examples of adaptations of the method

When entering or changing the parameter values, pay attention to the sequence of the parameters specified by the method. If you do not want to transfer values for certain parameters when calling up the Management view, leave the corresponding fields blank ("").

Example of a Flex MV

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

<html>

<head>

<script language="javascript"
src="../assets/javascript/mvhelper.js">
</script>

<script language="javascript"
src="../assets/javascript/linkhelper.js">
</script>

<script language="JavaScript" type="text/javascript">
initializeFlex();

// MVComponents has to be declared here

//

var mv1 = new MVFlexComponent();
var mv2 = new MVFlexComponent();

// MVComponents has to be initialized here, after

// page has been loaded

//

function initMVComponents() {

mv1.init("node1", "%5CFav_1", "FAVORITES_PRIVATE",
"FLEX", "100%", "400", "", "");
mv2.init("node2", "%5CFav_2", "FAVORITES_PRIVATE",
"FLEX", "100%", "400", "", "");
}

</script>

</head>

<body onload="initMVComponents();">

<div>

<table cellpadding="0" cellspacing="0" rules="none"
frame="void" border="0" bgcolor="#FFFFFF"
width="100%" height="100%">

<tbody>

<tr>

<td id="node1"></td>

<td id="node2"></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>