External component

Web Dashboard enables you to include external components, such as a website or some other HTML page, in your dashboard. In addition, you can apply filters and dynamic links to external components.

Using an external component, you can also display Web Monitoring requests. See Visualize requests and graphic objects from Sentinel Monitoring.

After defining an external component, you can either include it directly in a Dashboard (see Create a Web Dashboard) or you can use it in a Dynamic link (see Dynamic links) to be able to navigate from a Report to an External component.

Create an external component

To create an external component:

  1. On the Main menu, click Dashboard design > External component. A list of existing external components displays.
  2. Select the New document button to create a new External component. A new document opens and the Description tab displays.
  3. Provide information about the external component. On the Description tab, enter values for the following fields:
  4. Field Description
    Name A unique identifier for the external component object. This is a mandatory field
    Description A user-friendly label for your external component to be displayed across the GUI. The description can be internationalized (translated into the language defined for each user) using Internationalization tab. This is a mandatory field.

    URL

    The URL of the web page or the corresponding JavaScript file. This URL is the same as the one displayed in your browser's address bar.
    Plugin mode A check box that indicates whether the external component's URL points to a JavaScript file.
    Class to be loaded The name of the JavaScript class.
  5. Optionally, define filters. You specify parameters that are treated as filters and are similar to report-level filters in terms of both their definition and their usage.
  6. Field Description
    Name The name of the POST or GET parameter.
    Description Used when displaying the filter for users or the dynamic link.
    Default value The default value of the parameter. You can also add a personalized field from the drop-down list.
    Value list It is possible to select an SQL query that offers a list of options for the parameter's value, rather than an unrestricted user input.
    Require If this option is checked, when executing the external component the filter cannot be disabled (unchecked). The filter will be systematically applied.
    Dynamic link Specifies whether or not the parameter can be used in a dynamic link.
    Visible If this option is checked the parameter will be displayed on the filters pop-up when the external component is executed. If it is unchecked the parameter won't be displayed but if the option Dynamic ink is checked, the parameters will be available when defining a dynamic link
    Active Specifies whether or not the parameter is applied

In order to be able to use an external component in Dashboards, you must first add the component to the user's workspace. See User access managment.

If you want to use the external component in a dynamic link, it is sufficient to include the object, Hidden session-group.

Examples of external components

Google maps

The following is an example of filters you can define when creating an external component for Google maps. These parameters will be reflected when displaying the external component.

The URL is: https://maps.google.com

Name Description Default Value Additional Information
q location query New York, NY

If you use a default value, it is used when displaying the Google map. In this case, when you display the Google map, you will see a map of New York, NY.

If you do not use a default value, you can specify a location when displaying the external component by clicking the Filters button.

output output format embed This displays the Google map inside the Web Dashboard.
t map type m

The following values are available for this parameter:

  • m - map
  • k - satellite
  • h - hybrid
  • p - terrain
  • e - GoogleEarth
z zoom level 12 Values for zoom level range from 1 to 20.

Visualize requests and graphic objects from Sentinel Monitoring

The following is an example of using PassPort with SSO as an access management application. A specific cycle graph is displayed when accessing this external component.

If you choose to use filters to define the parameters from the url, you should use a relative URL, like this:

https://passportserver:6900/axway/Sentinel/4.0.1/default/SentinelMonitoring/SentinelMonitoring/

For more detail, see Visualize requests and graphic objects from Sentinel Monitoring.

Name Description Default Value Additional Information
actions actions search

The request is executed through this parameter.

request request full name Company.Sentinel.Graph This is the complete name of the request to be executed.
showCycleGraph cycle graph true

Controls whether the external component displays the cycle graph or the search results.

true: the cycle graph view is displayed

false: search results are displayed

objectId objectId 123 The ObjectId parameter used when displaying a Cycle Graph.
cycleId cycleId 456 The CycleId parameter used when displaying a Cycle Graph

If you do not use filters, the URL should contain all the parameters, like this:

https://passportserver:6900/axway/Sentinel/4.0.1/default/SentinelMonitoring/SentinelMonitoring/?actions=search&request=Company.Sentinel.Graph&showCycleGraph=true&objectId=ObjectId&cycleId=CycleId

HTML home page

You can define an external component to be used as an HTML home page for Web Dashboard. To do this, you create an external component as shown below and include it in a dashboard.

To see this page directly after login, choose this dashboard as the user's Home under User management > User > Description tab.

Before defining your external component, create a folder under Administration > Folder, for example, in the directory /pub/home. Also, create the "home" folder on the server side under webdashboard/pub. In this location on the server side, you put the JavaScript file (see the example attached). Please see more details about folders in the section Server side resources and folder management.

Field Example of field value Additional Information
URL folder/Home/my_home_page.js Home is the folder created on the server side. my_home_page.js is the JavaScript file used to display the home page.
Plugin mode checked

This option is checked because the external component's URL points to a JavaScript file

Class to be loaded ldb.plugin.home The name of the JavaScript class used in the JavaScript file.

In the JavaScript sample below, you can modify the two objects, ldb.plugin.Home and ldbInit2 in order to change the content of your HTML page. This sample contains a title "Hello world", a subtitle "This is a sample Javascript code to be employed in Web Dashboard" and an image.

if (ldb.plugin == null) ldb.plugin = {};

 

ldb.plugin.Home = function () {

this.div = null;

this.name = null;

this._container = null;

this._scrollPane = null;

this._l10nMap = null;

this._data = null;

 

this._i18nMap = {

en: {

home: 'Hello world',

welcome: 'This is a sample Javascript code to be employed in Web Dashboard'

}

};

};

ldb.plugin.Home.prototype = {

constructor: ldb.plugin.Home,

 

destroy: function() {

 

if (this._scrollPane) {

this._scrollPane.destroy();

}

this._scrollPane = null;

},

ldbInit2: function (name, container) {

var builder,

table,

tbody,

tr,

td,

ul,

li,

h2,

a,

href,

items,

i,

j,

node,

node2;

 

this._container = container;

this.name = name;

 

switch (this._container.application.userLanguage) {

case 'fr':

this._l10nMap = this._i18nMap.fr;

break;

default:

this._l10nMap = this._i18nMap.en;

};

this.div = this._container.getDocDiv();

ldb.o.setStyle(this.div, {

backgroundColor:'#f6f6f6',

backgroundRepeat:'no-repeat',

borderRadius: '4px'
});

 

this._scrollPane = new ldb.framework.ScrollPane(this._container, this.div);

 

builder = this._container.factory.getBuilderInstance();
node = builder.createElement(this._scrollPane.div, 'H1');

ldb.o.setStyle(node, { background: '#f6f6f6', margin: '0', borderRadius: '4px', textAlign: 'center', lineHeight: '32px' });

builder.text(node, this._l10nMap.home, false);

 

node = builder.createElement(this._scrollPane.div, 'H2');

ldb.o.setStyle(node, { textAlign: 'center', lineHeight: '32px' });

builder.text(node, this._l10nMap.welcome, false);

 

node = builder.createElement(this._scrollPane.div, 'DIV');

ldb.o.setStyle(node, {textAlign:'center'});

node2 = builder.image(node, this._container.application.contextPath + '/folder/home/web-dashboard.png', 'AXWAY');

ldb.o.setStyle(node2, {margin:'1em'});

},

getCommands: function () {

return this._container.application2.createCommandsArray();

},

getInfos: function () {

return null;

},

execute: function(action) {

if (!action) return;

switch (action) {

default:

this._container.application.displayErrorMessage({ message:

this._container.application.getL10nMap().notImplementedError }, 'Finance');

};

},

resize: function() {

this._scrollPane.resize(this.div.offsetWidth, this.div.offsetHeight);

}

}; ldb.js.registerUrl('folder/Home/home2.js');

Related Links