MindSphere Web Components Widgets for Mendix
Overview¶
MindSphere Web Components Widgets for Mendix are a set of ready-to-use building blocks (based on the MindSphere Web Components). 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 View
- File View
- Map
- Rule View
- Time Series Chart
The MindSphere Web Components as Mendix Widgets offered by this package are simple wrappers between the MindSphere Web Components, the Mendix Studio Pro and your application. When starting your application, download the MindSphere Web Components into your browser, bind them to your application and apply the configuration given in the Mendix Modeler.
Info
Note that the version of the MindSphere Web Components used in this package may be discontinued in the future. It is recommended to check the availability of the MindSphere Web Components regularly and to prepare an update or a discontinuation of your application.
Get the MindSphere Web Components Widgets¶
The MindSphere Web Components Widgets can be downloaded directly via the Mendix App Store. To get the MindSphere 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.
General information about Mendix widgets¶
For general information about the widget technology within Mendix, refer Widgets on the Mendix web site.
Local Development¶
Web Components Widgets fetch data on their own from MindSphere by calling the MindSphere APIs. While the Application is running as a registered MindSphere App, this will work without any further user interaction. In order to work locally, a MindSphere API reverse proxy is necessary. The MindSphereSingleSignOn module provides such a reverse proxy and enables it by default.
Limitations¶
- Rule View: Currently it is not possible to delete a rule when running locally using the MindSphere API reverse proxy. The component works fine when the app is deployed and runs in the Cloud.
Widget Usage¶
General¶
After importing the MindSphere Web Components 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 MindSphere Web Components 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 MindSphere Web Components Widgets offer the same configuration parameters as the respective MindSphere Web Component. In some cases, not all configuration parameters are available. This document only outlines the differences between the MindSphere Web Components and the configuration of the MindSphere Web Components Widgets provided here.
For details about the parameters refer to the respective components documentation.
Each MindSphere Web Components Widget has at least two configuration tabs. The General tab can be configured for each MindSphere Web Components Widget. In this tab, Mendix specific Error Handling can be configured.
In addition to the respective MindSphere Web Components parameters, the following fields are provided:
- Component error text: Specifies a
String
variable for storing error messages from the component (optional). - Error message microflow: Specifies a microflow to be triggered in case of an error inside the component (optional).
- Refresh (not available in all MindSphere Web Components Widgets): Specifies a
boolean
variable which triggers a refresh of the component if set totrue
. After refreshing the MindSphere Web Components Widget resets the variable tofalse
to prepare the next refresh event.
Widget Specifics¶
Aspect Variable Selector¶
In addition to the original Aspect Variable Selector component's parameters, the following property is provided:
- Variable path: Specifies a
String
variable, where the selected Aspects/Variables will be stored in a JSON format.
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 must be specified:
- Selected asset IDs
Asset Map View¶
In addition to the original Asset Map component's parameters, the following properties are provided:
- Microflow: Specifies a micro flow which is triggered when the user selects one of the assets.
- Show shared assets: If this is true, assets shared by other tenants will also be shown.
- Zoom level configuration: Switch between a static or a dynamic zoom level. The zoom level is defined in the respective field below.
- Static zoom level: Defines a fixed value for the zoom level.
- Dynamic zoom level: Specifies an
Integer
variable containing the zoom level configuration. - Is shared asset: Specifies if the selected asset is shared or not. This data is saved in the given boolean entity.
The following parameter must be specified:
- Selected asset ID
The tab Asset type filter
contains properties to filter the shown assets.
- Asset type filter: Switch between a static or a dynamic filter.
- Static asset type filter: Defines a fixed value for the asset type filter.
- Dynamic asset type filter: Specifies an
String
variable containing the asset type filter configuration.
The tab IAsset
contains properties from the IAsset and 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 |
---|---|---|
tenantId | String | - |
name | String | - |
etag | Integer | - |
externalId | String | - |
t2Tenant | String | - |
description | String | - |
parentId | String | - |
typeId | String | - |
country | String | - |
region | String | - |
locality | String | - |
streetAddress | String | - |
postalCode | String | - |
longitude | Decimal | - |
latitude | Decimal | - |
variables | String | JSON string. Use import mapping to convert it to entities. |
aspects | String | JSON string. Use import mapping to convert it to entities. |
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¶
In addition to the original Asset View
component's parameters, the following properties are provided:
- Microflow: Specifies a microflow which is triggered when the user selects one of the assets.
- Dynamic view mode: Specifies a
String
variable which contains one of the valuesList
,Card
orTree
. If no validString
is specified, the MindSphere Web Components Widget is set toList
mode. - Show shared assets: If this is true, assets shared by other tenants will also be shown.
- Is shared asset: Specifies if the selected asset is shared or not. This data is saved in the given boolean entity.
The following parameter must be specified:
- Selected asset ID
The tab AssetTypeFilter
contains the same properties as described on the Asset Map.
The tab IAsset
contains the same properties as described on the Asset Map.
Custom Map¶
You can customize the behavior of the custom map
component by the following input parameters:
- Show shared assets: If this is true, assets shared by other tenants will also be visible.
- Enable dragging: Specifies whether the custom image map is draggable by using the mouse.
- Wheel zoom: Specifies the zoom behavior of the custom map image.
- 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 id: This is set whenever the user selects an asset.
- Is shared asset: This contains the information if the selected asset is a shared asset.
- Microflow: This flow is called whenever the user selects an asset.
Event View¶
In addition to the original Event View
component's parameters, the following properties are provided:
- Selected event ID: Specifies a
String
variable containing the selected eventIds. - Selected event IDs: Specifies a
String
variable containing all selected eventIds.
Note that the standard String
variable length of 200 is reached very soon. It is recommended to use a string without length limitation.
The following parameters must be specified:
- From
- To
- Asset ID
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 |
---|---|
typeId | String |
correlationId | String |
timestamp | Date and Time |
entityId | String |
eTag | Integer |
severity | Integer |
description | String |
code | String |
source | String |
acknowledged | Boolean |
File View¶
In addition to the original File View
component's parameters, the following properties are provided:
- Selected file name: Specifies a
String
variable containing the selected file name. - Selected file names: Specifies a
String
variable containing all names of the selected files.
Info
Note that the standard String
variable length of 200 is reached very soon. It is recommended to use a string without length limitation.
The following parameters must be specified:
- From
- To
- Asset ID
Map View¶
In addition to the original Map component's parameters, the following properties are provided:
- Zoom level configuration: Switch between a static or a dynamic zoom level. The zoom level is defined in the respective field below.
- Static zoom level: Defines a fixed value for the zoom level.
- Dynamic zoom level: Specifies an
Integer
variable containing the zoom level configuration. - Is shared asset: Specifies if the selected asset is shared or not. This data is saved in the given boolean entity.
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 | - |
Time Series Chart¶
In addition to the original Time Series Chart component’s parameters, the following fields are provided:
- Variable path configuration: Switch between a static or a dynamic variablePath. The variable is defined in the respective field below.
- Dynamic variable path: Specifies a
String
variable containing the variable path configuration. This variable can be shared with an Aspect Variable Selector. Otherwise, use the syntax described in the original Time Series Chart component’s documentation. - Static variable path: Defines a fixed variable path configuration in JSON array format. For details, refer to the original Time Series Chart component’s documentation.
In the Appearance tab, you can specify the width and height of the MindSphere Web Components Widget.
The following parameters must be specified:
- From
- To
- Dynamic variable path (to set the value from 'variable path configuration' to 'dynamic')
- Static variable path (to set the value from 'variable path configuration' to 'static')
Any questions left?
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.