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

Thanks for this. This is a basic flow. But i want to know how to add save button and validations for each steps

What would that "save button" do?

What kind of validations do you want to implement? Is this beyond normal field level validations?

each milestone should have save button for save data to db which included that milestone and it should be have to retrive data to that screen also. 

validation for when leaving the milestone without saving data 

You can implement a "save" button by submitting the form and storing the data to DB. Then you just need a way for the user to find his in-flight request.