UI Controls

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

Screen_Shot_2019-11-25_at_12.51.04_PM.png

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 layout: second-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 role: SUPER_ADMIN

Available Controls

Select a control from the list below to see a brief description and examples.

We've Moved!

Articles in this section