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

Question

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

vikashk7323 · Answer

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