ViewerToolbarItem Interface

A toolbar item.

Declaration

export interface ViewerToolbarItem

Properties

checked Property

Specifies a value indicating whether the toolbar item is enabled.

Declaration

checked?: boolean

Property Value

Type Description
boolean

true, if the toolbar item is enabled; otherwise, false.

click Property

Specifies a custom function that is executed when a click occurs.

Declaration

click?: (element: JQuery) => void

Property Value

Type Description
(element: JQuery) => void

A custom function that is executed when a click occurs.

disabled Property

Declaration

disabled?: boolean

Property Value

Type Description
boolean

hint Property

Specifies the text displayed as a toolbar item's hint.

Declaration

hint?: string

Property Value

Type Description
string

A string value that is a toolbar item's hint.

The hint property displays a simple pop-up hint with additional information about the item being hovered over. To provide a complex tooltip, use the tooltip property.

icon Property

Specifies the id of a button's icon.

Declaration

icon?: string

Property Value

Type Description
string

Web Dashboard supports icons in the SVG format. To provide an icon for the toolbar item, add the SVG definition onto the page and assign the id value from the definition to the icon property.

The example below shows how to add an icon to the static toolbar item.

Place the SVG definition onto the page containing the Web Dashboard and set the icon's color to dx_gray. The recommended icon size is 24 x 24 px:

<svg id="customButton">
    <path fill="dx_gray" d="M12 2 L2 22 L22 22 Z"></path>       
</svg>

Call the onItemCaptionToolbarUpdated event and pass the icon's id from the definition above to the icon property:

extensions: {
    "viewer-api": {
        onItemCaptionToolbarUpdated: function (e) {
            if (e.itemName === "chartDashboardItem1") {
                e.options.staticItems.push({
                    // ...
                    icon: "customButton",                                    
                });
            }
        }
    }
}
Note

If neither the text nor icon properties are set, the dashboard toolbar item is not displayed in the caption / title.

menu Property

Specifies a toolbar item's menu.

Declaration

menu?: ViewerToolbarItemMenu

Property Value

Type Description
ViewerToolbarItemMenu

A toolbar menu.

name Property

Specifies a toolbar item's unique name.

Declaration

name?: string

Property Value

Type Description
string

A string value that is a toolbar item's unique name.

Go to dashboardToolbarItemNames to get a list of predefined names.

template Property

Specifies a template used to customize a tooltip.

Declaration

template?: () => JQuery

Property Value

Type Description
() => JQuery

A JQuery object that defines a template.

text Property

Specifies a text you can display in the toolbar item.

Declaration

text?: string

Property Value

Type Description
string

A string value you can display in the toolbar item.

Note

The text property is not in effect if you set the icon property.

Note

If neither the text nor icon properties are set, the dashboard toolbar item is not displayed in the caption / title.

tooltip Property

Specifies the text displayed as a toolbar item's tooltip.

Declaration

tooltip?: ViewerToolbarItemTooltip | string

Property Value

Type Description
ViewerToolbarItemTooltip
string

A string value that is a toolbar item's tooltip.

The tooltip property displays a customized pop-up hint with additional information about the item being hovered over. You can create a specified template to display a complex tooltip.

To provide a simple hint, use the hint property.

type Property

Specifies the type of the dashboard toolbar item.

Declaration

type?: "button" | "menu" | "text"

Property Value

Type Description

Defines a clickable button.

Defines a pop-up menu.

Defines an additional text you can display in the caption / title.

The following properties are not in effect for the text dashboard toolbar item: