Integrate dashboard into third-party software

You can integrate Sentinel Web Dashboard objects into third-party HTML pages, for example, portals. To do this, the HTML pages must conform to W3C standards for HTML. If you do not need authentication, the objects must be public. See Publicly accessible Web Dashboard objects. Otherwise, the user will be presented with the Web Dashboard login page.

When you have your HTML ready, you must deploy it on a web server. If Web Dashboard is accessible via HTTPS, the SSL certificate must be trusted by the browser where the third-party HTML is displayed.

The following is an example of an HTML file deployed on the same web server as Web Dashboard. This example uses a public dashboard and features the following elements:

  • a meta tag to prevent Microsoft Internet Explorer from switching to compatibility mode.
  • a div tag that acts as a container for a Web Dashboard report.
  • two script elements to provide the logic necessary to display the report with the name "MyReport."
Note   Do not use Internet Explorer quirks modes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>

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

<body>

<script type="text/javascript" src="/SentinelWebDashboard/js2/libs/ext/jquery.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="/SentinelWebDashboard/js2/document.min.js" charset="UTF-8"></script>

<script>

ldb.e.observe(window, 'load', function() {

var container = new ldb.document.Container();

container.bootstrap({

   id:'XXX',

   sessionType:'DOCUMENT',

   name:'MyReport',

   publicUser:'webdashboard',

   contextPath:'/SentinelWebDashboard',

   embedded:true,

   noFinder:true,

   noPostit:true,

   noBookmark:true,

   noSettings:true,

   noLogout:true

   });

});

</script>

<h1>Hello world!</h1>

 

<p>Here I am</p>

<div id="XXX" class="ldb" role="application"

style="position:absolute; left:10%; width:80%; height:400px; border: 1px solid #999;"></div>

</body>

</html>

The parameters supported in the script are:

Parameter Description

id 

Div id in which the document is to be inserted (mandatory) 

contextPath 

Context where Sentinel Web Dashboard is deployed (mandatory). This context must be either of the following: 
  • a relative path. It must start with '/' (for example: /SentinelWebDashboard).
  • a complete URL, beginning with http:// or https://. In this case, the HTML page and Sentinel Web Dashboard come from different origins. The CORS parameter is needed.
Note CORS mode is not supported by older browsers, for example Internet Explorer 6, 7 or 8.

clientId 

This parameter is applicable only if the "embedded" parameter has the value "true". The client id is mandatory when embedding objects from multiple Web Dashboard instances in the same HTML page. See sample code provided below.

cors 

Parameter for Cross-Origin Resource Sharing (http://www.w3.org/TR/cors/). Default value is false. For more details, see the description of contextPath parameter.

sessionType 

The type of the document to display (mandatory). Specify one of the following: 
  • DOCUMENT: Report 
  • DASHBOARD: Dashboard 
  • EXTERN: External session 
  • CONTROL: Control 
  • METRIC: Metric 
  • METRIC_HISTORY: Metric history 
  • CONTROL_PANEL: Control panel 
  • METRIC_PANEL: Metric panel 
  • STRATEGY_MAP: Strategy map

name 

The name of the document to display. Mandatory when "sessionType" is any of the following: 
  • DOCUMENT: Report 
  • DASHBOARD: Dashboard 
  • EXTERN: External session 
  • CONTROL: Control 
  • METRIC: Metric 
  • METRIC_HISTORY: Metric history

filters 

Filters to apply to the report or dashboard.
  • name: filter name 
  • use: true to apply the filter or false to not apply the filter 
  • datatype: the data type of the filter:
      • GENERIC_NUMERIC: numeric
      • GENERIC_DATE: date 
      • GENERIC_CHAR: string 
  • values: String array for filter values

publicUser 

Always has the value webdashboard. Indicates that the object to display is public and does not require authentication.

noFinder 

If true, hides the menu icon from the right side of the toolbar.

noPostit 

Used to hide post-its. For public objects, true is considered independently of the configured value.

noBookmark 

Used to hide bookmarks. For public objects, true is considered independently of the configured value.

noSettings 

Used to hide user settings. For public objects, true is considered independently of the configured value.

noLogout 

Used to hide the logout button from the toolbar. For public objects, true is considered independently of the configured value.

Examples

Code snippet for using filters for a dashboard object

The dashboard's dashboardName is filtered on the field, year.

...

container.bootstrap({

   id:'XXX',

   sessionType:'DASHBOARD',

   name:'MyDashboard',

   contextPath:'/SentinelWebDashboard',

   embedded:true,

   filters:[{name:'year', use:true, datatype:'GENERIC_NUMERIC', values:['2012','2013']},

]});

...

CORS mode - remote Sentinel Web Dashboard

In this case, the src and the contextPath attributes must specify a complete URL. Here, a code snippet for embedding MyReport from a remote Web Dashboard (foo.com).

... <script type="text/javascript" src="http://foo.com:18080/SentinelWebDashboard/js2/document.min.js" charset="UTF-8"></script>

<script>

ldb.e.observe(window, 'load', function() {

   var container = new ldb.document.Container();

   container.bootstrap({

      id:'XXX',

      sessionType:'DOCUMENT',

      name:'MyReport',

      publicUser:'webdashboard',

      contextPath:'http://foo.com:18080/SentinelWebDashboard',

      embedded:'true',

      cors:'true' ,

});

</script>

...

Note   To use CORS mode, uncomment the filters and related mapping in the web.xml file of Sentinel Web Dashboard. To find the filters and mappings, search for cors.

Web Dashboard objects from multiple Web Dashboard instances

You can integrate several objects from different Sentinel Web Dashboard installations into a single HTML page. To do this, define your HTML page with several div elements with the unique identifiers, XXX, YYY, and ZZZ.

...

ldb.e.observe(window, 'load', function() {

var container = new ldb.document.Container(), callback;

callback = function()

{

   var container2 = new ldb.document.Container();

   var container3 = new ldb.document.Container();

   container2.bootstrap({

      id:'ldb2',

      clientId:'YYY',

      sessionType:'DOCUMENT',

      name:'MyReport1',

      publicUser:'webdashboard',

      contextPath:'/SentinelWebDashboard',

      cors:false,

      embedded:true,

   });

 

   container3.bootstrap({

      id:'ldb3',

      clientId:'ZZZ',

      sessionType:'DASHBOARD',

      name:'MyDashboard1',

      publicUser:'webdashboard',

      contextPath:'/SentinelWebDashboard',

      cors:false,

      embedded:true,

   });

};

 

container.bootstrap({

   id:'ldb1',

   clientId:'XXX',

   sessionType:'DOCUMENT',

   name:'MyReport2',

   contextPath:'/SentinelWebDashboard',

   publicUser:'webdashboard',   cors:false,

   embedded:true

},

 

callback);

});

...

If you want to use the multiple integration with CORS mode, modify it to specify an absolute URL for the contextPath parameter and to set the parameter cors to true.

Related Links