Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
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. This page explains how you can use this pattern in your interface, and walks through the design structure in detail.
The main components of this pattern are stamps, rich text display fields, and side by side layouts. They're configured to display the progress of a given task. The image below shows the pattern with callouts for the main components. You can examine the entire expression or jump down to the subsections with referenced line numbers to see a detailed breakdown of the main components.
When you drag and drop the milestone (stamp) pattern onto your interface, 147 lines of expression will be added to the section where you dragged it.
At the top of the pattern, local variables set up an array of icons that will be used as stamps for each milestone in the expression.
1
2
3
4
5
{
a!localVariables(
/* List of icons in milestone (stamp) */
local!milestoneStampIcons: {"plane", "ticket", "shopping-cart", "check"},
local!currentMilestoneStampStep: 2,
The first component we set up is the a!sideBySideLayout() function. Then, we list the different items we want to display side by side. Inside the items array, we use the a!forEach() looping function. We use this to iterate over every icon listed in the local variables section of the expression.
Once the looping function is set up, we use the conditional if() statement to configure which milestone has been reached by the user and to display the correct highlighted icons. This conditional styling based on the data that's displayed makes it easy for the viewer to quickly see how far their progress is on a task. Once the conditional styling is set up, we then use the a!stampField function to pick out the background color, icon, and size of the stamp we want to display.
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
/* Display stamps */
a!sideBySideLayout(
items: {
a!sideBySideItem(),
a!forEach(
items: local!milestoneStampIcons,
expression: if(
/* If final step is completed */
and(
fv!index = local!currentMilestoneStampStep,
fv!index = length(local!milestoneStampIcons)
),
a!sideBySideItem(
item: a!stampField(
icon: fv!item,
backgroundColor: "ACCENT",
size: "TINY"
),
width: "MINIMIZE"
),
This section uses a!sidebySideItem() and a!richTextDisplayField() to display the milestone in the pattern. We also use a!isPageWidth() to determine how to display the milestone on Appian Mobile application.
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextItem(
text: if(
a!isPageWidth("PHONE"),
repeat(2, char(9473)),
if(
a!isPageWidth("TABLET_PORTRAIT"),
repeat(3, char(9473)),
repeat(6, char(9473))
)
),
color: "ACCENT",
size: "LARGE"
)
),
width: "MINIMIZE"
)
The rest of the pattern follows the same set up as the above sections to configure future milestone steps to complete and determine if the final milestone step is complete.
