Stamp Component

Stamp component

Function: a!stampField()

Displays an icon and/or text on a circular background. They are 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.

Stamps can include a link and are an alternative style in places where you might otherwise use a button or a link.

Parameters

Name Keyword Types Description

Label

label

Text

Text to display as the field label.

Label Position

labelPosition

Text

Determines where the label appears. Valid values:

  • "ABOVE" (default) Displays the label above the component.
  • "ADJACENT" Displays the label to the left of the component.
  • "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information.
  • "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page.

Instructions

instructions

Text

Supplemental text about this field.

Help Tooltip

helpTooltip

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 "COLLAPSED".

Icon

icon

Text

Icon to display inside the stamp. See the documentation for details.

Text

text

Text

Text to display within the stamp.

Background Color

backgroundColor

Text

Determines the background color. Valid values: Any valid hex color or "ACCENT" (default), "POSITIVE", "NEGATIVE", "SECONDARY", "TRANSPARENT". If "TRANSPARENT" is selected, the circle border will take on the content color and the circle fill will be transparent.

Content Color

contentColor

Text

Determines the icon color. Valid values: Any hex color or "STANDARD" (default), "ACCENT", "POSITIVE", "NEGATIVE".

Size

size

Text

Determines the size of the stamp. Valid values: "TINY", "SMALL", "MEDIUM" (default), "LARGE".

Align

align

Text

Determines alignment of the stamp. Valid values: "START", "CENTER" (default), "END".

Tooltip

tooltip

Text

Text to display on mouseover (web) or tap (mobile).

Visibility

showWhen

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

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Link

link

Any Type

Link to apply to the stamp. Create a link with a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!safeLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), or a!authorizationLink().

Usage considerations

Stamp color

  • A stamp with a "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.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Stamp with an ACCENT background

1
2
3
4
5
6
7
a!stampField(
  label: "Stamp",
  labelPosition: "COLLAPSED",
  backgroundColor: "ACCENT",
  icon: "STAR",
  contentColor: "STANDARD"
)

Displays the following:

screenshot of an accent stamp with a star icon

Stamp with a TRANSPARENT background

1
2
3
4
5
6
7
a!stampField(
  label: "Stamp",
  labelPosition: "COLLAPSED",
  backgroundColor: "TRANSPARENT",
  icon: "HOME",
  contentColor: "POSITIVE" 
)

Displays the following:

screenshot of a transparent stamp with a home icon and positive content color

Stamp with text

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:

screenshot of three red stamps containing the numbers 1,2, and 3.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
{
  a!localVariables(
    /* The selected navigation section */
    local!activeNavSection: 1,
    /* The navigation sections */
    local!navSections: {
      a!map(name: "Workspace", icon: "briefcase"),
      a!map(name: "Tasks",     icon: "tasks"),
      a!map(name: "Requests",  icon: "paper-plane"),
      a!map(name: "Calendar",  icon: "calendar"),
      a!map(name: "My Time",   icon: "clock-o"),
      a!map(name: "Expenses",  icon: "money")
    },
    {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!forEach(
                items: local!navSections,
                expression: { 
                  a!stampField(
                    labelPosition: "COLLAPSED",
                    icon: fv!item.icon,
                    backgroundColor: if(
                      fv!index = local!activeNavSection,
                      "ACCENT",
                      "SECONDARY"
                    ),
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: local!activeNavSection
                    ),
                    size: "MEDIUM",
                    align: "CENTER"
                  )
                }
              )
            },
            width: "NARROW"
          ),
          a!columnLayout(
            contents: {
              choose(
                local!activeNavSection,
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {
                    a!richTextDisplayField(
                      value: a!richTextItem(
                        text: "Put your workspace content here."
                      )
                    )
                  }
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {
                    a!richTextDisplayField(
                      value: a!richTextItem(
                        text: "Put your tasks content here."
                      )
                    )
                  }
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {
                    a!richTextDisplayField(
                      value: a!richTextItem(
                        text: "Put your requests content here."
                      )
                    )
                  }
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {
                    a!richTextDisplayField(
                      value: a!richTextItem(
                        text: "Put your calendar content here."
                      )
                    )
                  }
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {
                    a!richTextDisplayField(
                      value: a!richTextItem(
                        text: "Put your time management content here."
                      )
                    )
                  }
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {
                    a!richTextDisplayField(
                      value: a!richTextItem(
                        text: "Put your expenses content here."
                      )
                    )
                  }
                )
              )
            }
          )
        },
        spacing: "SPARSE",
        showDividers: true
      )
    }
  )
}

Displays the following:

screenshot of a sidebar navigation containing stamps with icons

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.

  • Comments Patterns (Comments, Looping): Use this pattern when displaying a chronological list of messages from different users, such as comments on a topic or notes on a case.

  • Form Steps (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.

  • Navigation Patterns (Conditional Display, Formatting): Use the navigation patterns to help orient users and enable them to easily navigate pages and content.

  • Stamp Steps (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.

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK