Milestone Component

Milestone

Function: a!milestoneField()

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.

Parameters

Name Keyword Type Description
Label label Text Optional text to display as the field label.
Label Position labelPosition Text Optional text to determine where the label appears. Valid values include
  • "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 Optional text displayed beneath the label.
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".
Steps steps Text Array Array of values to display as the ordered steps in the sequence.
Active active Integer One-based index matched with the Steps argument that identifies the current step in the sequence.
Links links Array of Links Array of links to apply to steps. Create links with
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.

Notes

  • The Steps array must contain at least two items.
  • There is no maximum character limit for each item in the Steps array; however, only the first three lines of the text displays. The number of characters allowed for each line is determined by the number of steps in the component and if the component is displayed in a single or two-column layout. Components with a high number of steps and in a two-column layout allow for the least amount of characters on each line. Appian recommends using concise text values of similar length and keeping the number of items in the steps array to seven.
  • Any tabs, leading or trailing spaces, and leading or trailing line breaks are trimmed. Spaces between words are trimmed down to one space.
  • When viewed on a mobile device, the milestone component scrolls instead of shrinking the step width.
  • The text for the active step is always black. If no link is configured, the text for completed steps is light gray, whereas the text for future steps is dark gray. If a link is configured, the text is accent-colored.
  • The milestone bar is accent-colored above completed and current steps and gray above future steps.
  • The Active argument can't be 0 or greater than the total number of items in the steps array. 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.

Examples

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

Milestone in a One-Column Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
=a!milestoneField(
  label: "Home Repair Claim Process",
  instructions: "Customer #2325691",
  steps: {
    "Submit Customer Request", 
    "Set Up On-Site Appt", 
    "File Assessment", 
    "Submit Proposal", 
    "Submit Agreement", 
    "Finalize Repairs"
  },
  active: 3
)

Displays the following:

FEEDBACK