Skip to content

Web Components for Insights Hub and Industrial IoT
Aspect Variable Selector

The Aspect Variable Selector allows users to select one or multiple variables or aspects of one or more assets.

It can be configured to only display dynamic or static aspects, or variables of a specific datatype.







Name Type Corresponding attribute Default Description Allowed Values
category string category Dynamic Configures a category of aspects to be displayed. - Dynamic
- Static
- All
context string context Configures the context of the component. See also here.
countHidden boolean count-hidden false Hides the asset type count field if true.
dataTypes string data-types empty (all data types supported) Lists of data types are separated by commas, e.g. data-types = "INT,LONG,DOUBLE" - BOOLEAN
errorNotification boolean error-notification Enables error control if an error is thrown. This can be used for debug purposes.

For productive use, the error event should be caught and handled in the application. See also here.
locale string locale Specifies the locale in which the component is displayed.
The locales en and de are provided by default.
See also here.
localeManager LocaleManager Returns a LocaleManager object.

This can be used to add locales or to get the locale settings. See also here.
model IDataModel Returns an object for data model handling, refer to IDataModel model.
searchHidden boolean search-hidden false Hides the search field if true.
searchText string search-text Specifies the text in the search field (read or write).
selectedAssetIds string Configures the assets whose aspects and variables are displayed using a string array of asset IDs.
selectionChangedEventDebounceTime number 0 milliseconds Configures the debounce time in milliseconds of selectedAspectsAndVariablesChanged Event.
sharedAssets boolean shared-assets false Specifies whether shared assets from other tenants are supported.
timeSeriesInfo boolean time-series-info false Specifies whether time series information are visible or not.
variablePaths ITimeSeriesPathInfo Specifies an array of objects which defines the selected aspects/variables.
view IViewModel Returns an object for view handling, refer to IViewModel model.
viewMode string view-mode Aspects Configures the view mode. - All
- Aspects
- Variables
- AspectsAsDropDown
- VariablesAsDropDown
- AllAsDropDown
- VariableSingleSelection


Name Type Description
selectedAspectsAndVariablesChanged EventEmitter<IAspectVariablesSelection[]> Triggered when the selected aspect or variable is changed.

The event.detail property contains an array of Asset objects, refer to Asset model.
Each Asset object states the asset ID and an asset.aspectDefinition property which lists the selected aspects/variables.
aspectsVariablesLoaded EventEmitter<ExecutionResult<SimpleAspectVariableType[], Error | MdspError>> Triggered when aspect variables are loaded for selected assets.

The event.detail property contains an array of AssetTypes objects, refer to AssetType model.
Each AssetType object states the asset ID and an assetType.aspectDefinition property which lists its aspectTypes/variables.
connected EventEmitter<any> Triggered after the component is created, initialized and appended to the DOM tree.
error EventEmitter<MdspUiError> Triggered when an error occurs in the component or while accessing APIs. See also here.


interface IAspectVariablesSelection {
    assets: Asset[];
class Asset implements IAsset {
    public assetId: string;
    public tenantId: string;
    public name: string;
    public etag: number;
    public externalId: string;
    public t2Tenant: string;
    public description: string;
    public parentId: string;
    public typeId: string;
    public location: ILocation;
    public variables: any[];
    public aspects: any[];
    public deleted: string;
    public _links: any;
    public aspectsDefinition: IAspect[];
interface IAspect {
    name: string;
    holderAssetId: string;
    aspectTypeId: string;
    aspectTypeName: string;
    category: AspectCategory;
    description: string;
    variables: IVariable[];
interface IVariable {
    name: string;
    dataType: VariableDataType;
    unit: string | null;
    searchable: boolean;
    length: number | null;
    qualityCode: boolean;
interface IDataModel {
  // forces reload of data, e.g. re-loading the aspects / variables
  refresh(): void;
interface IViewModel {
  refresh(): void;


  • The Aspect Variable Selector currently supports up to 5 assets with up to 10 aspects each, where each aspect has up to 10 variables.


  • (Asset Management API is used)


  • mdsp:core:iot.timUser (if property time-series-info is set to true)


Display Aspects in a flat list

<mdsp-aspect-variable-selector view-mode="Aspects"></mdsp-aspect-variable-selector>

Aspects in a flat list

Display Variables in a flat list

<mdsp-aspect-variable-selector view-mode="Variables"></mdsp-aspect-variable-selector>

Variables in a flat list

Display Aspects and their Variables in a flat list

<mdsp-aspect-variable-selector view-mode="All"></mdsp-aspect-variable-selector>

Aspects and their Variables in a flat list

Display Aspects in a Drop-Down List

<mdsp-aspect-variable-selector view-mode="AspectsAsDropDown"></mdsp-aspect-variable-selector>

Aspects in a Drop-Down List

Display Variables in a Drop-Down List

<mdsp-aspect-variable-selector view-mode="VariablesAsDropDown"></mdsp-aspect-variable-selector>

Variables in a Drop-Down List

Display Aspects and their Variables in a Drop-Down List

<mdsp-aspect-variable-selector view-mode="AllAsDropDown"></mdsp-aspect-variable-selector>

Aspects and their Variables in a Drop-Down List

Display Aspects and their Variables in a single selection mode

The single selection mode fires a selectedAspectsAndVariablesChanged event when you press the add button of a variable. The detail of this event contains only the variable the user clicked on.
Aspects of the asset are shown, but not selectable.

<mdsp-aspect-variable-selector view-mode="VariableSingleSelection"></mdsp-aspect-variable-selector>

Aspects and their Variables in a Drop-Down List

Update an Time Series Chart with the selected Variables

The following attributes are recommended when the selected variable is to be displayed in an Time Series Chart:

  • category="Dynamic": only show dynamic aspects
  • data-types="INT,LONG,DOUBLE,BOOLEAN": list only datatypes supported by the Time Series Chart
<mdsp-aspect-variable-selector category="Dynamic" data-types="INT,LONG,DOUBLE,BOOLEAN" view-mode="All"></mdsp-aspect-variable-selector>

When the user changes the selection, an event is triggered. Use the detail property of this event to update the variablePaths parameter of the Time Series Chart:

 aspectVariableSelectorComp.addEventListener('selectedAspectsAndVariablesChanged', function (eventParams) {
            timeSeriesChart.variablePaths = eventParams.detail;

Indicator when aspect holds time series data

<mdsp-aspect-variable-selector time-series-info="true"></mdsp-aspect-variable-selector>

Aspects and their Variables in a Drop-Down List


Please note, that for this attribute, the time series read scope must be configured in the Developer Cockpit.

Last update: February 23, 2024

Except where otherwise noted, content on this site is licensed under the Development License Agreement.