Function: a!tagField()
Displays a list of short text labels with colored background to highlight important attributes.
See also: Tag Item
Name | Keyword | Types | Description |
---|---|---|---|
Label |
|
Text |
Text to display as the field label. |
Label Position |
|
Text |
Determines where the label appears. Valid values:
|
Instructions |
|
Text |
Supplemental text about this field. |
Help Tooltip |
|
Text |
Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is |
Tags |
|
List of Variant |
List of tags to display. Configured using a!tagItem(). |
Alignment |
|
Text |
Determines alignment of the image(s). Valid values: |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Size |
|
Text |
Determines the size of the tags. Valid values: |
Visibility |
|
Boolean |
Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true. |
Notes
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
Display tags with custom colors
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a!tagField(
labelPosition: "COLLAPSED",
tags: {
a!tagItem(
text: "Silver Member",
backgroundColor: "#aaa9ad",
textColor: "#ffffff"
),
a!tagItem(
text: "Corporate Partner",
backgroundColor: "#990099"
)
},
size: "STANDARD"
)
Displays the following:
Display multiple tags using looping
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a!localVariables(
local!skills: {"Problem-Solving", "Communication", "Creativity", "Project Management"},
a!tagField(
label: "Skills",
labelPosition: "ABOVE",
tags: a!forEach(
items: local!skills,
expression: a!tagItem(
text: fv!item,
backgroundColor: "ACCENT"
)
),
size: "STANDARD"
)
)
Displays the following:
The following patterns include usage of the Tag Component.