Embedding a portlet (graphic or other element) in a web page
- iFrame integration mode
- Embedded JavaScript integration mode
- HTML integration
- JavaScript integration
- Available parameters
- Parameters common to all elements (portlets)
- Graphics-specific parameters (flows)
- Content-specific settings Filtered items
- Content-specific parameters Search
- Content-specific settings Caption
- Content-specific parameters Comments
- Content-specific settings: Documents
- Content-specific parameters Measure selector
- Filter-specific parameters Dimension
- Filter-specific parameters Measure
- Filter-specific parameters Variable
- 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.
💡 You can also use a server-side authentication mechanism to avoid having to use a username and password. See the page URL anonymisation for further details.
In this case, the authToken parameter replaces the pass parameter.
iFrame integration mode
You can embed a chart (Flow) from your information portfolio into an iframe using a URL in the following format:
You can easily obtain the URL for a flow from the flow management panel in Studio. To do this, right-click on the flow and select ‘Copy flow URL’.
For example:
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 list of parameters.
For example, to display the graph using:
- username15455f95
- the username ‘user1’ and the password ‘pass1’
- the filter bar disabled
we embed the code in the iFrame tag as follows:
Available parameters
The parameters available for charts (flows) are as follows:
| Parameter | Value | Description |
|---|---|---|
flowId | flowId | ID of the flow to be displayed |
| user | user | User to authenticate |
| pass | password | Password for the unauthenticated user |
| authToken | token | Token for the unauthenticated user |
| 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 |
Embedded JavaScript integration mode
This mode 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-portlet/> tag allows you to embed a chart (Flow) or other embeddable element directly into the HTML code, without writing any JavaScript. This method is useful for simple pages or where JavaScript is not permitted.
Chart (flow)
To embed a chart, use the code in the following format at the desired location on the web page:
In this mode, the parameters are passed directly as tag attributes. See the section Available parameters for the full list.
For example, to display a graph with:
- ID15455f95
- the header hidden
- key facts disabled
we use the following code:
If we incorporate authentication:
Other elements (filters, captions, etc.)
Using the same principle, it is possible to integrate other types of elements (portlets): filters, legends, comments, measure selectors, variables, search and filtered elements.
To do this, use the following general syntax:
// parameterID for the other parameters according to the type
See the section Available parameters for the full list.
For example, for a ‘Dimension’ filter-type content:
// dim : Dimension name
// datasource : Datasource name
// viztype: Vizualization type: here, horizontal list
// showsearch : Display search box
// showborder : Display border
JavaScript integration
Chart (flow)
To embed a chart 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 chart.
For example:
- Add the JavaScript script to initialise and display the chart.
To do this, within a <script> tag, add the following code:
"url":"http://ddsrv:8080/digdash_dashboard",
"user": "user",
"pass": "pass"
});
DigDash.drawPortlet("divId",{
"type": "flow",
"flowId": "flowId"
});
- TheDigDash.init() method allows you to initialise the dashboard by specifying the DigDash server URL and the authentication parameters.
- The DigDash.drawPortlet()method displays the element (portlet) with the specified parameters in the container defined previously. See the section Available Parameters for the full list.
For example, to display a chart (divId = columnflow), we use the following script:
function draw() {
// Initializing connection to DigDash server
DigDash.init({
"url": "https://ddsrv:8080/digdash_dashboard/",
"user": "user",
"pass": "pass"
});
//Displaying column chart
DigDash.drawPortlet("columnflow", {
"type": "flow",
"flowId": "22a0cc0d",
"showborder": false,
"showheader": false
});
}
Other elements (filters, legends, etc.)
Using the same principle, it is possible to integrate other types of elements (portlets): filters, legends, comments, measure selectors, variables, search and filtered elements.
To do this, use the following general syntax:
type: "portletType",
// otther parameters according to portlet type
});
See the section Available parameters for the full list.
For example, to display a chart (div id = columnflow) and the associated legend (div id = legend), we use the following script:
function draw() {
// Initializing connection to DigDash server
DigDash.init({
"url": "https://ddsrv:8080/digdash_dashboard/",
"user": "user",
"pass": "pass"
});
// Displaying column chart
DigDash.drawPortlet("columnflow", {
"type": "flow",
"flowId": "22a0cc0d",
"showborder": false,
"showheader": false
});
// Legend associated to the column chart
DigDash.drawPortlet("legend", {
"type": "legend",
"flow": "22a0cc0d",
"showborder": false,
"showheader": true,
"layout": "horizontal"
});
}
Available parameters
Parameters common to all elements (portlets)
These parameters are available for both charts and other elements.
| Parameter | Value | Default value | Dependency | Description |
| type | "flow" | None | parameter required | Portlet type:
|
| subtype | flow_datamodelwrapper.xml | None | Used to define a subtype for flows | |
| name | String | None | Name of the portlet to be displayed in the header | |
| colour | Hexadecimal value | None | Portlet background colour | |
| image | Path to the image | None | Portlet background image | |
| showborder | Boolean | "true" | Displays a border around the portlet | |
| showheader | Boolean | "true" | Displays a header above the portlet | |
| maximise | Boolean | "false" | Allows the portlet to be maximised in the Dashboard | |
| cssstyle | CSS class | none | Allows you to apply CSS to this portlet | |
| css | Content of the CSS class | none | The CSS style ` ` must exist | Contents of the CSS class |
| description | String | none | Allows context-sensitive help to be displayed via an icon on the portlet |
Graphics-specific parameters (flows)
| Parameter | Value | Default value | Dependency | Description |
| highlightdata | Boolean | "true" | Show highlights | |
| flowdetail | "auto" or flowid | "false" | Show flow details | |
| displaycommenticon | Boolean | "false" | Show an icon when a comment is present | |
| displaylegendicon | Boolean | "false" | Display an icon that shows the legend when clicked | |
| layoutlegend | "horizontal" or "vertical" | "vertical" | displaylegendicon must be set to true | Legend display type: horizontal or vertical |
| displayaxisnamelegend | Boolean | "false" | displaylegendicon must be set to true | Show the axis title |
| menu | Boolean | "true" | Show the button to open the menu | |
| exportCSV | Boolean | "true" | The menu must be set to true | Enable CSV export from the menu |
| exportPDF | Boolean | "true" | menu must be set to true | Enable PDF export from the menu |
| exportPPT | Boolean | "true" | menu must be set to true | Enable PPT export from the menu |
| exportXLS | Boolean | "true" | menu must be set to true | Enable Excel export from the menu |
| exportXLSWithoutStyles | Boolean | "true" | menu must be set to true | Enable Fast Excel export from the menu |
| menuinfo | Boolean | "true" | menu must be set to true | Enable the display of information from the menu |
Content-specific settings Filtered items
| Parameter | Value | Default value | Description |
| displaydimension | Boolean | "false" | Display the dimension name |
| displayhierarchy | Boolean | "false" | Show the hierarchy name |
| displaylevel | Boolean | "false" | Display the level name |
Content-specific parameters Search
| Parameter | Value | Default value | Dependency | Description |
| flows | A comma-separated list of flow identifiers | None | The flows (charts) must exist on the page | Allows you to display only members of the Flow dimensions with the specified ID |
| label | Text | None | Allows you to change the label ‘Search’ |
Content-specific settings Caption
| Setting | Value | Default value | Dependency | Description |
| displayaxisname | Boolean | "true" | Display the axis title | |
| layout | "horizontal" or "vertical" | "vertical" | Legend display type: vertical or horizontal | |
| flow | flowid | None | The context of the legend will be determined by this Flow | |
| hideelement | "true" | None | selectelement must not be defined | Displays an icon that allows the element to be hidden on click |
| selectelement | "true" | None | hidelement must not be defined | Displays an icon that allows the element to be selected on click |
| sorttype | 0 or 1 | None | sortreverse must be set | 0 = Alphabetical sort, 1 = Numerical sort |
| sortreverse | boolean | None | sorttype must be defined | Sort in ascending or descending order |
Content-specific parameters Comments
| Parameter | Value | Default value | Dependency | Description |
| datamodels | A comma-separated list of data model identifiers | None | The data models must exist on the page | Show only comments on data models with the specified identifier |
| flows | Comma-separated list of flow identifiers | None | The flows (charts) must exist on the page | Show only comments on flows (graphs) with the specified ID |
| displaytype | "displaytypelist" or "displaytypetext" | None | Comment display type: List or Text | |
| filtertype | "all" or "lastdays" or "lastcomments" | "all" | must have a "filter" parameter | Comment filtering option: All, last X days or last X comments |
| filter | Numeric | None | filtertype must be different from "all" | Comment filtering settings: X number of days or comments |
| displayallcomments | Boolean | "false" | Show all comments |
Content-specific settings: Documents
| Parameter | Value | Default value | Dependency | Description |
| searchbox | Boolean | "true" | Show search field | |
| server | Server ID | None | parameter required | ID or name of the document server to query |
Content-specific parameters Measure selector
| Parameter | Value | Default value | Dependency | Description |
| flows | A comma-separated list of flow identifiers | None | parameter required | Flows (charts) on which to base the metric selector |
| viztype | "list", "combo" or "checkbox" | "list" | Visualisation type of the metric selector: List, Drop-down list or Checkboxes | |
| vizlayout | "vertical" or "horizontal" | "vertical" | No effect in the case of a drop-down list (combo box) | Display type: Vertical or not |
| multiselect | Boolean | "true" | Allow multiple selection |
Filter-specific parameters Dimension
| Parameter | Value | Default value | Dependency | Description |
| dim | Dimension name | None | parameter required | Dimension name |
| datasource | Data model identifier | None | parameter required | Data model identifier |
| viztype | "SlicerOneByOne" "Slicer" "SlicerHorizontal" "SlicerCombo" "SlicerSlider" "SlicerDatePicker" "SlicerCheckBox" "SlicerComboRange" "SlicerTree" "SlicerMatch" | SlicerCheckBox | Required parameter. Available types depend on the nature of the dimension | Filter display type:
|
| Flows | List of flow identifiers separated by commas | The flows (charts) must exist on the page | Chart(s) to which the filter will be applied | |
| hierarchy | Name of the hierarchy | None | The dimension must be hierarchical | Filter by hierarchy |
| level | Level name | None | The dimension must be hierarchical | Filter by level |
| dimlabel | ${dimension}, ${hierarchy} or ${level}, can be used together, separated by '/' | ${dimension} | The dimension must be hierarchical ${hierarchy} or ${level} | Change the display of the dimension name |
| authorizereversefilter | Boolean | "false" | Allow exclusion of members | |
| multiselect | Boolean | "true" | Enable multiple selection when selecting an item | |
| forbidmultiselect | "false" | "muliselect" must be set to false | Disable multiple selection | |
| filteronsinglemember | Boolean | "false" | Filter on a single element | |
| authorisechange level | Boolean | "false" | On a hierarchical dimension | Allow level change |
| showsearch | Boolean | "true" | On a continuous dimension | Show the search box |
| forbidemptyselection | Boolean | Prohibit empty selection | ||
| hidempty | Boolean | Hide empty values | ||
| range | Boolean | "false" | On a continuous dimension | Allows you to filter all values within a range |
| min | min | None | range must be set to true | The minimum of the range |
| max | max | None | range must be set to true | The maximum of the interval |
| filter | "first" "last" | None | Filter by the first or last element | |
| sorttype | 0 or 1 | None | sortreverse must be specified | 0 = Alphabetical sort, 1 = Numerical sort |
| sortreverse | Boolean | None | sorttype must be defined | Sort in ascending or descending order |
Filter-specific parameters Measure
| Parameter | Value | Default value | Dependency | Description |
| measurename | Measure name | None | parameter required | Name of the measure to filter |
| flows | List of flow identifiers separated by commas | None | parameter required | Flows (charts) affected by this filter |
| hidemeasurename | Boolean | "false" | Hide the measure name |
Filter-specific parameters Variable
| Parameter | Value | Default value | Dependency | Description |
| varname | Variable name | None | parameter required | Name of the variable to be filtered |
| viztype | "slider" | "combo", "slider" or "textfield" depending on the variable’s settings | horizontallist and verticallist are only available for variables with explicit values | Variable display type:
|
| hidevarname | boolean | "false" | Hide the variable name |