FunctionCopy link to clipboard
a!milestoneField( label, instructions, steps, links, active, labelPosition, helpTooltip, showWhen, orientation, accessibilityText, color, marginAbove, marginBelow, stepStyle )
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.
ParametersCopy link to clipboard
| Name | Keyword | Types | Description |
|---|---|---|---|
|
Label |
|
Text |
Text to display as the field label. |
|
Instructions |
|
Text |
Supplemental text about this field. |
|
Steps |
|
List of Text String |
Array of labels describing the sequence of steps. |
|
Links |
|
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(). |
|
Active |
|
Number (Integer) |
Index of the current step. When null, all steps are in the future. When -1, all steps are completed. |
|
Label Position |
|
Text |
Determines where the label appears. Valid values:
|
|
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 |
|
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. |
|
Orientation |
|
Text |
Determines the layout of the milestone steps. Valid values: |
|
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
|
Color |
|
Text |
Determines the fill color. Valid values: Any valid hex color or |
|
Margin Above |
|
Text |
Determines how much space is added above the layout. Valid values: |
|
Margin Below |
|
Text |
Determines how much space is added below the layout. Valid values: |
|
Step Style |
|
Text |
Determines the style of the milestone steps. When viewed in Appian Mobile, the default "LINE" style is used. Valid values: "LINE" (default), "CHEVRON", "DOT". |
Usage considerationsCopy link to clipboard
Using the active and links parametersCopy link to clipboard
- The active parameter can't be
0or 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 stepsCopy link to clipboard
- 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.
Milestone display optionsCopy link to clipboard
You can choose to display your milestones using three different styles using the stepStyle parameter: "LINE", "DOT", and "CHEVRON". You can also choose either horizontal or vertical orientation using the orientation parameter.
By default, the milestone uses "ACCENT" for the color. You can select a custom color for your milestone using the color parameter.
The following are some examples of how each style appears.
Line style example:
Dot style example:
Chevron style example:
Length of text valuesCopy link to clipboard
To ensure a professional and easy-to-read interface, use concise text values of similar length. The following adjustments will be applied automatically:
Trimming:
- Tabs, leading/trailing spaces, and line breaks will be removed.
- Double spaces between words will be reduced to one.
For each item in the steps array, there is no character limit, but text will truncate based on orientation:
- Horizontal Orientation: Up to three lines of text display, with character limits per line based on the number of steps and available horizontal space.
- Vertical Orientation: Text displays on a single line until space runs out.
Appian Mobile considerationsCopy link to clipboard
On Appian Mobile, the stepStyle parameter is ignored. When a milestone component is viewed in Appian Mobile, it will always display using the default "LINE" style.
ExamplesCopy link to clipboard
Use the interactive editor below to test out your code:
Horizontal milestoneCopy link to clipboard
Vertical milestoneCopy link to clipboard
Milestone with conditional color changingCopy link to clipboard
Milestone with chevron style status indicatorCopy link to clipboard
Milestone with dot style in wizardCopy link to clipboard
Feature compatibilityCopy link to clipboard
The table below lists this 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 | 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 | Compatible |
Related PatternsCopy link to clipboard
The following patterns include usage of the Milestone Component.
- Build a Wizard with Milestone Navigation (Conditional Display, Validation, Wizards): Create a wizard that divides a form into validated steps and uses the milestone component to display progress.