Web Components Widgets for Mendix
Overview¶
Web Components Widgets for Mendix are a set of ready-to-use building blocks (based on the Web Components for Insights Hub and Industrial IoT). They can be inserted into custom Mendix applications by using Mendix simple drag and drop functionality. The following components are currently available as a Mendix widgets:
- Aspect Variable Selector
- Asset Map
- Asset View
- Custom Map
- Date Time Range Picker
- Event Chart
- Event Type View
- Event View
- File View
- Map
- MindConnect Edge Analytics
- Rule Table
- Rule Wizard
- Time Series Chart
- Time Series Table
The Web Components for Insights Hub and Industrial IoT as Mendix Widgets offered by this package are simple wrappers between the Web Components, the Mendix Studio Pro and your application. When starting your application the Web Components are loaded into your browser, bound to your application and the configuration given in the Mendix Modeler is applied.
Info
Note that the version of the Web Components for Insights Hub and Industrial IoT used in this package may be discontinued in the future. It is recommended to check the availability of the Web Components for Insights Hub and Industrial IoT regularly and to prepare an update or a discontinuation of your application.
Get the Web Components for Insights Hub and Industrial IoT Widgets¶
The Web Components for Insights Hub and Industrial IoT Widgets can be downloaded directly via the Mendix App Store. To get these Web Components Widgets directly imported into your project, we recommend to start the App Store via the Mendix Modeler. After Downloading the Web Components Widgets, they appear in the Toolbox once you open up a Page. 
Local Development¶
Web Components Widgets fetch data on their own from Insights Hub by calling the Industrial IoT APIs. While the Application is running as a registered Insights Hub App, this will work without any further user interaction. In order to work locally, a Industrial IoT API reverse proxy is necessary.
If you develop a Mendix application running within the Insights Hub eco system (Mendix on Insights Hub), you can use the reverse proxy provided by the Siemens Insights Hub SSO. The reverse proxy is enabled by default.
If you develop a Mendix Standalone application (Low Code Starter Kit), you can use the reverse proxy provided by the Insights Hub Iot Authenticator. The reverse proxy is enabled by default.
Note
The MindSphere IIoT Authenticator module is not compatible with the MindSphereSingleSignOn module. Details about the different integration methods can be found here.
Limitations¶
- Rule View: Currently it is not possible to delete a rule when running locally using the Industrial IoT API reverse proxy. The component works fine when the app is deployed and runs in the Cloud.
Maps¶
All widgets providing map functionality are powered by MapTiler, which requires an additional license. No worry the license is already covered by Insights Hub and as long as you deploy your application to Insights Hub and register the application to the the license key will be applied automatically, but if you are an IoT for Maker customer and deploy your application somewhere different you may see the following:
.
In this case, please contact the Insights Hub Support team to provide license support for your application as well.
Widget Usage¶
General¶
After importing the Web Components for Insights Hub and Industrial IoT Widgets into your project, you can find them in the Toolbox of your pages.
By performing drag & drop, you can easily integrate the widgets into your pages. Note that the Web Components for Insights Hub and Industrial IoT Widgets need to be in the context of a data container, for example Data view or Data grid to communicate with entities from your Domain Model.
Most Web Components for Insights Hub and Industrial IoT Widgets offer the same configuration parameters as the respective Web Components for Insights Hub and Industrial IoT. In some cases, not all configuration parameters are available. This document only outlines the differences between the Web Components for Insights Hub and Industrial IoT and the configuration of the Web Components Widgets provided here.
For details about the parameters refer to the respective components documentation.
Each Web Components Widget has a General tab. In this tab, general settings like the components language or refresh behavior and custom Error Handling can be configured.
In addition to the respective Web Components parameters, the following input / output fields are provided:
Input fields¶
- Context: Specifies the context of the widget.
- Language: Specifies the language of the component.
- Refresh (not available in all Web Components Widgets): Specifies a
booleanvariable which triggers a refresh of the component if set totrue. After refreshing the Web Components Widget resets the variable tofalseto prepare the next refresh event.
Output fields¶
- Component error text: Specifies a
Stringvariable for storing error messages from the component (optional). - On error action: Specifies an action to be triggered in case of an error inside the component (optional).
- On property changed action: Specifies an action to be triggered when one of the outputs has been changed (optional).
Aspect Variable Selector¶
The following Output parameter is provided:
- Variable path: Specifies a
Stringvariable, where the selected Aspects/Variables will be stored in a JSON format. This value could directly be used on the time series chart component.
Note that the standard String variable’s length of 200 is reached very soon. It is recommended to use a String without length limitation.
The following parameter is required:
- Selected asset IDs: All Aspects for the given Asset IDs are shown. Provide multiple Asset IDs as comma separated
Stringvariable.
Asset Map View¶
Only important properties of the Asset Map component are described here. Detailed information about the other properties can be found here:
- Asset type filter: Specifies an
Expressioncontaining the asset type filter configuration. Default value is
'{
"supportedTypes" : ["core.basicasset"],
"includeInheritance" : true
}'
- Selected asset action: Specifies an action which is triggered when the user selects one of the assets.
The following parameter is required:
- Selected asset ID: The selected Asset ID is stored in this property
IAsset tab¶
The tab IAsset contains properties from the IAsset interface specified here. All properties are optional. In order to use them create an entity and provide corresponding attributes with type:
| Name | data type | hint |
|---|---|---|
| Is shared asset | Boolean | - |
| Is sharer | Boolean | - |
| TenantId | String | - |
| Name | String | - |
| etag | Integer | - |
| Subtenant | String | - |
| Description | String | - |
| Parent ID | String | - |
| Type ID | String | - |
| Timezone ID | String | - |
| TwinType | String | - |
| Aspects | String | JSON string. Use import mapping to convert it to entities. |
| Variables | String | JSON string. Use import mapping to convert it to entities. |
| File assignments | String | JSON string. Use import mapping to convert it to entities. |
ILocation tab¶
The tab ILocation contains properties from the ILocation interface specified here. All properties are optional. In order to use them create an entity and provide corresponding attributes with type:
| Name | data type | hint |
|---|---|---|
| Country | String | - |
| Region | String | - |
| Locality | String | - |
| Street address | String | - |
| Postal code | String | - |
| Latitude | Decimal | - |
| Longitude | Decimal | - |
Map State tab¶
The tab Map State contains properties from the IMapViewPort and IMapCoordinates Interface specified here. If the map view will be changed (moved or zoom in/out) the properties will be set. All properties are optional. In order to use them create an entity and provide corresponding attributes with type:
| Name | data type | hint |
|---|---|---|
| Current latitude | Decimal | - |
| Current longitude | Decimal | - |
| Current zoom level | Integer | - |
Asset View¶
Documentation about all properties of the Asset View component can be found here.
In addition to the original Asset View component's parameters, the following properties are provided:
- Selected asset action: Specifies an action which is triggered when the user selects one of the assets.
- Dynamic view mode: Specifies a
Stringvariable which contains one of the valuesList,Card,TreeorCompactTree. If no validStringis specified, the Web Components Widget is set toListmode.
The following parameter is required:
- Selected asset ID: The selected Asset ID is stored in this property
The tab IAsset and ILocation contains the same properties as described on the Asset Map.
Custom Map¶
Documentation about the properties of the Custom Map component can be found here. You can customize the behavior of the custom map component on the Specific tab. Important properties are:
- Show toolbar: Shows or hides the embedded toolbar which allows the upload of new images, the placement of assets on the image.
Info
Specify the value of this property based on roles. For example, only administrators are allowed to view the toolbar with its functionality.
The component exposes the following properties:
- Selected asset action: This action is called whenever the user selects an asset.
- Selected asset ID: This is set whenever the user selects an asset.
The following parameter is required:
- Selected asset ID: The selected Asset ID is stored in this property.
DateTimeRange Picker¶
Documentation about the properties of the DateTimeRange Picker can be found here
The following parameters are required:
- From: Specifies the start date of the selected range.
- To: Specifies the end date of the selected range.
Event Chart¶
Documentation about the properties of the Event Chart can be found here
Event View¶
Documentation about the properties of the Event View can be found here
In addition to the original Event View component's parameters, the following property is provided:
- Show Asset Name: Shows asset name instead of the asset ID.
The following parameters are required:
- From: Specifies the start date of the selected range.
- To: Specifies the end date of the selected range.
Info
Show all events in the tenant by setting the Asset ID property to none.
Column settings tab¶
In the tab Column settings the visibility of columns in the event table can be configured.
IMindSphereStandardEventAsset tab¶
The tab IMindSphereStandardEventAsset contains properties from the IBaseEvent and IMindSphereStandardEvent Interface specified here. All properties here are optional. In order to use them create an entity and provide corresponding attributes with type:
| Name | data type | hint |
|---|---|---|
| Event Id | String | - |
| Event Ids | String | - |
| Severity | Integer | - |
| Description | String | - |
| Code | String | - |
| Source | String | - |
| Acknowledged | Boolean | - |
| Type Id | String | - |
| CorrelationId | String | - |
| Timestamp | Date and Time | - |
| Entity Id | String | - |
| Entity Name | String | Only available if Show Asset Name is true. |
| eTag | Integer | - |
Event Type View¶
Documentation about the properties of the Event Type View can be found here
File View¶
Documentation about the properties of the File View can be found here
The property Updated From and Updated To can be used as a filter of the updated timestamp of the files. The filter is not applied in case these properties are empty.
Info
Both properties Updated From / To must be provided in order to use it as filter.
The following parameter is required:
- Asset ID: Show files for given asset ID.
IFile tab¶
The tab IFile contains optional output properties about the selected file.
Map View¶
Documentation about the properties of the Map View can be found here
The tab Map State contains properties from the IMapViewPort and IMapCoordinates Interface specified here. If the map view will be changed (moved or zoom in/out) the properties will be set. All properties are optional. In order to use them create an entity and provide corresponding attributes with type:
| Name | data type | hint |
|---|---|---|
| Current latitude | Decimal | - |
| Current longitude | Decimal | - |
| Current zoom level | Integer | - |
MindConnect Edge Analytics¶
This widget requires access to MindConnect Edge Analytics and the related roles and scopes. Only this application provides the necessary files for displaying complex data. The MindConnect Edge Analytics View Chart displays complex data like FFTs, Orbits and Buffers generated and uploaded by MindConnect Edge Analytics.
Documentation about the properties of the MindConnect Edge Analytics can be found here
The following parameters are required:
- From: Specifies the start date of the selected range.
- To: Specifies the end date of the selected range.
ISelected File tab¶
The tab ISelected File contains properties from the selected file. All properties are optional.
| Name | data type | hint |
|---|---|---|
| Aspect | String | Name of the selected aspect |
| fftBins | Long | Number of lines in the spectrum |
| Max | Decimal | Maximum frequency or order of the spectrum |
| Min | Decimal | Minimum frequency or order of the spectrum |
| Name | String | Name of the target data |
| Type | String | Complex data type |
| Timestamp | String | Timestamp of the calculation |
Rule View¶
Documentation about the properties of the Rule View can be found here
In addition to the original Rule View component's parameters, the following property is provided:
- Show Asset Name: Shows asset name instead of the asset ID.
The following parameter is required:
- Selected asset ID: The selected Asset ID is stored in this property
Time Series Chart¶
Documentation about the properties of the Time Series Chart can be found here
The following parameters are required:
- From: Specifies the start date of the selected range.
- To: Specifies the end date of the selected range.
- Variable path: direct usage of the variable path from the
Aspect Variable Selectoris possible here.
Appearance tab¶
In the Appearance tab, you can specify the width and height of the Web Components Widget.
Chart date range tab¶
The Chart date range tab the current used date range on the chart is available. These values changes if the user zoom in / zoom out. Use the values to e.g. update the Date Time Range Picker.
Additional data tab¶
In the Additional data tab you can specify additional custom limits to be shown in the chart.
Three types are supported:
- Static: will always draw a horizontal line at the given Y-Value
- Expression: use an expression for the Y-Value to show. If the expression returns empty, nothing will be shown
- Dynamic: provide a data source which returns a list of X / Y - values. Where X is a date time and Y a decimal. When using a Microflow as data source the surrounding data view entity will be passed as a parameter to the Microflow. You can use this to get the current from / to, chart from / to and the selected assetId if needed.
For each additional limit / line the following options are configurable:
Time Series Table¶
Documentation about the properties of the Time Series Table can be found here
The following parameters are required:
- From: Specifies the start date of the selected range.
- To: Specifies the end date of the selected range.
- Variable path: direct usage of the variable path from the
Aspect Variable Selectoris possible here.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.