Milestone (Vertical) - skipping a step

RE: Milestone (Vertical) - skipping a step

JayaPrakash Ravipati — Wed, 24 Jan 2024 05:59:59 GMT

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

RE: Milestone (Vertical) - skipping a step

Konduru Chaitanya — Wed, 24 Jan 2024 05:53:11 GMT

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

RE: Milestone (Vertical) - skipping a step

EREN_YEAGER — Wed, 24 Jan 2024 05:29:31 GMT

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

RE: Milestone (Vertical) - skipping a step

Stefan Helzle — Tue, 23 Jan 2024 21:03:53 GMT

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.