Overview
UI Controls in SIB appear on forms and are declared with YAML. Controls can be disabled, validate values entered, and define their own layout within the form. We provide a rich set of controls to get you up and running quickly, but if you don't see a control you need, please reach out to our support team.
Anatomy of a Control
Most SIB Controls are quite simple, but some can be complex. Complex controls tend to be very specific to a type of device or sensor. Let's start off by reviewing what is arguably the simplest control.
Below is a text input control. The platform knows that because of the id property. Every control in the SIB has this unique camel-case string.
The label to show above the input field is defined, as well as validators for the type of data that can be stored. The modelPath property indicates where to store the value in the data model. The required validator adds an asterisk to the label and prevents saving the form if the field is not filled out.
Text Input Control |
Let's take a look at the full list of supported properties.
SIB controls have the following common configuration defined in a controls list:
Property | Type | Description | Example Values |
id | String | The unique ID of the control |
id: textInput
|
modelPath | String | The property the control's value will be bound to |
modelPath: props.KEY
|
layout | String | The column to place the control in. Defaults to second-column. |
layout: first-column |
requiredForCreation | Boolean | A control with this property will be enabled (if disabled) and shown on the create form. |
requiredForCreation: true
|
config | Map | Control-specific configuration | See Config below |
validators | Map | Validators to be applied to the control's value | See Validators below |
restrictions | Map | Any restrictions to be applied to the control | See Restrictions below |
Config
The config property holds some common properties while mostly serving the purpose of custom configuration for the control.
Property | Type | Description | Example Values |
label | String | Text to show in the label above the control | label: Serial Number |
placeholder | String | Text to show in the input field when empty | placeholder: Enter a number |
tooltip | Map | Shows an icon with tooltip when hovered over. Supports a type of warning or danger. Defaults to a generic question mark icon. | tooltip: text: clockwise rotation from North type: warning |
invalidPatternMessage | String | Message to be displayed if a pattern validator is defined and the value is invalid | invalidPatternMessage: must start with a letter |
Validators
Property | Type | Description | Example Values |
required | Boolean | Whether the field is required or not. Add an asterisk (*) to the label. Controls are not required by default. |
required: true
|
minLength | Integer | Minimum number of characters allowed for string values. |
minLength: 4
|
maxLength | Integer | Maximum number of characters allowed for string values. |
maxLength: 10
|
min | Integer | Minimum value for number values. |
min: 1
|
max | Integer | Maximum value for number values. |
max: 100
|
pattern | String | A regular expression string to validate the value against. |
pattern: ^[a-zA-Z]*$
|
Restrictions
Property | Type | Description | Example Values |
disabled | Boolean | Whether to disable the control, preventing user interaction. Defaults to false (enabled). |
disabled: true
|
role | String | The minimum role a user must have to see the control. A control with a role that is higher than the user's role will not be shown in the form. |
role: ORGANIZATION_ADMIN |
Available Controls
Select a control from the list below to see a brief description and examples.
- actionButton
- calibrationFactors
- channelSplitMultiplexerConfig
- connectCodeInput
- culvertConfig
- enhReferenceLocation
- formSelect
- formTimePicker
- formToggle
- formMultiToggle
- frequencySelect
- geokonCalibrationFactors
- geosenseCalibrationFactors
- imagePreview
- ipiArrayConfig
- loadsensingPasswordInput
- locationInput
- milliampRangeConfig
- multiPortMultiplexerChannelConfig
- multiplexerChannelConfig
- numberInputWithUnit
- passwordInput
- portSelect
- powerSchedule
- referenceSensorConfig
- rstCalibrationFactors
- temperatureArrayConfig
- textInput
- textarea
- tiltMeterArrayConfig
- weirConfig
- zeroReferenceConfig
Comments
0 comments
Please sign in to leave a comment.