Web Components for Insights Hub and Industrial IoT - Aspect Variable Selector - Developer Documentation
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.

Example

AspectVariableSelector

Interface

Models

IAspectVariablesSelection
interface IAspectVariablesSelection {
    assets: Asset[];
}
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[];
}
IAspect
interface IAspect {
    name: string;
    holderAssetId: string;
    aspectTypeId: string;
    aspectTypeName: string;
    category: AspectCategory;
    description: string;
    variables: IVariable[];
}
IVariable
interface IVariable {
    name: string;
    dataType: VariableDataType;
    unit: string | null;
    searchable: boolean;
    length: number | null;
    qualityCode: boolean;
}
IDataModel
interface IDataModel {
  // forces reload of data, e.g. re-loading the aspects / variables
  refresh(): void;
}
IViewModel
interface IViewModel {
  refresh(): void;
}

Remarks

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

Roles

  • mdsp:core.AssetManagement.xxx (Asset Management API is used)

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

Snippets

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

Scope

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


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


Last update: April 13, 2023