Widgets
Applications
Form
Column widgets related to form elements
Subtitle
The Subtitle widget does not store any data. It adds a subtitle to the form.
Text
Use this widget to edit text values. There is no length limit on how much text you can provide.
​
​
​
MultilineText
Use this widget to edit text with multiple lines.
​
​
​
RichText
Use this widget to edit text with formatting. It supports HTML code as the default value.
Number
Use this widget to edit the numeric value. The value can be positive (+), negative (-), integer, or float.
​
​
​
Configuration:
1
{
2
"constraints": { # (optional) - the additional constraints to the value.
3
"min": 0, # (optional) - the allowed minimal value
4
"max": 100 # (optional) - the allow maximal value
5
},
6
"warnings": { # (optional) - flag the value when all conditions are met.
7
"gte": 0, # (optional) - greater than or equal to
8
"gt": 0, # (optional) - greater than
9
"lte": 100, # (optional) - less than or equal to
10
"lt": 100, # (optional) - less than
11
},
12
"format": { # (optional) - the number in the wNumb format.
13
"mark": '.',
14
"thousand": ',',
15
"prefix": '#x27;
16
} # Learn more at https://refreshless.com/wnumb/
17
}
Copied!
Date
Use this widget to edit the date value. A date picker is provided to select the date.
​
​
​
Configuration:
1
{
2
"format": "YYYY-MM-DD", # (optional)
3
# default to "YYYY-MM-DD"
4
# check the format detail at https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/
5
}
Copied!
Time
Use this widget to pick a time. Currently, Labii supports time in 30-min intervals.
​
​
​
Configuration:
1
{
2
"format": "HH:mm:ss", # (optional)
3
# default to "HH:mm:ssj"
4
# check the format detail at https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/
5
}
Copied!
DateTime
Use this widget to pick a date and time. This widget is a combination of the Date and Time widget.
​
​
​
Default value:
1
{
2
"date": "2018-01-01",
3
"time": "10:23"
4
}
Copied!
Configuration:
1
{
2
"format": "YYYY-MM-DD HH:mm:ss", # (optional)
3
# default to "YYYY-MM-DD HH:mm:ss"
4
# check the format detail at https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/
5
}
Copied!
TimeStamp
This widget will generate an automatic time stamp in the ISO format. Click the reload button to refresh the timestamp.
​
​
Configuration:
1
{
2
"should_auto_update_when_empty": true, # (optional) - default to true
3
# If true, the widget will perform live calculation when the data is empty
4
# If false, the results will not be calculated on default
5
"format": "YYYY-MM-DD", # (optional)
6
# check the format detail at https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/
7
}
Copied!
Appointment
Use this widget to set an appointment and add the appointment calendar. Currently, Google calendar is supported.
​
​
​
Default value:
1
{
2
"date_start": "",
3
"time_start": "",
4
"date_end": "",
5
"time_end": ""
6
}
Copied!
Boolean
Use this widget to edit the boolean value.
​
​
​
Select
Use this widget to choose a value from the dropdown list. The items of the dropdown list are defined in the default value field of column settings. The widget can be used for controlled vocabulary.
​
​
​
Configuration
1
# Provide list of options, one item per line
2
Option 1
3
Option 2
4
...
5
# Provide list of options, separated by ','
6
Option 1, Option 2, ...
Copied!
Default value
1
Option 1 # the value of a option
Copied!
MultiSelect
Use this widget to choose multiple values from the dropdown list. It is identical to the Select widget except that more than one value can be selected.
​
​
​
The configuration is identical to the Select widget.
Default value
1
Option 1, Option 2 # multiple values
Copied!
ForeignKey
Use this widget to link to one other record. The linked record is clickable.
​
​
​
Configuration
1
EP,SP # List of Unique Code separated by ','.
2
# Leave it empty to include all tables
Copied!
Default value
1
{"sid": "xxx", "name": "xxx"} # Python json
Copied!
ForeignKeys
Use this widget to link to many other records. The usage is the same as ForeignKey.
​
​
​
The configuration of ForeignKeys is identical to ForeignKey
Default value
1
[
2
{"sid": "xxx", "name": "xxx"},
3
{"sid": "xxx", "name": "xxx"},
4
] # Python json
Copied!
Member
Use this widget to choose a member. Use this widget to assign a task to a member.
​
​
​
- Only the active member is choosable.
- The widget is searchable. If you did not find the member you want, type in a name at the top of the dropdown.
Configuration
1
{
2
"team__sid": "xxx", # (optional) - team sid to limit team member to be selected
3
"should_notify_member": true,
4
# (optional) - should create an notification, default to false, optional
5
"subject": "xxx", # (optional) - email subject
6
# subject variables
7
# {{UID}} - the UID of the current record
8
# {{NAME}} - the Name of the current record
9
"body": "xxx", # (optional) - email body
10
# both subject and body support the following variables
11
# {{UID}}
12
# {{NAME}}
13
# {{ROW}} - the current row with link
14
"should_email": false, # (optional)
15
# should sent an email anyway, default to false
16
}
Copied!
Default value
1
{
2
"name": "", # name of the member
3
"sid": "" # sid of the personnel
4
}
Copied!
Members
​
​
​
The configuration is identical to Member
Default value
1
[
2
{
3
"name": "", # name of the member
4
"sid": "" # sid of the personnel
5
}
6
]
Copied!
Image
Use this widget to display the image of a record. For example, display the molecular structure of a chemical.
To delete the image, click the edit icon and then click X.
​
​
​
​
Secret
Use this widget to hide sensitive data. The value will be displayed as "****". Use it for password or salary, etc.
​
​
​
To display the hidden value, click the "view" icon to display.
​
​
Rating
A rating is an evaluation or assessment of something, in terms of quality, quantity, or some combination of both. Use the Rating widget to rate:
​
​
​
Barcode
Display a barcode using this widget. If no value is provided, the UID will be used.
​
​
​
Configuration:
1
{
2
"format": "CODE128", // (optional), default to CODE128, check https://github.com/lindell/JsBarcode/wiki#barcodes for all options
3
"height": 30, // (optional), default to 30
4
"width": 2, // (optional), default to 2
5
"margin": 2, // (optional), default to 2
6
"displayValue": true, // (optional), default to true. Set to false to hide value
7
"fontSize": 12, // (optional), default to 12
8
}
Copied!
QR Code
Display a QR code using this widget. If no value is provided, the UID will be used.
​
​
​
Configuration:
1
{
2
"width": 30, // (optional), default to 30
3
"level": "L", // (optional), default to L. QR Error correction level. Choice of L, M, Q, H
4
}
Copied!
Address
Collect address information with this widget.
​
​
​
NestedFields
Use NestedFields to track more than one item. For example, you can use NestedFields to track how many books are ordered:
- Book 1, ordered 10
- Book 2, ordered 5
​
​
Configuration
1
{ # use the propterties from https://react-jsonschema-form.readthedocs.io/en/latest/
2
"properties": { # (required)
3
"book": {
4
"type": "string",
5
"title": "Book",
6
"description": "Select a book.",
7
"enum": ["Book 1", "Book 2"],
8
"enumNames": ["Book 1", "Book 2"],
9
"widget": "MaterialFormSelect",
10
"default": "Book 1"
11
},
12
"quantity": {
13
"type": "number",
14
"title": "Quantity",
15
"description": "The quantity book to order.",
16
"widget": "MaterialFormNumber",
17
"min": 1,
18
"default": 1
19
}
20
},
21
"minItems": 1, # number of nested fields to load on default
22
"items": [], # (optional), if provided, it will overwrite the properties
23
"required": [
24
"test",
25
"quantity"
26
]
27
}
Copied!
​
Last modified 2mo ago