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.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when parent's layout is neither "flex" nor "grid".

When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.

Flex Grow

Specifies if the objects should grow to fill the available space.

Attribute Values

Value	Description
false	Default value. Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

Attribute Values

Value	Description
false	Default value. Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when parent's layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Width

Sets the object's width in pixels.

Minimum value is 1.

Height

Sets the object's height in pixels.

Minimum value is 32.

Tags

Data Mode

Specifies the object's data mode, which controls how the tags are populated.

Attribute Values

Value	Description
items	Default value. Items.
datasource	Datasource.

The default value is: items.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Tags

Specifies the tag items.

Attribute Values

Value	Description	Example
<JSON array>	Tag items.	[{"label":"Maintenance","enabled":false,"icon":"icon:mdi#wrench"}]

This attribute is available when datamode is "items".

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.

This attribute is available when datamode is "datasource".

Options

Delete Button

Displays a delete button on each tag.

Attribute Values

Value	Description
true	Delete button is displayed.
false	Default value. Delete button is hidden.

The default value is: false.

New Tag

Displays a new tag button.

Attribute Values

Value	Description
true	New tag button is displayed.
false	Default value. New tag button is hidden.

The default value is: false.

New Tag Label

Specifies the new tag button label.

Attribute Values

Value	Description
<string>	Label text.

This attribute is available when newtag is "true".

Commands

Command Name

Specifies the command name used to send all tags related commands (see the Command attribute).

Attribute Values

Value	Description
<string>	Command name.

By default, this attribute uses the id attribute.

Commands

Specifies the set of commands that are sent to the server when the user performs specific actions.

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.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

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.

note

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.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.