Tags
The tags object is a visual container for tag items, used for categorizing or labeling content.
Tags are typically short strings of text that can be used to label an entity, display a list of selected items, create filters, define categories, and more.
Commands can be used to send the tags to the server when the user adds, deletes, or selects them.
Attributes
Common
ID
Sets the object's ID.
The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.
The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.
IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.
E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:
Value binding:
="mybutton" + ui('button', 'address')
UISet:
UISet('button', 'address', '1') switches the ID to mybutton1
UISet('button', 'address', '2') switches the ID to mybutton2
Position and Size
Position
Sets the object's position.
The default value is: x0y0.
Attribute Values
| Value | Description | Example |
|---|---|---|
| x<left>y<top> | Specify left/top coordinates in pixels. | x10y20 |
Flex Grow
Specifies if the objects should grow to fill the available space.
The default value is: true.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Objects expand to fill the available space. |
| false | Objects do not grow to fill the available space. |
Flex Shrink
Specifies if the objects should shrink to fit the available space.
The default value is: true.
Attribute Values
| Value | Description |
|---|---|
| true | Default value. Objects shrink to fit the available space. |
| false | Objects do not shrink to fit the available space. |
Width
Sets the object's width in pixels.
Minimum value is 1.
Height
Sets the object's height in pixels.
Minimum value is 1.
Tags
Data Mode
Specifies the object's data mode, which controls how the tags are populated.
The default value is: items.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Attribute Values
| Value | Description |
|---|---|
| items | Default value. Items. |
| datasource | Datasource. |
Tags
Specifies the tag items.
For the full item reference, see Tag Item.
Attribute Values
| Value | Description | Example |
|---|---|---|
| <JSON array> | Tag items. | [{"label":"Maintenance","enabled":false,"icon":"icon:mdi#wrench"}] |
Datasource ID
The datasource ID that connects to the object to define its tags. The datasource needs to define at least a key and a label column for each tag. It can also specify a column for each of the other tag attributes.
Attribute Values
| Value | Description |
|---|---|
| [Datasource ID] | The datasource ID as defined on the server. |
Options
Delete Button
Displays a delete button on each tag.
The default value is: false.
Attribute Values
| Value | Description |
|---|---|
| true | Delete button is displayed. |
| false | Default value. Delete button is hidden. |
New Tag
Displays a new tag button.
The default value is: false.
Attribute Values
| Value | Description |
|---|---|
| true | New tag button is displayed. |
| false | Default value. New tag button is hidden. |
New Tag Label
Specifies the new tag button label.
Attribute Values
| Value | Description |
|---|---|
| <string> | Label text. |
Commands
Command Name
Specifies the command name used to send all tags related commands (see the Command attribute).
The default value is: =id.
Attribute Values
| Value | Description |
|---|---|
| <string> | Command name. |
Commands
Specifies the set of commands that are sent to the server when the user performs specific actions.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Attribute Values
| Value | Description |
|---|---|
| add | Sends a command when the user adds a tag (confirms the add). The command parameter is a JSON: { "action": "insert", "data": { "<field name>": "<value>", ... } }The data property is a JSON containing the values of the fields of the inserted row. |
| delete | Sends a command when the user confirms the deletion of a tag. The command parameter is a JSON: { "action": "delete", "key": "<row key>" }The keys property is an array of all the deleted tags' keys. |
| select | Sends a command when the user selects a tag. The command parameter is a JSON: { "action": "select", "key": "<row key>" }The keys property is an array of all the selected tags' keys. |
Meta
Comment
Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Exclude
Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.
The default value is: false.
This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.
Attribute Values
| Value | Description |
|---|---|
| false | Default value. Object is included in the UI. |
| true | Object is excluded from the UI. |