Skip to content

MindSphere Web Components
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

Selector

1
<mdsp-aspect-variable-selector></mdsp-aspect-variable-selector>

Properties

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.
dataTypes string data-types Configures the data type of variables to be displayed.

Lists of data types are separated by commas, e.g. data-types = "INT,LONG,DOUBLE"
- BOOLEAN
- INT
- LONG
- DOUBLE
- STRING
- BIG_STRING
- TIMESTAMP
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.
selectedAssetIds string Configures the assets whose aspects and variables are displayed using a string array of asset IDs.
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

Events

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.
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.

Models

IAspectVariablesSelection
1
2
3
interface IAspectVariablesSelection {
    assets: Asset[];
}
Asset
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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
1
2
3
4
5
6
7
8
9
interface IAspect {
    name: string;
    holderAssetId: string;
    aspectTypeId: string;
    aspectTypeName: string;
    category: AspectCategory;
    description: string;
    variables: IVariable[];
}
IVariable
1
2
3
4
5
6
7
8
interface IVariable {
    name: string;
    dataType: VariableDataType;
    unit: string | null;
    searchable: boolean;
    length: number | null;
    qualityCode: boolean;
}
IDataModel
1
2
3
4
interface IDataModel {
  // forces reload of data // forces reload of data, e.g. re-loading the aspects / variables
  refresh(): void;
}
IViewModel
1
2
3
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)

Snippets

Display Aspects in a Flat List

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

Aspects in a Flat List

Display Variables in a Flat List

1
<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

1
<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

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

Aspects in a Drop-Down List

Display Variables in a Drop-Down List

1
<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

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

Aspects and their Variables in a Drop-Down List

Update an Aggregate Chart with the Selected Variables

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

  • category="Dynamic": only show dynamic aspects
  • data-types="INT,LONG,DOUBLE": list only datatypes supported by the Aggregate Chart
1
<mdsp-aspect-variable-selector category="Dynamic" data-types="INT,LONG,DOUBLE" 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 Aggregate Chart:

1
2
3
 aspectVariableSelectorComp.addEventListener('selectedAspectsAndVariablesChanged', function (eventParams) {
            timeseriesAggregateComp.variablePaths = eventParams.detail;
        });

Any questions left?

Ask the community


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