Embedding a dashboard in a web page
- iFrame integration method
- Embedded JavaScript integration mode
- Available parameters
- Integrating dashboard pages
- Related pages...
In this documentation, we are working within the following context:
- Server name: ddsrv
- Port: 8080
- DigDash domain: ddenterpriseapi
- DigDash dashboard domain: digdash_dashboard
You will, of course, need to adapt the integration to your own environment.
iFrame integration method
You can embed a dashboard (with one or more pages) in an iframe using a URL in the following format:
It is possible to pass parameters in this URL, which will be read by the application to authenticate and customise the content displayed.
These parameters are added as a query string at the end of the URL, after a question mark
.
Each parameter is a key=value pair, and the different pairs are separated by an ampersand (&).
See the section Available parameters for a full list of parameters.
For example, to display the dashboard with:
- the username "user1" and the password "pass1",
- the banner hidden,
- the filter bar hidden,
- the variable var set to 1,
we embed the code in an iFrame tag as follows:
Embedded JavaScript integration mode
This method requires you to load the JavaScript file that enables a DigDash dashboard to be displayed on a web page. To do this, add the following line of code to the <head> section of your web page:
You can embed a DigDash dashboard either in HTML using dedicated tags, or via JavaScript for a more dynamic configuration.
HTML integration
A custom <dd-dashboard /> tag allows you to embed a dashboard directly into the HTML code, without writing any JavaScript.
To embed the dashboard, use the code in the following format at the desired location on the web page:
In this mode, the parameters are passed directly as attributes of the tag.
For example, to display the dashboard:
- on the default “Overview” page,
- filtered by the year 2025 (Date hierarchy),
- with the username “user1” and the password “pass1”,
we use the following code:
JavaScript integration
To integrate a dashboard using JavaScript:
- Add a<div> tag with a unique identifier at the desired location on the web page: this tag will act as a container for displaying the DigDash dashboard.
For example:
- Add the JavaScript script to initialise and display the dashboard.
To do this, within a <script> tag, add the following code:
DigDash.drawDashboard("mydashboard");
- TheDigDash.init() method allows you to initialise the dashboard by specifying the DigDash server URL and the parameters .
- The DigDash.drawDashboard() method displays the dashboard within the container defined previously.
For example, to display the dashboard:
- on the default “Overview” page,
- filtered by the year 2025 (Date hierarchy),
- with the username “user1” and the password “pass1”,
we use the following script:
function draw(){
DigDash.init({
"url": "http//ddsrv:8080/digdash_dashboard",
"defaultPage": "Telecom_homepage", // page displayed by default
"Date": "2025", // filter on Date dimension
"Hdate": "Date", // used hierarchy
"LDate": "Year", // level in the hierarchy
"user": "user1", // identifier
"pass": "pass1" // password
});
DigDash.drawDashboard("dashboard");
}
Available parameters
💡 You can also use a server-side authentication mechanism to avoid using the user/pass parameters. See the page URL anonymisation for further details.
In this case, theauthToken parameter replaces the pass parameter.
The parameters available for dashboards are as follows:
| Parameter | Value | Description |
|---|---|---|
| user | user | User to be authenticated |
| pass | password | Password for the unauthenticated user |
| authToken | token | Token for the unauthenticated user |
| server* | server URL | DigDash Enterprise domain URL (for example: http://localhost:8080) |
| domain* | domainname | DigDash Enterprise domain name (e.g. ddenterpriseapi) |
defaultPage | pageId | The ID of the page the user wishes to display by default instead of the first page. This ID is visible in the Dashboard Editor in the page’s context menu (displayed by right-clicking on the page tab title). Two identifiers are displayed: one is unique and cannot be modified (uid), whilst the other is ‘calculated’ based on the role name and the page name (as both of these elements can be modified, the identifier may change and the parameter may no longer be effective). |
| hideBanner | true|false | Hides (true) or displays (false) the title bar |
| hideFilters | true|false | Hides (true) or displays (false) the filter bar |
| navigationMode | tabs|vertical|nomenu | Specifies the navigation menu mode:
This setting takes precedence over all other navigation menu settings and also applies to mobile mode. |
| hideNavigationMenu | true|false | Deprecated setting If set to true, displays the navigation menu in Tab mode when the menu is in Vertical mode. |
useHistory | true|false | Disables (false) the navigation history. The navigation menu in the history at the top right is no longer visible. |
| variableName | variableValue | Specifies the value of the variable variableName |
dimensionName If the dimension contains one or more hierarchies, you can select the desired hierarchy and level by adding:
| filterValue yyyy Hierarchy Name Hierarchy Level | Specifies the filtered dimension member zzzzzzz Specifies the name of the hierarchy |
*Parameters that can be entered in the login box in advanced mode when these parameters are not specified in the digdash.properties file. In most cases, these settings have already been configured by the administrator.
Integrating dashboard pages
Similarly, you can embed a single page or all pages from a dashboard associated with a role or user: add the ‘page’ parameter and specify the page name.
The parameters available for dashboard pages are as follows:
| Parameter | Value | Description |
|---|---|---|
page | pageId | The ID of the page that the user wishes to display by default instead of the first page. This ID is visible in the Dashboard Editor in the page’s context menu (displayed by right-clicking on the page tab title). Two identifiers are displayed: one is unique and cannot be modified (uid), whilst the other is ‘calculated’ based on the role name and the page (as both of these elements can be modified, the identifier may change and the setting may no longer be effective). |
| user | user | User to be authenticated |
| pass | password | Password for the unauthenticated user |
| authToken | token | Token for the unauthenticated user |
| server | server URL | DigDash Enterprise domain URL (e.g. http://localhost:8080) |
| domain | domainname | DigDash Enterprise domain name (e.g. ddenterpriseapi) |
| hideBanner | true|false | Hides (true) or displays (false) the title bar |
| hideFilters | true|false | Hides (true) or displays (false) the filter bar |
| variableName | variableValue | Specifies the value of the variable variableName |
dimensionName If the dimension contains one or more hierarchies, you can select the desired hierarchy and level by adding:
| filterValue yyyy Hierarchy Name Hierarchy Level | Specifies the filtered dimension member zzzzzzz Specifies the name of the hierarchy |