Milestone (Vertical) - skipping a step

Question

Hi All, 
 
 Does anyone know if its possible to skip steps in a vertical milestone? What I mean is that the stamp can stay grayed out based on a value, and then if it was skipped only the first and third would be green, is this possible? I have tried a few things but it still keeps the linear flow. 
 Like in this case if I went from claim filed to estimate issued , all 3 stamps are green, I would want Green - grey - green because technically the second one didn't happen. 
 or another option could be to hide the middle stamp too. but not sure if that can be done. 
 {
 a!localVariables(
 local!verticalSteps: {
 a!map(name: "Claim Filed", icon: "archive", date: today() - 5, isCompleted: true),
 a!map(name: "Vehicle Inspected", icon: "search", date: today() - 4, isCompleted: true),
 a!map(name: "Estimate Issued", icon: "file-text-o", date: null, isCompleted: false),
 a!map(name: "Payment Sent", icon: "money", date: null, isCompleted: false),
 a!map(name: "Claim Closed", icon: "stamp", date: null, isCompleted: false)
 },
 a!sectionLayout(
 label: "Claim Progress",
 labelSize: "MEDIUM",
 labelColor: "STANDARD",
 contents: {
 a!forEach(
 items: local!verticalSteps,
 expression: {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 if(
 fv!item.isCompleted,
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: "check",
 backgroundColor: "POSITIVE",
 contentColor: "STANDARD",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Completed Step"
 ),
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: fv!item.icon,
 backgroundColor: "#d9d9d9",
 contentColor: "#666666",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Future Step"
 )
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: fv!item.name,
 size: "STANDARD",
 style: if(
 fv!item.isCompleted,
 "STRONG",
 "PLAIN"
 )
 )
 },
 preventWrapping: true,
 marginBelow: "NONE"
 ),
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: text(fv!item.date, "MMMM D"),
 size: "SMALL"
 )
 },
 preventWrapping: true,
 showWhen: fv!item.isCompleted,
 marginBelow: "NONE"
 )
 }
 )
 },
 alignVertical: "MIDDLE",
 marginAbove: if(
 fv!isFirst,
 "STANDARD",
 "NONE"
 ),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!imageField(
 labelPosition: "COLLAPSED",
 images: {
 a!documentImage(
 document: a!EXAMPLE_VERTICAL_CONNECTOR_IMAGE()
 )
 },
 size: "TINY",
 align: "CENTER"
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout()
 },
 alignVertical: "MIDDLE",
 showWhen: not(fv!isLast),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 )
 }
 )
 }
 )
 )
}

EREN_YEAGER · Accepted Answer

To bypass a milestone step, begin by determining the specific step or steps to skip. This determination can be made through the step index (e.g., -3), the step label (if all labels are unique), or by assigning unique IDs to each step. This information is crucial for our conditional logic, which dictates whether to display steps in green or grey, in conjunction with the "isCompleted" value. for 'or another option could be to hide the middle stamp too. but not sure if that can be done.' this you can Identify the step as described above and remove the step from the variable. both can be done

Konduru Chaitanya · Answer

Hello Maria Yes it is possible to achieve that. Your milestone will always show the desired output based on the data that you pass and the existing conditions that you have configured. You can simply change the data in your code snippet to test it out. You can also remove the field or have your stamps dynamically based on your data. {
 a!localVariables(
 local!verticalSteps: {
 a!map(name: "Claim Filed", icon: "archive", date: today() - 5, isCompleted: true),
 a!map(name: "Vehicle Inspected", icon: "search", date: today() - 4, isCompleted: true),
 a!map(name: "Estimate Issued", icon: "file-text-o", date: null, isCompleted: false),
 a!map(name: "Payment Sent", icon: "money", date: today()-3, isCompleted: true),
 a!map(name: "Claim Closed", icon: "stamp", date: null, isCompleted: false)
 },
 a!sectionLayout(
 label: "Claim Progress",
 labelSize: "MEDIUM",
 labelColor: "STANDARD",
 contents: {
 a!forEach(
 items: local!verticalSteps,
 expression: {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 if(
 fv!item.isCompleted,
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: "check",
 backgroundColor: "POSITIVE",
 contentColor: "STANDARD",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Completed Step"
 ),
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: fv!item.icon,
 backgroundColor: "#d9d9d9",
 contentColor: "#666666",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Future Step"
 )
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: fv!item.name,
 size: "STANDARD",
 style: if(
 fv!item.isCompleted,
 "STRONG",
 "PLAIN"
 )
 )
 },
 preventWrapping: true,
 marginBelow: "NONE"
 ),
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: text(fv!item.date, "MMMM D"),
 size: "SMALL"
 )
 },
 preventWrapping: true,
 showWhen: fv!item.isCompleted,
 marginBelow: "NONE"
 )
 }
 )
 },
 alignVertical: "MIDDLE",
 marginAbove: if(
 fv!isFirst,
 "STANDARD",
 "NONE"
 ),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!imageField(
 labelPosition: "COLLAPSED",
 images: {
 a!documentImage(
 document: a!EXAMPLE_VERTICAL_CONNECTOR_IMAGE()
 )
 },
 size: "TINY",
 align: "CENTER"
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout()
 },
 alignVertical: "MIDDLE",
 showWhen: not(fv!isLast),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 )
 }
 )
 }
 )
 )
} When there are not enough markers your milestone will automatically have the minimal stamps {
 a!localVariables(
 local!verticalSteps: {
 a!map(name: "Claim Filed", icon: "archive", date: today() - 5, isCompleted: true),
 a!map(name: "Estimate Issued", icon: "file-text-o", date: null, isCompleted: false),
 a!map(name: "Claim Closed", icon: "stamp", date: today()-3, isCompleted: true)
 },
 a!sectionLayout(
 label: "Claim Progress",
 labelSize: "MEDIUM",
 labelColor: "STANDARD",
 contents: {
 a!forEach(
 items: local!verticalSteps,
 expression: {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 if(
 fv!item.isCompleted,
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: "check",
 backgroundColor: "POSITIVE",
 contentColor: "STANDARD",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Completed Step"
 ),
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: fv!item.icon,
 backgroundColor: "#d9d9d9",
 contentColor: "#666666",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Future Step"
 )
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: fv!item.name,
 size: "STANDARD",
 style: if(
 fv!item.isCompleted,
 "STRONG",
 "PLAIN"
 )
 )
 },
 preventWrapping: true,
 marginBelow: "NONE"
 ),
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: text(fv!item.date, "MMMM D"),
 size: "SMALL"
 )
 },
 preventWrapping: true,
 showWhen: fv!item.isCompleted,
 marginBelow: "NONE"
 )
 }
 )
 },
 alignVertical: "MIDDLE",
 marginAbove: if(
 fv!isFirst,
 "STANDARD",
 "NONE"
 ),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!imageField(
 labelPosition: "COLLAPSED",
 images: {
 a!documentImage(
 document: a!EXAMPLE_VERTICAL_CONNECTOR_IMAGE()
 )
 },
 size: "TINY",
 align: "CENTER"
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout()
 },
 alignVertical: "MIDDLE",
 showWhen: not(fv!isLast),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 )
 }
 )
 }
 )
 )
}

JayaPrakash Ravipati · Answer

Hi Maria 
 it can be possible but after completing certain step in you code you need to update the isCompleted to true. {
 a!localVariables(
 local!verticalSteps: {
 a!map(name: "Claim Filed", icon: "archive", date: today() - 5, isCompleted: true),
 a!map(name: "Vehicle Inspected", icon: "search", date: today() - 4, isCompleted: true),
 a!map(name: "Estimate Issued", icon: "file-text-o", date: null, isCompleted: false),
 a!map(name: "Payment Sent", icon: "money", date: null, isCompleted: false()),
 a!map(name: "Claim Closed", icon: "stamp", date: null, isCompleted: true())
 },
 a!sectionLayout(
 label: "Claim Progress",
 labelSize: "MEDIUM",
 labelColor: "STANDARD",
 contents: {
 a!forEach(
 items: local!verticalSteps,
 expression: {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 if(
 fv!item.isCompleted,
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: "check",
 backgroundColor: "POSITIVE",
 contentColor: "STANDARD",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Completed Step"
 ),
 a!stampField(
 labelPosition: "COLLAPSED",
 icon: fv!item.icon,
 backgroundColor: "#d9d9d9",
 contentColor: "#666666",
 size: "TINY",
 align: "CENTER",
 marginBelow: "NONE",
 accessibilityText: "Future Step"
 )
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: fv!item.name,
 size: "STANDARD",
 style: if(
 fv!item.isCompleted,
 "STRONG",
 "PLAIN"
 )
 )
 },
 preventWrapping: true,
 marginBelow: "NONE"
 ),
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: if(
 a!isNotNullOrEmpty(fv!item.date),
 text(fv!item.date, "MMMM D"),
 "-"
 ),
 size: "SMALL"
 )
 },
 preventWrapping: true,
 showWhen: fv!item.isCompleted,
 marginBelow: "NONE"
 )
 }
 )
 },
 alignVertical: "MIDDLE",
 marginAbove: if(
 fv!isFirst,
 "STANDARD",
 "NONE"
 ),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!imageField(
 labelPosition: "COLLAPSED",
 images: {
 a!documentImage(
 document: a!EXAMPLE_VERTICAL_CONNECTOR_IMAGE()
 )
 },
 size: "TINY",
 align: "CENTER"
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout()
 },
 alignVertical: "MIDDLE",
 showWhen: not(fv!isLast),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 )
 }
 )
 }
 )
 )
}

Milestone (Vertical) - skipping a step

Top Replies