The requested page is not available for the requested platform. You are viewing the content for Default platform.

ViewerApiExtensionOptions Interface

Provides options for customizing the ViewerApiExtension.

Declaration

export interface ViewerApiExtensionOptions

Remarks

-

Properties

onDashboardTitleToolbarUpdated Property

Specifies a handler for the event occurring before the dashboard title toolbar is updated.

Declaration

onDashboardTitleToolbarUpdated?: (args: {
    options: DashboardTitleToolbarOptions;
}) => void

Property Value

Type Description
(args: {options: DashboardTitleToolbarOptions}) => void

A custom function that is executed when the dashboard title toolbar is updated.

Remarks

You can handle the DashboardTitleToolbarUpdated event to customize the dashboard title. For instance, you can add custom command buttons, create additional menus, add static texts, etc. The DashboardItemCaptionToolbarOptions class contains options used to customize a dashboard title's elements (the ViewerToolbarItem objects).

The following example shows how to add a toolbar item to the dashboard title. The code snippet below creates a custom button with a popup menu. The DashboardTitleToolbarUpdated event is used to customize the dashboard title. The button belongs to the actionItems collection and is displayed on the right (like the Export To and Parameters buttons).

The image below shows the result:

extensions: {
    'viewer-api': {
        onDashboardTitleToolbarUpdated: function (e) {
            e.options.actionItems.push({
                icon: 'grayTriangle',
                type: "menu",            
                menu: {
                    title: 'Custom Menu',
                    type: 'list',
                    items: ['First Item', 'Second Item', 'Third Item'],
                    selectionMode: 'single',
                    itemClick: function (itemData, itemElement, index) {
                        alert(itemData.toString());
                    }
                }
            })
        },
    }
}

onItemActionAvailabilityChanged Property

Specifies a handler for the event occurring after the available interactivity actions have changed for the specific dashboard item.

Declaration

onItemActionAvailabilityChanged?: (args: ItemActionAvailabilityChangedEventArgs) => void

Property Value

Type Description
(args: ItemActionAvailabilityChangedEventArgs) => void

A custom function that is executed after the available interactivity actions have changed for the specific dashboard item.

onItemCaptionToolbarUpdated Property

Specifies a handler for the event occurring before the dashboard item caption toolbar is updated.

Declaration

onItemCaptionToolbarUpdated?: (args: {
    itemName: string;
    options: DashboardItemCaptionToolbarOptions;
}) => void

Property Value

Type Description
(args: {itemName: string, options: DashboardItemCaptionToolbarOptions}) => void

A custom function that is executed when the dashboard item caption toolbar is updated.

Remarks

You can handle the ItemCaptionToolbarUpdated event to customize the dashboard item's caption. For instance, you can add custom command buttons, create additional menus, add static texts, etc. The DashboardItemCaptionToolbarOptions class contains options used to customize a dashboard item caption's elements (the ViewerToolbarItem objects).

The following example shows how to add a toolbar item to the dashboard item caption. The code snippet below creates a custom button with a popup menu for the Chart dashboard item. The ItemCaptionToolbarUpdated event is used to customize the dashboard item caption. The button belongs to the actionItems collection and is displayed only when the mouse pointer hovers over the dashboard item caption. The popup menu contains three icon elements.

The image below shows the result:

extensions: {
  "viewer-api": {
      onItemCaptionToolbarUpdated: function (e) {
        if (e.itemName === "chartDashboardItem1") {
          e.options.actionItems.push({
            type: "menu",
            icon: "grayCircle",
            menu: {
              type: "icons",
              items: ["greenCircle","yellowCircle","redCircle"],
              selectionMode: "one",
              title: "Circles",
              itemClick: function (itemData, itemElement, index) {
                alert(itemData.toString());
              }
          });
        }
      }
    }
  }
}

onItemClick Property

Specifies a handler for the event occurring when an end-user clicks a dashboard item.

Declaration

onItemClick?: (args: ItemClickEventArgs) => void

Property Value

Type Description
(args: ItemClickEventArgs) => void

A custom function that is executed when an end-user clicks a dashboard item.

onItemDrillDownStateChanged Property

Specifies a handler for the event occurring when a drill-down/drill-up is performed.

Declaration

onItemDrillDownStateChanged?: (args: ItemDrillDownStateChangedEventArgs) => void

Property Value

Type Description
(args: ItemDrillDownStateChangedEventArgs) => void

A custom function that is executed when a drill-down is performed.

Remarks

The ItemDrillDownStateChanged event is raised when an end-user performs drill-down or drill-up in a certain dashboard item. To determine the component name of this dashboard item, use the ItemName event parameter. Other event parameters include the following:

WebDashboardDrillDownScheme

onItemElementCustomColor Property

Specifies a handler for the event allowing you to color the required dashboard item elements using the specified colors.

Declaration

onItemElementCustomColor?: (args: ItemElementCustomColorEventArgs) => void

Property Value

Type Description
(args: ItemElementCustomColorEventArgs) => void

A custom function that is executed when coloring the required dashboard item elements.

onItemMasterFilterStateChanged Property

Specifies a handler for the event occurring when the master filter state is changed.

Declaration

onItemMasterFilterStateChanged?: (args: ItemMasterFilterStateChangedEventArgs) => void

Property Value

Type Description
(args: ItemMasterFilterStateChangedEventArgs) => void

A custom function that is executed when the master filter state is changed.

onItemSelectionChanged Property

Specifies a handler for the event occurring after the selection within the dashboard item is changed.

Declaration

onItemSelectionChanged?: (args: ItemSelectionChangedEventArgs) => void

Property Value

Type Description
(args: ItemSelectionChangedEventArgs) => void

A custom function that is executed after the selection within the dashboard item is changed.

onItemVisualInteractivity Property

Specifies a handler for the event allowing you to provide custom visual interactivity for data-bound dashboard items that support element selection and highlighting.

Declaration

onItemVisualInteractivity?: (args: ItemVisualInteractivityEventArgs) => void

Property Value

Type Description
(args: ItemVisualInteractivityEventArgs) => void

A custom function that is executed when you provide custom visual interactivity for data-bound dashboard items that support element selection and highlighting.

onItemWidgetCreated Property

Specifies a handler for the event allowing you to access underlying UI/Data Visualization widgets.

Declaration

onItemWidgetCreated?: (args: ItemWidgetEventArgs) => void

Property Value

Type Description
(args: ItemWidgetEventArgs) => void

A custom function that is executed when the client widget is created.

Remarks

The Web Dashboard uses DevExtreme widgets to visualize dashboard items' data. The onItemWidgetCreated property allows you to access these widgets and customize their settings.

You can use the following handlers for accessing these widgets and customizing their settings.

  • The onItemWidgetCreated handler is executed once for each widget when the dashboard is loaded to client.
  • The onItemWidgetUpdating/onItemWidgetUpdated handlers are executed when the client widget needs to be updated. For instance, this can be related to applying master filtering or changing parameter values.

The ItemWidgetEventArgs.itemName property returns the component name of the dashboard item whose widget can be customized. Use the ItemWidgetEventArgs.getWidget property to access the corresponding underlying widget.

Note

The dashboard item is re-created when you maximize / restore the item. All events connected with dashboard item life cycle (such as ItemWidgetCreated, ItemWidgetUpdated are fired again.

Note

The ItemWidgetCreated event is not fired for a custom dashboard item.

See Also

onItemWidgetUpdated Property

Specifies a handler for the event allowing you to access underlying UI/Data Visualization widgets.

Declaration

onItemWidgetUpdated?: (args: ItemWidgetEventArgs) => void

Property Value

Type Description
(args: ItemWidgetEventArgs) => void

A custom function that is executed when the client widget is updated.

Remarks

The Web Dashboard uses DevExtreme widgets to visualize dashboard items' data. The onItemWidgetCreated property allows you to access these widgets and customize their settings.

You can use the following handlers for accessing these widgets and customizing their settings.

  • The onItemWidgetCreated handler is executed once for each widget when the dashboard is loaded to the client.
  • The onItemWidgetUpdating/onItemWidgetUpdated handlers are executed when the client widget needs to be updated. For instance, this can be related to applying master filtering or changing parameter values.

The ItemWidgetEventArgs.itemName property returns the component name of the dashboard item whose widget can be customized. Use the ItemWidgetEventArgs.getWidget property to access the corresponding underlying widget.

Note

The dashboard item is re-created when you maximize / restore the item. All events connected with dashboard item life cycle (such as ItemWidgetCreated, ItemWidgetUpdated are fired again.

Note

The ItemWidgetUpdated event is not fired for a custom dashboard item.

See Also

onItemWidgetUpdating Property

Specifies a handler for the event allowing you to access underlying UI/Data Visualization widgets.

Declaration

onItemWidgetUpdating?: (args: ItemWidgetEventArgs) => void

Property Value

Type Description
(args: ItemWidgetEventArgs) => void

A custom function that is executed when the client widget is about to be updated.

Remarks

The Web Dashboard uses DevExtreme widgets to visualize dashboard items' data. The onItemWidgetCreated property allows you to access these widgets and customize their settings.

You can use the following handlers for accessing these widgets and customizing their settings.

  • The onItemWidgetCreated handler is executed once for each widget when the dashboard is loaded to the client.
  • The onItemWidgetUpdating/onItemWidgetUpdated handlers are executed when the client widget needs to be updated. For instance, this can be related to applying master filtering or changing parameter values.

The ItemWidgetEventArgs.itemName property returns the component name of the dashboard item whose widget can be customized. Use the ItemWidgetEventArgs.getWidget property to access the corresponding underlying widget.

Note

The dashboard item is re-created when you maximize / restore the item. All events connected with dashboard item life cycle (such as ItemWidgetCreated, ItemWidgetUpdated are fired again.

Note

The ItemWidgetUpdating event is not fired for a custom dashboard item.

See Also

onSelectedTabPageChanged Property

Specifies a handler for the event occurring when the selected tab page is changed.

Declaration

onSelectedTabPageChanged?: (args: SelectedTabPageChangedEventArgs) => void

Property Value

Type Description
(args: SelectedTabPageChangedEventArgs) => void

A custom function that is executed when the selected tab page is changed.