Using the Dundas BI embed library

Contents[Hide]

1. Overview

The Dundas BI embed library is designed to make it easy to add any part of Dundas BI or the managed dashboard & report area of Logi Symphony into existing web pages and web applications. You can use the embed library in two different ways:

  • Embed without writing JavaScript – Use only HTML markup, which can be simpler and easier to maintain.
  • Embed with JavaScript – This allows for more advanced functionality such as running scripts and hooking into events in the embedded application.

Tip
You can also embed content, visualizations, an ad hoc dashboard editor, and more without an iframe using the new embedding methods in version 23.2 and higher.

1.1. Downloading the embed library

The embed library is a single JavaScript file, and you reference it with an HTML script tag.

The file can be found at the following location on the server or image where the application runs:

[InstanceDirectory]\www\BIWebsite\wwwroot\Scripts\Embed\dundas.embed.min.js

You can access this file under a Dundas BI or Logi Symphony application URL. For example, where https://symphony.example.com/managed/ takes you directly to Dundas BI or to managed dashboards and reports:

https://symphony.example.com/managed/Scripts/Embed/dundas.embed.min.js

You can place it in your own website or refer to it from this location. Update the example below depending on where the file can be accessed relative to your page:

<head>
    <script src="/js/dundas.embed.min.js" type="text/javascript"></script>
</head>

Important
Browser support for embedding HTTP cross-domain content is changing, and the embedded application should now either be accessed over HTTPS or have the same URL origin (protocol, hostname/domain, and port number) as the parent application. For more details and other considerations, see the browser and embedding product notes.

2. Embedding without JavaScript

This method is a quick and simple way of embedding that doesn't require any JavaScript, and uses the embed library as an alternative to creating an iframe element yourself and setting its URL. Add this HTML markup to your page or generate it in your server-based web application with the required information specified as attributes.

The following example embeds a Dundas BI instance located at https://placeholder.dundas-bi-url.com, and a dashboard with the specified ID:

   ...
<head>
    <script src="/js/dundas.embed.min.js" type="text/javascript" ></script>
</head>
   ...

<body>
    <div class="dundas-bi-embed"
        data-dundas-bi-url="https://placeholder.dundas-bi-url.com/"
        data-controller-type="Dashboard"
        data-file-system-id="727ae6b6-b5b6-4c1e-bad7-72561040298d">
    </div>
</body>


    

Note
This element must be added to the page before the browser's DOMContentLoaded event fires to embed Dundas BI without JavaScript.

The following table describes the HTML attributes that can be used when embedding without JavaScript:

AttributeDescription
class The class must be set to dundas-bi-embed to become a valid Dundas BI embedded application object.
data-dundas-bi-url The base URL pointing to the installed Dundas BI instance. For example: https://dbi.example.com:8000/
data-controller-type (Optional) The type of object you are embedding, which will normally match the portion of a Dundas BI URL for that object immediately following the base URL. Options include: Dashboard, Scorecard, Report, SmallMultiple, Slideshow, Shortlink, MetricSet, DataCube, CubePerspective, Hierarchy, Admin, Home.
data-file-system-id (Optional) The ID of an existing file you want to embed if data-controller-type is set to a file type such as a dashboard or metric set. This can be left unset to create a new file of that type.
data-shortlink The short link value following the /Link/?shortLink= portion of the link (e.g., ae6swdok5p5r3mm3m4oaguqujo) if data-controller-type is Shortlink, for example when using a shared link.
data-logon-token-id (Optional) The logon token ID (populated using code).
data-session-token (Optional) The session token (populated using code).
data-view-options (Optional) The view options when displaying a view such as a dashboard. The following are the possibilities: menuonly, menutoolbar, menutoolbartaskbar, none, toolbaronly, or viewonly. By default, viewonly is used when you specify the ID of an existing view. This can be left unset for a shortlink to use the view options chosen when creating the shortlink.
data-parametervalue-1 (Optional) The way to set view parameter values for a view such as a dashboard. You can use multiple of these attributes by increasing their number (data-parametervalue-2, data-parametervalue-3, etc.) The values are in a similar format as when passed via query string. E.g., viewParameter2=$Today$.
data-urlparameteroption-1 (Optional) The way to add other URL parameters. You can use multiple of these attributes by increasing their number (data-urlparameteroption-2, data-urlparameteroption-3, etc.) E.g., cultureName=fr-FR, or e=true to open a dashboard in edit mode.

The following example embeds the Dundas BI instance located at https://placeholder.dundas-bi-url.com, displaying the dashboard with the specified ID. It will log on automatically with the specified logon token, set two view parameters, and set the culture to fr-FR:

...
<head>
    <script src="/js/dundas.embed.min.js" type="text/javascript" ></script>
</head>
...

<body>
    <div class="dundas-bi-embed"
        data-dundas-bi-url="https://placeholder.dundas-bi-url.com/"
        data-controller-type="Dashboard"
        data-file-system-id="727ae6b6-b5b6-4c1e-bad7-72561040298d"
        data-logon-token-id="13ECB6B5-8324-473B-BCA5-6D18E2DC3988"
        data-parametervalue-1="viewParameter2=$Today$"
        data-parametervalue-2="viewParameter4=2500~3700"
        data-urlparameteroption-1="cultureName=fr-FR">
    </div>
</body>


    

2.1. Logging on

There are a few options to choose from for how your users will be logged onto Dundas BI:

  • Single Sign-On - To allow your users to be logged into Dundas BI automatically, use one of the various options described in the article Single sign-on (SSO).
  • Server-side code - A logon token or session token can be specified in the HTML as shown in the example markup above by code that runs at the server to retrieve it for each user that logs on. See the Dundas BI viewer integration sample web application for an example, and the section about embedding in the article Single sign-on (SSO) for more information.
  • Manual log on - If a single sign-on option is not used and a valid logon or session token is not specified, users will be prompted to log on before they can navigate to the specified dashboard or file.

3. Embedding with JavaScript

Using the embed library with JavaScript provides similar options compared to the above, but you can gain more control of the embedded application. For example:

  • Set view parameters from JavaScript
  • Load different Dundas BI pages or refresh them
  • Monitor the embedded Dundas BI client application's events
  • Run JavaScript within the embedded Dundas BI client application and get messages sent back (if enabled)

Some of these functions may require setting up cross-origin resource sharing (CORS) for your site in Dundas BI to authorize it, as described in the section below.

3.1. Getting a logon token

When not using one of the other automatic logon options described in the article Single sign-on (SSO), it is common to use logon tokens or session tokens to log users on automatically based on their existing session in the application that is embedding Dundas BI.

Important
When getting a logon or session token, it is normally best practice to do it at the server. Specifying hard-coded credentials within the client-side script itself makes these credentials available to users viewing the page script. Examples for server-side code are described in the next paragraph.

The following example gets a logon token for use with a Dundas BI embedded application at the client using specified credentials for demonstration purposes only. For an example of how to use server-side code to get a logon token securely and use it with the embed library, see the Dundas BI viewer integration sample web application and the examples provided for POST /LogOn/Token in the REST API. For more information and links regarding logon and session tokens, see Single sign-on (SSO).

...
<head>
    <script src="/js/dundas.embed.min.js" type="text/javascript" ></script>
</head>
...

<body>
    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", function (event) {

    // *****************************************************************************
    // It is usually best practice to get the logon token at the server.  
    // Credentials should not be specified directly in script unless they should be
    // freely available to users.
    // *****************************************************************************

    dundas.embed.logon.getLogonToken(
        'https://placeholder.dundas-bi-url.com/',
        {
            "accountName": "viewer",
            "password": "1234",
            "isWindowsLogOn": true 
        },
        function(getLogOnTokenResultData)
        {
            alert(getLogOnTokenResultData.logOnToken);
        }
    );
});

    </script>
</body>
    

Note
In version 4.0.2 and above, when getting a logon token to a site using HTTPS, the xmlHttpRequest adds the withCredentials flag with a true value. This was done to ensure the origin header is sent. In version 5 and above, we have added the property dundas.embed.logon.disableWithCredentialsFlag. When set to true, it will not send the withCredentials property when getting the logon token.

3.2. Creating an embedded application object

The embedded application object is used to control the Dundas BI embedded application. Create one by calling the following method, passing a container HTML element for the application (such as a div element):

dundas.embed.create(domElement, embedOptions)

The embedOptions argument is optional and allows you to set any desired properties while creating the object instead of setting those properties on it later.

The example below shows how to create and load the Dundas BI embedded application object.

...
<head>
    <script src="/js/dundas.embed.min.js" type="text/javascript" ></script>
</head>
...
<body>

    <!-- Create the container for the Dundas BI embedded application -->
    <div id="dundasBI2" />

    <script type="text/javascript">

        var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';
        
        document.addEventListener("DOMContentLoaded", function (event) {

            var embedOptions = {
                dundasBIUrl: dundasBIUrl,
                controllerType: dundas.embed.ControllerType.DASHBOARD,
                fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c',
                viewOptions: dundas.embed.ViewOptions.TOOLBAR_ONLY,
                parameterValues: []
            };
 
            // Create the Dundas embedded application object.
            var dundasApp = dundas.embed.create(
                document.getElementById('dundasBI2'),
                embedOptions
            );

            // Load the application
            dundasApp.load();
        });

    </script>
</body>
    

3.3. Using the embedded application

After creating the embedded application object as shown above, you can access the following properties and methods on it.

3.3.1. Properties

 NameDescription
JsProperty controllerType

Gets or sets the controller type to load, which matches the portion of a Dundas BI URL following the base URL.

Type: dundas.embed.ControllerType or String (can be null). Predefined values include:

dundas.embed.ControllerType.DASHBOARD 
dundas.embed.ControllerType.REPORT
dundas.embed.ControllerType.SCORECARD
dundas.embed.ControllerType.SHORTLINK
dundas.embed.ControllerType.SLIDESHOW
dundas.embed.ControllerType.SMALL_MULTIPLE
dundas.embed.ControllerType.METRIC_SET
dundas.embed.ControllerType.DATA_CUBE
dundas.embed.ControllerType.CUBE_PERSPECTIVE
dundas.embed.ControllerType.HIERARCHY
dundas.embed.ControllerType.ADMIN
dundas.embed.ControllerType.HOME
JsProperty dundasBIUrl Gets or sets the Dundas BI URL to connect to. For example, https://dbi.example.com:8000/
Type: String
JsProperty fileSystemId Gets or sets the file system entry ID of an existing file such as a dashboard, metric set, etc., if controllerType is set to one of those file types. This can also be unset (null) to create a new file of that type.

Type: String (can be null)
JsProperty id Gets the ID for the Dundas embedded application.
Type: String
JsProperty logonTokenId Gets or sets the logon token ID.
Type: String (can be null)
JsProperty sessionToken Gets or sets the session token.
Type: String (can be null)
JsProperty otherUrlParameterOptions Gets or sets other URL parameter options. E.g., [new dundas.embed.UrlParameterOption("cultureName", "fr-FR")], or [new dundas.embed.UrlParameterOption("e", "true")] to open a dashboard in edit mode.

Type: Array (can be null), ElementType: dundas.embed.UrlParameterOption - construction: new dundas.embed.UrlParameterOption(name, value)
JsProperty parameterValues Gets or sets the parameter values to pass to a view such as a dashboard. The values are in a similar format as when passed via query string. E.g., [new dundas.embed.ParameterValue("viewParameter2", "$Today$")

Type: Array (can be null), ElementType: dundas.embed.ParameterValue - construction: new dundas.embed.ParameterValue(name, value)
JsProperty shortLink Gets or sets the short link value following the /Link/?shortLink= portion of the link (e.g., ae6swdok5p5r3mm3m4oaguqujo) if controllerType is SHORTLINK, for example when using a shared link.

Type: String (can be null)
JsProperty viewOptions Gets or sets the view options when displaying a view such as a dashboard. If unset (null), the view options from a shortlink (if applicable) or the default will be used.

Type: dundas.embed.ViewOptions or String (can be null). Possible values:
dundas.embed.ViewOptions.MENU_ONLY
dundas.embed.ViewOptions.MENU_TOOLBAR
dundas.embed.ViewOptions.MENU_TOOLBAR_TASKBAR
dundas.embed.ViewOptions.NONE
dundas.embed.ViewOptions.TOOLBAR_ONLY
dundas.embed.ViewOptions.VIEW_ONLY

Example

This sample creates a Dundas embedded application, sets some properties, and loads it:

<head>
    <script src="/js/dundas.embed.min.js" type="text/javascript" ></script>
</head>
...
<body>
    <div id="dundasBI2">
    </div>

    <script type="text/javascript">

        var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

        document.addEventListener("DOMContentLoaded", function (event) {

            // *****************************************************************************
            // It is usually best practice to get the logon token at the server.  
            // Credentials should not be specified directly in script unless they should be
            // freely available to users.
            // *****************************************************************************
            dundas.embed.logon.getLogonToken(
                dundasBIUrl,
                {
                    "accountName": "viewer",
                    "password": "1234",
                    "isWindowsLogOn": true 
                },
                function(getLogOnTokenResultData)
                {
                    var dundasApp = dundas.embed.create(
                        document.getElementById('dundasBI2'),
                        { }
                    );

                    dundasApp.dundasBIUrl = dundasBIUrl;
                    dundasApp.controllerType = dundas.embed.ControllerType.DASHBOARD;
                    dundasApp.fileSystemId = 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c';
                    dundasApp.viewOptions = dundas.embed.ViewOptions.TOOLBAR_ONLY;
                    dundasApp.logonTokenId = getLogOnTokenResultData.logOnToken;
                    dundasApp.parameterValues = [ 
                        new dundas.embed.ParameterValue(
                            "viewParameter2", 
                            "!" + 25000 + "~" + dundas.embed.tokens.basic.OPEN_RANGE
                        )
                    ];
                    dundasApp.otherUrlParameterOptions = [
                        new dundas.embed.UrlParameterOption(
                           "cultureName",
                           "fr-FR"
                        )
                    ];
                    dundasApp.load();
                }
            )
        });

    </script>
</body>
    

3.3.2. Methods

 NameDescriptionExample
JsFunction load Loads the Dundas BI embedded application frame according to the properties that have been set.
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

var embedOptions = {
    dundasBIUrl: dundasBIUrl,
    controllerType: dundas.embed.ControllerType.DASHBOARD,
    fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'
};

// Create the Dundas embedded application object.
var dundasApp = dundas.embed.create(
    document.getElementById('dundasBI2'),
    embedOptions
);

// * Load the application *
dundasApp.load();
                
JsFunction loadAndCreateShortLink Creates a shortlink that includes the current parameterValues property setting and uses this link to load the Dundas BI embedded application frame rather than specifying values directly in the query string. CORS is required to call this method.

Parameters: options (properties: logOnTokenId, sessionTokendeleteOtherSessions)

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

var logonToken1 = '1fb29869-b276-41ab-9cbd-098d17b675b4';
var logonToken2 = 'cb316db8-5b6d-488f-8c31-fa20c8d66524';

var embedOptions = {
    dundasBIUrl: dundasBIUrl,
    controllerType: dundas.embed.ControllerType.DASHBOARD,
    fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c',
    logonTokenId: logonToken1
};

// Create the Dundas embedded application object.
var dundasApp = dundas.embed.create(
    document.getElementById('dundasBI2'),
    embedOptions
);

var logOnOptions = {
    logOnTokenId: logonToken2,
    deleteOtherSessions: true 
};

// * Load the application *
dundasApp.loadAndCreateShortLink(logOnOptions);
                
loaded

Handles when the Dundas BI embedded application is first loaded.

Parameters: loadedFunction (Function)

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

var embedOptions = {
    dundasBIUrl: dundasBIUrl,
    controllerType: dundas.embed.ControllerType.DASHBOARD,
    fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'
};
// Create the Dundas embedded application object.
var dundasApp = dundas.embed.create(
    document.getElementById('dundasBI2'),
    embedOptions
);

// * Pass a function to the loaded function *
dundasApp.loaded(function() { alert('Dashboard is Loaded'); });

// Load the application
dundasApp.load();
                
ready Handles when the Dundas BI embedded application is ready after page load. CORS is required to call this method.

Parameters: readyFunction (Function)

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

var embedOptions = {
    dundasBIUrl: dundasBIUrl,
    controllerType: dundas.embed.ControllerType.DASHBOARD,
    fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'
};
// Create the Dundas embedded application object.
var dundasApp = dundas.embed.create(
    document.getElementById('dundasBI2'),
    embedOptions
);
// * Pass a function to the ready function *
dundasApp.ready(function() { alert('Dashboard is Ready'); });
// Load the application
dundasApp.load();
                
refresh Refreshes the Dundas BI embedded application content.
var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

var embedOptions = {
    dundasBIUrl: dundasBIUrl,
    controllerType: dundas.embed.ControllerType.DASHBOARD,
    fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'
};
// Create the Dundas embedded application object.
var dundasApp = dundas.embed.create(
    document.getElementById('dundasBI2'),
    embedOptions
);

// * Refresh the Dundas BI embedded application *
dundasApp.refresh(); 
                
runScript Runs JavaScript within the Dundas BI embedded application in the browser. CORS is required to call this method.

Parameters: script (String), isASync (Boolean, optional)messageReceivedFunction (Function, optional)

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

var embedOptions = {
    dundasBIUrl: dundasBIUrl,
    controllerType: dundas.embed.ControllerType.DASHBOARD,
    fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c'
};
// Create the Dundas embedded application object.
var dundasApp = dundas.embed.create(
    document.getElementById('dundasBI2'),
    embedOptions
);

dundasApp.ready(function (e) {
    // * Pop up a hello ready dialog.              
    dundasApp.runScript(
        "var viewService = " +
        "    dundas.context.getService('ViewService'); " +
        "viewService.showSignal(" +
            "'Ready'," + 
            "dundas.view.NotifyType.INFO," +
            "'Hello Ready'" + 
        ");"
    );
        
    // * Run script and send message back, 
    // and handle it with function that accepts message.
    dundasApp.runScript(
        "dundas.embed.sendMessageToDundasEmbeddedApplication(" +
            "dundas.context.currentSessionId" + 
        ");",
        false,
        function (message) { alert(message.detail); }
    );
});
                

3.3.3. Cross-origin resource sharing (CORS)

CORS must be enabled for your site through Dundas BI's configuration settings if you want to perform certain embed library functions as indicated above from your own JavaScript on a page that is using the Dundas BI embed library. These include listening for Dundas BI's client-side ready event or passing JavaScript to run within Dundas BI in the browser from your own page, as listed in the table above. This should be set up even if both your page's URL and Dundas BI's URL have the same origin (protocol, hostname/domain, and port number) if you want to use the embed library's methods. CORS also authorizes your page to make REST calls to the Dundas BI server from the browser as described in Using cross-origin resource sharing in Dundas BI.

Important
Browser support for embedding HTTP cross-domain content is changing, and Dundas BI should now either run on HTTPS or have the same URL origin (protocol, hostname/domain, and port number) as the parent application. For details and other considerations, see the browser and embedding product notes.

While logged in as an administrator, access the Administration area from the main menu on the left.

Expand Setup and select Config to access the configuration settings. Ensure the option to show Advanced Settings is selected, then select and edit the setting CORS (Cross-Domain) Origins, located in the Web Application category.

Configuring CORS
Configuring CORS

Select Edit value, enter the URL origin of the page that will be embedding Dundas, for example https://example.com or http://hostname:8000, then click to Save at the bottom of the dialog. You can also follow the instructions in the dialog for adding multiple domains.

Note
Do not include a slash at the end or any part of the path when setting an origin.

This lets Dundas BI know that the origin/domain you specify is yours and is authorized to access the Dundas BI REST API in the browser from that origin if different than Dundas BI's, or for your page's JavaScript from any origin (even if the same as Dundas BI) to pass JavaScript to run in the Dundas BI embedded client application or monitor for when its page is ready. Any other site not listed or included is prevented by browsers and by Dundas BI from performing these functions.

3.3.4. Working with view parameters

View Parameters in the Dundas BI embed library are defined the same way they would be defined via the query string. The following example sets a view parameter to a value and then loads the Dundas embedded application.

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';

document.addEventListener("DOMContentLoaded", function (event) {

    // *****************************************************************************
    // It is usually best practice to get the logon token at the server.  
    // Credentials should not be specified directly in script unless they should be
    // freely available to users.
    // *****************************************************************************
    dundas.embed.logon.getLogonToken(
        dundasBIUrl,
        {
            "accountName": "viewer",
            "password": "1234",
            "isWindowsLogOn": true 
        },
        function(getLogOnTokenResultData) {
            var dundasApp = dundas.embed.create(
            document.getElementById('dundasBI2'),
            {
                dundasBIUrl: dundasBIUrl,
                controllerType: dundas.embed.ControllerType.DASHBOARD,
                fileSystemId: 'f22ce55f-04cd-4207-9dd7-2cadeb44b96c',
                logonTokenId: getLogOnTokenResultData.logOnToken
            });
            
            dundasApp.parameterValues = [
                // The object is created by passing the name, 
                // and then the value formatted in the same way 
                // that would be defined via the query string
                new dundas.embed.ParameterValue(
                    // The name of the view parameter
                    "viewParameter2", 
                    // The value formatted to be passed in the 
                    // same way as if was passed via query string.
                    "!" + 25000 + "~" + dundas.embed.tokens.basic.OPEN_RANGE
                )
            ];

            dundasApp.load();
        }
    );
});
    

Note
For more information, visit: Pass parameter values via query string.

For convenience purposes, token helpers have been added that can be used in the values of the ParameterValue object.

Basic

dundas.embed.tokens.basic.ALL
dundas.embed.tokens.basic.DEFAULT
dundas.embed.tokens.basic.NO_SELECTION
dundas.embed.tokens.basic.NULL
dundas.embed.tokens.basic.OPEN_RANGE

SingleDate

dundas.embed.tokens.SingleDate.BEGINNING_OF_CURRENT_DAY
dundas.embed.tokens.SingleDate.BEGINNING_OF_CURRENT_MONTH
dundas.embed.tokens.SingleDate.BEGINNING_OF_CURRENT_QUARTER
dundas.embed.tokens.SingleDate.BEGINNING_OF_CURRENT_WEEK
dundas.embed.tokens.SingleDate.BEGINNING_OF_CURRENT_YEAR
dundas.embed.tokens.SingleDate.END_OF_CURRENT_YEAR

DateRange

dundas.embed.tokens.DateRange.CURRENT_DAY
dundas.embed.tokens.DateRange.CURRENT_MONTH
dundas.embed.tokens.DateRange.CURRENT_QUARTER
dundas.embed.tokens.DateRange.CURRENT_WEEK
dundas.embed.tokens.DateRange.CURRENT_YEAR
dundas.embed.tokens.DateRange.MONTH_TO_DATE
dundas.embed.tokens.DateRange.PREVIOUS_DAY
dundas.embed.tokens.DateRange.PREVIOUS_MONTH
dundas.embed.tokens.DateRange.PREVIOUS_QUARTER
dundas.embed.tokens.DateRange.PREVIOUS_WEEK
dundas.embed.tokens.DateRange.PREVIOUS_YEAR
dundas.embed.tokens.DateRange.QUARTER_TO_DATE
dundas.embed.tokens.DateRange.TODAY
dundas.embed.tokens.DateRange.YEAR_TO_DATE

3.3.5. URL path length restrictions

If the URL query generates more than 2,083 characters (for example because of view parameters), an error will occur. To work around these browser limitations, you should create a short link, and then load the Dundas BI application. The following example uses two logon tokens to create a short link and load the Dundas BI embedded application:

var dundasBIUrl = 'https://placeholder.dundas-bi-url.com/';
 
document.addEventListener("DOMContentLoaded", function (event) {

    // *****************************************************************************
    // It is usually best practice to get the logon token at the server.  
    // Credentials should not be specified directly in script unless they should be
    // freely available to users.
    // *****************************************************************************
    var logOnTokenOptions = { "accountName": "viewer", "password": "1234", "isWindowsLogOn": false };

    // Gets two logon tokens: one to generate the shortlink, and one that then
    // loads using the shortlink.
    dundas.embed.logon.getLogonToken(
        dundasBIUrl,
        logOnTokenOptions,
        function (logonTokenResultData1) {

            dundas.embed.logon.getLogonToken(
                dundasBIUrl,
                logOnTokenOptions,
                function (logonTokenResultData2) {

                    var dundasApp = dundas.embed.create(document.getElementById('dundasBI2'));
                    dundasApp.logonTokenId = logonTokenResultData1.logOnToken;
                    dundasApp.dundasBIUrl = dundasBIUrl;
                    dundasApp.controllerType = dundas.embed.ControllerType.DASHBOARD;
                    dundasApp.fileSystemId = '460ebfa5-116a-489b-9440-87e1c18ef957';
                    dundasApp.parameterValues = [
                        new dundas.embed.ParameterValue(
                            "viewParameter2",
                            "!" + 25000 + "~" + dundas.embed.tokens.basic.OPEN_RANGE
                        )
                    ];

                    var logOnOptions = { 
                        'logOnTokenId': logonTokenResultData2.logOnToken, 
                        'deleteOtherSessions': true 
                    };

                    dundasApp.loadAndCreateShortLink(logOnOptions);
                }
            );
        }
    );
});

4. Hosted Dundas embed library file

You can also download or refer to the Dundas embed library on dundas.com with a URL like the one in the following HTML:

<head>
    <script src="//www.dundas.com/files/dbi/dundas.embed.js/10.0.0.1000/dundas.embed.min.js" 
        type="text/javascript">
   </script>
</head>

Note
Speed and uptime are not guaranteed. It is recommended that you place the Dundas embed library on your own CDN.

5. See also

Dundas Data Visualization, Inc.
400-15 Gervais Drive
Toronto, ON, Canada
M3C 1Y8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri