Embedded Dashboard Properties and Objects
This applies to: Visual Data Discovery
Properties can be passed as parameters to the createComponent method when embedding Symphony dashboards.
Here is a sample embedding "componentInstanceId":"<id>":
embedManager.createComponent('dashboard',
const componentConfig = {
"
dashboardId": "<dashboard-ID>",
"
componentInstanceId":"<component-instance-ID>",
}
);
The following table describes available options for these properties and objects.
"dashboardId":"<dashboard-ID>"
|
none |
The dashboard ID. If no dashboard ID is specified, an empty dashboard is embedded.
Type: string
|
"componentInstanceId":"<component-instance-ID>"
|
none |
The instance ID for the dashboard is generated when the dashboard is created.
Type: string
|
Here is a sample embedding "type":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"
type":"dashboard",
}
);
The following table describes available options for these properties and objects.
"type":"dashboard"
|
|
The type of embedded Composer component. |
Here is a sample embedding "application":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"type":"dashboard",
"application":{
"
banner":false,
"
logo":true
}
}
);
The following table describes available options for these properties and objects.
"application.banner": true
|
false |
Indicates whether the Symphony top-level navigation banner should be shown with the embedded dashboard. Valid values are true or false.
Type: boolean
This property is deprecated and will be removed in a future release.
|
"application.logo": true
|
false |
Indicates whether the Symphony logo should be shown with the embedded dashboard. Valid values are true or false.
Type: boolean
This property is deprecated and will be removed in a future release.
|
Here is a sample embedding "interactivityProfileName":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"type":"dashboard",
"application":{
"banner":false,
"logo":true
}
"
interactivityProfileName":"interactive",
}
);
The following table describes available options for these properties and objects.
"interactivityProfileName"
:"interactive"
|
interactive |
Determines the way in which your users will be able to work with the embedded dashboard. Valid values are readonly and interactive. If you do not want the user of your application to change anything and only be able to view the dashboard, specify readonly. If you want your users to be able to make changes to the dashboard, specify interactive.
When the mode is readonly, the dashboard cannot be changed.
Note: This setting is backward-compatible with the interactive option for public shared link embeds. If you are migrating to Symphony's JavaScript embed technology, specify interactive for this setting to ease the migration.
Type: string
|
Here is a sample embedding "interactivityOverrides":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"type":"dashboard",
"application":{
"banner":false,
"logo":true
}
"interactivityProfileName":"interactive",
"
interactivityOverrides":"<interactivity-overrides-ID>",
}
);
The following table describes available options for these properties and objects.
"interactivityOverrides":"<interactivity-overrides-ID>"
|
none |
Specifies specific dashboard and visual interactivity settings for an embedded dashboard. The visual interactivity settings specified in this object will override any interactivity settings specified for the individual visuals.
These settings will also override the dashboard interactivity profile linked to the dashboard (the one saved with the dashboard) and the dashboard interactivity profile passed by the interactivityProfileName property.
Type: object
|
Here is a sample embedding "mode":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"type":"dashboard",
"application":{
"banner":false,
"logo":true
}
"interactivityProfileName":"interactive",
"interactivityOverrides":"<interactivity-overrides-ID>",
"
mode":"interactive",
}
);
The following table describes available options for these properties and objects.
"mode":"interactive"
|
interactive |
When a dashboard interactivity profile is specified (using the interactivityOverrides object or the interactivityProfileName parameter), the mode parameter is ignored. The mode parameter is also deprecated in Symphony and will be removed in a future release.
Type: string
|
Here is a sample embedding "theme":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"type":"dashboard",
"application":{
"banner":false,
"logo":true
}
"interactivityProfileName":"interactive",
"interactivityOverrides":"<interactivity-overrides-ID>",
"mode":"interactive",
"
theme":"modern",
}
);
The following table describes available options for these properties and objects.
"theme":"dark"
|
composer |
The theme for the embedded dashboard. Valid values are composer, modern, or dark. The initial default theme, composer, is the same as the modern theme. However, if you add your own themes to the application, more options are available in this list and you may have introduced a different default.
Type: string
|
Here is a sample embedding "editor":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"type":"dashboard",
"application":{
"banner":false,
"logo":true
}
"interactivityProfileName":"interactive",
"interactivityOverrides":"<interactivity-overrides-ID>",
"mode":"interactive",
"theme":"modern",
"editor":{
"
placement": "docRight"
}
}
);
The following table describes available options for these properties and objects.
"editor.placement":"docRight" |
modals |
Indicates where the dashboard editor appears. Valid editor placements are dockRight and modals.
Type: string
|
Here is a sample embedding "header":
embedManager.createComponent('dashboard',
const componentConfig = {
"dashboardId": "<dashboard-ID>",
"componentInstanceId":"<component-instance-ID>",
"type":"dashboard",
"application":{
"banner":false,
"logo":true
}
"interactivityProfileName":"interactive",
"interactivityOverrides":"<interactivity-overrides-ID>",
"mode":"interactive",
"theme":"modern",
"editor":{
"placement": "docRight"
}
"header": {
"
title": "My Dash"
"
showActions": false,
"
showTitle": false,
"
visible": false
}
}
);
The following table describes available options for these properties and objects.
"header.title":"<newtitle>"
|
none |
Allows you to overwrite the title of the embedded dashboard. The embedded dashboard title is read only; it cannot be changed while the dashboard is embedded.
Type: string
|
"header.showActions": false
|
true |
Indicates whether dashboard actions should be visible for the embedded dashboard. Valid values are true or false.
Type: boolean
|
"header.showTitle": false
|
true |
Indicates whether the dashboard title should be shown for the embedded dashboard. Valid values are true or false.
Type: Boolean
|
"header.visible": false
|
true |
Indicates whether the dashboard header should be shown for the embedded dashboard. Valid values are true or false. |
Here is a sample embedding "intialFilters":
intialFilters: {
sourceId: "<source-id>"
timeFilter: {
from: "+$start_of_data",
to: "+$end_of_data",
timeField: "_saledate",
},
filters: [{
"operation": "BETWEEN"
"paths": "returns",
"value": [ 1, 25 ]
}]
}
The following table describes available options for these properties and objects.
initialFilters |
none |
Allows you to pass initial filters to the specified dashboard. Pass parameters for filters, sourceId, timeFilter, and applyFiltersStrategy.
Type: string
|
applyFiltersStrategy |
overrideSamePath |
Use overrideSamePath to overwrite filters using the same path.
Use replaceExisting to remove all filters and use only defined initialFilters.
|
You can also refresh your data in the dashboard as needed.
component.refreshData() |
Refreshes data in the dashboard when called. |
Comments
0 comments
Please sign in to leave a comment.