Milestone (Vertical) - skipping a step

Certified Senior Developer

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