Skip to main content
K
kellyq2641
January 23, 2024
Solved

Milestone (Vertical) - skipping a step

  • January 23, 2024
  • 4 replies
  • 0 views

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

Best answer by amaans4178

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


4 replies

stefanhelzle0001
stefanhelzle0001
Brainy
January 23, 2024

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.

amaans4178
amaans4178Answer
January 24, 2024

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


    konduruc733182
    konduruc733182
    January 24, 2024

    Hello [mention:0ab51f6183f24275bb64f62a11054752:e9ed411860ed4f2ba0265705b8793d05] 

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


      jayaprakashr0001
      jayaprakashr0001
      Participating Frequently
      January 24, 2024

      Hi [mention:0ab51f6183f24275bb64f62a11054752:e9ed411860ed4f2ba0265705b8793d05] 

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

        Terms & ConditionsAccessibility statement