milestone with save button and validation for each and every step.

Put all the buttons in button array layout or button layout and use show when conditons based on the active step

put validation as true for primary buttons at the end of each step write saveinto on each button based on what you want to save.

Put validation as false for back buttons so that while going back there won't be any issue

Put submit true for the last page button so that form will be submitted

HI, you can use refer the code for your reference. Make sure the submit=false for back and Next buttons. Instead of the pages you can add your respective UI

{
  a!localVariables(
    /* List of icons in milestone (stamp) */
    local!milestoneStampIcons: {"plane", "ticket", "shopping-cart", "check"},
    local!currentMilestoneStampStep: 2,
    {
      /* Display stamps */
     
      a!sectionLayout(
        contents: {
          a!cardLayout(
            contents: {
              a!sideBySideLayout(
                items: {
                  a!sideBySideItem(),
                  a!forEach(
                    items: local!milestoneStampIcons,
                    expression: if(
                      /* If final step is completed */
                      and(
                        fv!index = local!currentMilestoneStampStep,
                        fv!index = length(local!milestoneStampIcons)
                      ),
                      a!sideBySideItem(
                        item: a!stampField(
                          icon: fv!item,
                          backgroundColor: "ACCENT",
                          size: "TINY"
                        ),
                        width: "MINIMIZE"
                      ),
                      if(
                        /* Completed step so far */
                        fv!index < local!currentMilestoneStampStep,
                        {
                          a!sideBySideItem(
                            item: a!stampField(
                              icon: fv!item,
                              backgroundColor: "ACCENT",
                              size: "TINY"
                            ),
                            width: "MINIMIZE"
                          ),
                          a!sideBySideItem(
                            item: a!horizontalLine(
                              weight: "MEDIUM",
                              color: "ACCENT",
                              marginAbove: "LESS",
                              marginBelow: "NONE"
                            ),
                            width: "2X"
                          )
                        },
                        if(
                          /* Current completed step */
                          fv!index = local!currentMilestoneStampStep,
                          {
                            a!sideBySideItem(
                              item: a!stampField(
                                icon: fv!item,
                                backgroundColor: "ACCENT",
                                size: "TINY"
                              ),
                              width: "MINIMIZE"
                            ),
                            a!sideBySideItem(
                              item: a!horizontalLine(
                                weight: "MEDIUM",
                                color: "#d4d4d4",
                                marginAbove: "LESS",
                                marginBelow: "NONE"
                              ),
                              width: "2X"
                            )
                          },
                          /* Future steps to complete */
                          if(
                            fv!index < length(local!milestoneStampIcons),
                            {
                              a!sideBySideItem(
                                item: a!stampField(
                                  icon: fv!item,
                                  backgroundColor: "#d4d4d4",
                                  contentColor: "STANDARD",
                                  size: "TINY"
                                ),
                                width: "MINIMIZE"
                              ),
                              a!sideBySideItem(
                                item: a!horizontalLine(
                                  weight: "MEDIUM",
                                  color: "#d4d4d4",
                                  marginAbove: "LESS",
                                  marginBelow: "NONE"
                                ),
                                width: "2X"
                              )
                            },
                            /* If final step is incomplete */
                            a!sideBySideItem(
                              item: a!stampField(
                                icon: fv!item,
                                backgroundColor: "#d4d4d4",
                                contentColor: "STANDARD",
                                size: "TINY"
                              ),
                              width: "MINIMIZE"
                            )
                          )
                        )
                      )
                    )
                  ),
                  a!sideBySideItem()
                },
                alignVertical: "MIDDLE",
                spacing: "NONE",
                marginBelow: "NONE"
              ),
            }
          ),
          a!richTextDisplayField(
            align: "CENTER",
            value: {
              a!richTextItem(
                text: "Page 1",
                size: "MEDIUM_PLUS"
              )
            },
            showWhen: local!currentMilestoneStampStep=1
          ),
          a!richTextDisplayField(
            align: "CENTER",
            value: {
              a!richTextItem(
                text: "Page 2",
                size: "MEDIUM_PLUS"
              )
            },
            showWhen: local!currentMilestoneStampStep=2
          ),
          a!richTextDisplayField(
            align: "CENTER",
            value: {
              a!richTextItem(
                text: "Page 3",
                size: "MEDIUM_PLUS"
              )
            },
            showWhen: local!currentMilestoneStampStep=3
          ),
          a!richTextDisplayField(
            align: "CENTER",
            value: {
              a!richTextItem(
                text: "Page 4",
                size: "MEDIUM_PLUS"
              )
            },
            showWhen: local!currentMilestoneStampStep=4
          )
        }
      ),
      a!sectionLayout(
        contents: {
          a!buttonLayout(
            primaryButtons: {
              a!buttonWidget(
                label: "Next",
                saveInto: {
                  a!save(
                    local!currentMilestoneStampStep,
                    local!currentMilestoneStampStep + 1
                  )
                },
                showWhen: local!currentMilestoneStampStep<4
              ),
              a!buttonWidget(
                label: "Submit",
                submit: true,
                showWhen: local!currentMilestoneStampStep=4
              )
            },
            secondaryButtons: {
              a!buttonWidget(
                label: "Cancel"
              ),
              a!buttonWidget(
                label: "Back",
                saveInto: {
                  a!save(
                    local!currentMilestoneStampStep,
                    local!currentMilestoneStampStep - 1
                  )
                },
                showWhen: local!currentMilestoneStampStep>1
              ),
              
            }
          )
        }
      )
    }
  )
}