Stamp Component

On This Page

Function

a!stampField( label, labelPosition, instructions, helpTooltip, icon, text, backgroundColor, contentColor, size, align, tooltip, showWhen, accessibilityText, link, marginAbove, marginBelow, shape )

Displays an icon and/or text on a colored 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. In the component configuration pane, you can click SUGGEST ICON to use AI to suggest an icon based on the label and instructions. If both the label and instructions aren't simple text strings, this option is disabled.
Text	text	Text	Text to display within the stamp.
Background Color	backgroundColor	Text	Determines the background color. Valid values: Any valid hex color or hex color including transparency, or `"ACCENT"` (default), `"POSITIVE"`, `"NEGATIVE"`, `"WARN"`, `"SECONDARY"`, `"TRANSPARENT"`. If `"TRANSPARENT"` is selected, the circle border will take on the content color and the circle fill will be transparent. To add transparency to the hex color, add two additional digits between 00 (more transparent) and FF (less transparent).
Content Color	contentColor	Text	Determines the icon color. Valid values: Any hex color or `"STANDARD"` (default), `"ACCENT"`, `"POSITIVE"`, `"NEGATIVE"`, `"WARN"`.
Size	size	Text	Determines the size of the stamp. Valid values: `"EXTRA_TINY"`, `"TINY"`, `"SMALL"`, `"MEDIUM"` (default), `"LARGE"`.
Alignment	align	Text	Determines alignment of the stamp. Valid values: `"START"`, `"CENTER"` (default), `"END"`.
Stamp Tooltip	tooltip	Text	Text to display on mouseover (web) or tap (mobile).
Show When	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()`.
Margin Above	marginAbove	Text	Determines how much space is added above the layout. Valid values: `"NONE"` (default), `"EVEN_LESS"`, `"LESS"`, `"STANDARD"`, `"MORE"`, `"EVEN_MORE"`.
Margin Below	marginBelow	Text	Determines how much space is added below the layout. Valid values: `"NONE"`, `"EVEN_LESS"`, `"LESS"`, `"STANDARD"` (default), `"MORE"`, `"EVEN_MORE"`.
Shape	shape	Text	Determines the stamp shape. Valid values: `"ROUNDED"` (default), `"SEMI_ROUNDED"`, `"SQUARED"`.

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

Use the interactive editor below to test out the example code.

Stamp with an ACCENT background

a!stampField(
  label: "Stamp",
  labelPosition: "COLLAPSED",
  backgroundColor: "ACCENT",
  icon: "STAR",
  contentColor: "STANDARD"
)

Stamp with a TRANSPARENT background

a!stampField(
  label: "Stamp",
  labelPosition: "COLLAPSED",
  backgroundColor: "TRANSPARENT",
  icon: "HOME",
  contentColor: "POSITIVE" 
)

Stamp with text

{
  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"
        )
      )
    }
  )
}

Stamps with dynamic links

{
  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
      )
    }
  )
}

Feature compatibility

The table below lists this component's compatibility with various features in Appian.

Feature	Compatibility	Note
Portals	Compatible
Offline Interfaces	Compatible
Sync-Time Custom Record Fields	Incompatible
Real-Time Custom Record Fields	Incompatible	Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.
Process Reports	Incompatible	Cannot be used to configure a process report.
Process Events	Incompatible	Cannot be used to configure a process event node, such as a start event or timer event.
Process Autoscaling	Incompatible	Cannot be used in autoscaled processes.
Event Consumer Filter Conditions	Compatible	Can be used in filter conditions.
Event Consumer Event Handlers	Compatible	Can be used in event handler expressions.

The following recipes 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.
Cards as Info Pattern (Cards, Formatting, Stamps):
Use this pattern to display high level summaries of options with icons and descriptions. This pattern uses card layouts with stamp fields and rich text to create visually distinct information cards.
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 Patterns (Looping):
There are two options for milestone patterns which all display some form of a progress indicator to guide users through a series of steps.
Navigation Patterns (Conditional Display, Formatting, Navigation):
Use the navigation patterns to help orient users and enable them to easily navigate pages and content.
Stamp Steps (Numbered) (Stamps):
Use the stamp steps (numbered) pattern to show steps that require context or explanation.

Feedback

Was this page helpful?