Function: a!stampField()
Displays an icon and/or text on a colored circular border. Best used as a decorative component to add visual interest to your page. This feature is perfect for drawing attention to important content and reduces the need for custom images.
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 |
Icon |
|
Text |
Icon to display inside the stamp. See the documentation for details. |
Text |
|
Text |
Text to display within the stamp. |
Background Color |
|
Text |
Determines the background color. Valid values: Any valid hex color or |
Content Color |
|
Text |
Determines the icon color. Valid values: Any hex color or |
Size |
|
Text |
Determines the size of the stamp. Valid values: |
Align |
|
Text |
Determines alignment of the stamp. Valid values: |
Tooltip |
|
Text |
Text to display on mouseover (web) or tap (mobile). |
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. |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Notes
"TRANSPARENT"
background displays an icon and/or text with a colored circular border. The contentColor
will be used for the icon, text, and circular border.Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
1
2
3
4
5
6
7
a!stampField(
label: "Stamp",
labelPosition: "COLLAPSED",
backgroundColor: "ACCENT",
icon: "STAR",
contentColor: "STANDARD"
)
Displays the following:
1
2
3
4
5
6
7
a!stampField(
label: "Stamp",
labelPosition: "COLLAPSED",
backgroundColor: "TRANSPARENT",
icon: "HOME",
contentColor: "POSITIVE"
)
Displays the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!stampField(
backgroundColor: "#cc0000",
text: "1",
align: "END"
)
),
a!sideBySideItem(
item: a!stampField(
backgroundColor: "#cc0000",
text: "2",
align: "CENTER"
)
),
a!sideBySideItem(
item: a!stampField(
backgroundColor: "#cc0000",
text: "3",
align: "START"
)
)
}
)
}
Displays the following:
The following patterns include usage of the Stamp Component.
Activity History Pattern (Formatting): The Activity History pattern provides a common style and format for displaying an organization's activity measures.
Form Steps Pattern (Stamps): Use the form steps patten to break down complicated forms into a series of quickly completed steps that are well organized and easy to navigate. This pattern uses a combination of cards and rich text to create steps that can represent fields from one or more interfaces.
Milestone Stamp Pattern (Looping): Use the milestone stamp pattern to visually guide users through sequential steps to complete tasks and show users their progress as they move through the steps.
Stamp Steps Patterns (Stamps): There are two similar stamp steps patterns. The stamp steps (icon) pattern is primarily icons and titles. It should be used for simple steps that don't require much information or instruction. The stamp steps (numbered) pattern is primarily text and should be used for steps that require context or explanation.