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

Certified Senior Developer

Hi,

 i want to create milestone with save buttons for each step and should have validation when go to next step. buttons should be aligned in same raw. can you please suggest me method not to complicate the code.

Thanks

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

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

Reply
  • 0
    Certified Senior Developer

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

Children