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

Parents
  • +1
    Certified Senior Developer

    Hello  

    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"
                )
              }
            )
          }
        )
      )
    }


Reply
  • +1
    Certified Senior Developer

    Hello  

    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"
                )
              }
            )
          }
        )
      )
    }


Children
No Data