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" ) } ) } ) ) }
Discussion posts and replies are publicly visible
If this can be done? Yes!
So the visual representation is only controlled by the underlying data. If you want to skip something, you just need to tinker with the piece of code that modifies that data.