Free cookie consent management tool by TermsFeed Milestone Component (a!milestoneField)
Milestone Component


a!milestoneField( label, instructions, steps, links, active, labelPosition, helpTooltip, showWhen, orientation, accessibilityText, color, marginAbove, marginBelow )

Displays the completed, current, and future steps of a process or sequence, such as a user's current step in a wizard or the current state of a business process.


Name Keyword Types Description




Text to display as the field label.




Supplemental text about this field.



List of Text String

Array of labels describing the sequence of steps.



List of Variant

Array of links to apply to the steps. Create links with a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!safeLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), or a!authorizationLink().



Number (Integer)

Index of the current step. When null, all steps are in the future. When -1, all steps are completed.

Label Position



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.

Help Tooltip



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




Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.




Determines the layout of the milestone steps. Valid values: "HORIZONTAL" (default), "VERTICAL".

Accessibility Text



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




Determines the fill color. Valid values: Any valid hex color or "ACCENT" (default), "POSITIVE", "NEGATIVE", "WARN".

Margin Above



Determines how much space is added above the layout. Valid values: "NONE" (default), "EVEN_LESS", "LESS", "STANDARD", "MORE", "EVEN_MORE".

Margin Below



Determines how much space is added below the layout. Valid values: "NONE", "EVEN_LESS", "LESS", "STANDARD" (default), "MORE", "EVEN_MORE".

Usage considerations

  • The active parameter can't be 0 or greater than the total number of items in the steps parameter. If it's null, all steps display as future steps. If it's -1, all steps display as completed.
  • Each item in the links array renders the corresponding item in the steps array as a link. An item in the steps array for which there is a null value or no value in the links array will render as plain text. There is no need to pad the end of the steps array with null.

Number and width of steps

  • The steps parameter must contain at least two items. We recommend that steps contains no more than seven items.
  • When viewed on a mobile device, the milestone component scrolls instead of shrinking the step width.

Length of text values

  • For an easy to read and professional looking interface, use concise text values of similar length.
  • The following will be trimmed:
    • Indentations using tab.
    • Leading or trailing spaces.
    • Leading or trailing line breaks.
  • Two spaces between words will be shortened to one.
  • There is no maximum character limit for each item in the steps array; however, text is truncated based on the following:
    • Vertical Orientation: The first three lines of the text displays. The number of characters allowed for each line is determined by the number of steps and the amount of horizontal space for the component.
    • Horizontal Orientation: Text displays on a single line until it runs out of horizontal space.

Milestone and step color

  • By default, the milestone bar shows the accent color above completed and current steps and gray above future steps. You can select a custom color for your milestone in the color parameter.
  • Text colors:
    • Active step: black.
    • Completed step with no link: light gray.
    • Future steps: dark gray.
    • Text with a link: accent color.


Use the interactive editor below to test out your code:

Horizontal milestone

Vertical milestone

Milestone with conditional color changing

gif of a milestone that changes color from red, to yellow, to green as it progresses through the milestone steps

Feature compatibility

The table below lists this SAIL component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Sync-Time Custom Record Fields Incompatible
Real-Time Custom Record Fields Incompatible
Process Reports Incompatible

You cannot use this function to configure a process report.

Process Events Incompatible

You cannot use this function to configure a process event node, such as a start event or timer event.

The following patterns include usage of the Milestone Component.

Milestone Component