ICustomItemMetaData Interface

When implemented, represents a custom item model.

Declaration

export interface ICustomItemMetaData

Properties

bindings Property

Specifies custom item’s data items (measures, dimensions) and its options.

Declaration

bindings?: Array<DevExpress.Dashboard.Model.ICustomItemBinding>

Property Value

Type	Description
ICustomItemBinding[]	An array of data items.

Remarks

The bindings property contains bindings used to provide data for the custom item.

The code snippet shows how to create custom measures (Values) and dimensions (Arguments) for the FunnelD3 custom item in an ASP.NET Core application:

const funnelMeta = {
    bindings: [{
        propertyName: 'Values',
        dataItemType: 'Measure',
        array: true,
        enableColoring: true,
        displayName: 'Values',
        emptyPlaceholder: 'Set Value',
        selectedPlaceholder: 'Configure Value'
    }, {
        propertyName: 'Arguments',
        dataItemType: 'Dimension',
        array: true,
        enableInteractivity: true,
        enableColoring: true,
        displayName: 'Arguments',
        emptyPlaceholder: 'Set Argument',
        selectedPlaceholder: 'Configure Argument'
    }],
// ...
};

You can find and download the full example on GitHub:

View Example: ASP.NET Core View Example: Angular View Example: React

customProperties Property

Gets a collection of custom properties.

Declaration

customProperties?: Array<DevExpress.Dashboard.Model.CustomPropertyMetadata>

Property Value

Type	Description
CustomPropertyMetadata[]	A collection of the CustomPropertyMetadata objects.

Remarks

Tip

Documentation: Custom Properties

groupName Property

Specifies a Toolbox group name where a custom item should be located.

Declaration

groupName?: string

Property Value

Type	Description
string	A string that specifies a Toolbox group name.

Remarks

You can add a custom item to an existing group or separate Custom group.

• Set the groupName value to an existing group name to add the custom item to this group.
• If the groupName value does not match an existing group name, the custom item is added to a separate Custom group.

To access toolbox groups in code, find ToolboxExtension and use its toolboxGroups property.

icon Property

Specifies a custom item’s icon.

Declaration

icon: string

Property Value

Type	Description
string	A string that contains an id from icon’s svg definition.

Remarks

The custom item’s icon is used to identify a custom item in the Toolbox, empty dashboards and dashboard groups, etc.

See the following example for information on how to specify an SVG icon for a custom item:

View Example

index Property

Specifies an item position inside the specified Toolbox group.

Declaration

index?: number

Property Value

Type	Description
number	A zero-based index that defines an item position inside the specified Toolbox group.

interactivity Property

Specifies support of the interactivity features (like Master Filtering and Drill-Down).

Declaration

interactivity?: {
    filter?: boolean;
    drillDown?: boolean;
}

Property Value

Name	Type	Description
drillDown	boolean	true, to support drill-down; otherwise, false.
filter	boolean	true, to support master-filtering; otherwise, false.

optionsPanelSections Property

Declaration

optionsPanelSections?: Array<DevExpress.Dashboard.Designer.SectionOptions>

Property Value

Type
SectionOptions[]

properties Property

Specifies properties used to provide specific settings for the custom item.

Declaration

properties?: Array<DevExpress.Dashboard.Model.ICustomItemProperty>

Property Value

Type	Description
ICustomItemProperty[]	An array of custom item’s properties.

Remarks

From v20.1, we recommend that you use the customProperties and optionsPanelSections properties when you specify the custom properties and options. These properties return arrays of the CustomPropertyMetadata or SectionOptions objects:

customProperties: <Array<CustomPropertyMetadata>>[{
    ownerType: CustomItem,
    propertyName: "backColorProperty",
    defaultValue: 'None',
    valueType: 'string',
}],
optionsPanelSections: <Array<SectionOptions>>[{
    title: 'Background Options',
    items: [{
        dataField: 'backColorProperty',
        editorType: "dxSelectBox",
        editorOptions: {
            items: [ 'None', 'Red', 'Blue' ]
        }
    }]
}]

title Property

Specifies a custom item title.

Declaration

title: string

Property Value

Type	Description
string	A string value that is a custom item title.

Remarks

The title property specifies a custom item title that is used in the Toolbox, tooltips, as a default dashboard item caption, etc.