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¶
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. | |||
sharedAssets | boolean |
shared-assets | false | Specifies whether shared assets from other tenants are supported. | |
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> |
Display Variables in a Flat List¶
1 | <mdsp-aspect-variable-selector view-mode="Variables"></mdsp-aspect-variable-selector> |
Display Aspects and their Variables in a Flat List¶
1 | <mdsp-aspect-variable-selector view-mode="All"></mdsp-aspect-variable-selector> |
Display Aspects in a Drop-Down List¶
1 | <mdsp-aspect-variable-selector view-mode="AspectsAsDropDown"></mdsp-aspect-variable-selector> |
Display Variables in a Drop-Down List¶
1 | <mdsp-aspect-variable-selector view-mode="VariablesAsDropDown"></mdsp-aspect-variable-selector> |
Display Aspects and their Variables in a Drop-Down List¶
1 | <mdsp-aspect-variable-selector view-mode="AllAsDropDown"></mdsp-aspect-variable-selector> |
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 aspectsdata-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?
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.