Navigate bwtween 3 pages with "next" button

Question

I am trying to navigate between 3 pages with a "next" button, i also need to highlight the circle that indicates the page i am currencly in , 
 ex:

I declared a local variable for the "NextPage" and gave it a value, but it seems to be null , 
 The error i am getting is " Error in a!forEach() expression during iteration 1: Expression evaluation error at function a!stampField [line 47]: Cannot compare incompatible operands of type Number (Integer) and type Null. " 
 why is it not saving the value of the local "NextPage"? 
 local!acc,
 local!requestDetails,
 /* Defines whether or not to collapse the side nav */
 local!stampNav: false,
 /* The selected navigation section */
 local!activeStampNavSection: 1,
 local!NextPage: 1,
 local!MaxPages:3,
 
 /* The navigation sections */
 local!stampNavSections: {
 a!map(name: "Customers Details", icon: "user-circle"),
 a!map(name: "Request Details", icon: "tasks"),
 a!map(name: "Attachments", icon: "file-upload")
 
 },
 {
 a!richTextDisplayField(
 label: "Initiate ",
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: {
 "Initiate Document Request"
 },
 color: "#000000",
 style: {
 "STRONG"
 }
 )
 }
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!sideBySideLayout(
 items: {
 a!forEach(
 items: local!stampNavSections,
 expression: a!sideBySideItem(
 item: a!stampField(
 icon: fv!item.icon,
 backgroundColor: if(
 fv!index=local!NextPage, 
 
 /* fv!index = local!activeStampNavSection, */
 
 "ACCENT",
 "TRANSPARENT"
 ),
 contentColor: if(
 fv!index=local!NextPage, 
 "STANDARD",
 "ACCENT"
 ),
 /* link: a!dynamicLink(
 value: fv!index,
 saveInto: local!activeStampNavSection
 ),*/
 
 size: "SMALL",
 tooltip: fv!item.name,
 accessibilityText: if(
 fv!index = local!activeStampNavSection,
 fv!item.name & " " & "selected",
 ""
 )
 )
 )
 )
 },
 spacing: "DENSE",
 stackWhen: {
 "DESKTOP_WIDE",
 "DESKTOP",
 "DESKTOP_NARROW",
 "TABLET_LANDSCAPE",
 "TABLET_PORTRAIT"
 }
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout(
 contents: {
 /* Conditionally display selected navigation section. *
 * Sections are created individually here because they will *
 * have varying contents, so if you change the list in *
 * local!stampNavSections, you will need to make sure *
 * the list of sections here is the correct length. */
 choose(
 local!NextPage,
 /* local!activeStampNavSection,*/
 a!sectionLayout(
 label: "",
 contents: { 
 rule!CustomerDetails(local!acc)
 
 }
 ),
 a!sectionLayout(
 label: "shhhhh",
 contents: {
 rule!RequestDetailsAndRequestDoc( local!requestDetails)
 
 }
 ),
 a!sectionLayout(
 label: index(
 local!stampNavSections.name,
 local!activeStampNavSection,
 ""
 ),
 contents: {}
 )
 )
 }
 )
 }
 
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label:"next",
 value:if(local!NextPage<local!MaxPages,local!NextPage+1,local!NextPage),
 saveInto: {
 
 
 local!NextPage,
 
 
 if(local!NextPage=2,a!save(ri!NextPage,local!MaxPages),null),
 a!save(local!NextPage,save!value)
 
 
 },
 icon: "angle-right",
 iconPosition: "END",
 
 submit: true,
 style: "NORMAL",
 validate: true



 )
 },
 secondaryButtons: {
 a!buttonWidget(
 label: "Cancel",
 value: true,

 submit: true,
 style: "NORMAL",
 validate: false
 ),
 a!buttonWidget(
 label: "Back",
 icon: "angle-left",
 value: true,
 
 submit: true,
 style: "NORMAL",
 validate: false
 )
 }
 )}
 )
 }
 )
 }

Mathieu Drouin · Answer

a!localVariables(
 local!pages: {
 a!map(
 name: "Customers Details",
 icon: "user-circle"
 ),
 a!map(name: "Request Details", icon: "tasks"),
 a!map(name: "Attachments", icon: "file-upload")
 },
 local!currentPage: 1,
 {
 a!richTextDisplayField(
 label: "Initiate ",
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: { "Initiate Document Request" },
 color: "#000000",
 style: { "STRONG" }
 )
 }
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!sideBySideLayout(
 items: {
 a!forEach(
 items: local!pages,
 expression: a!sideBySideItem(
 item: a!stampField(
 icon: fv!item.icon,
 size: "SMALL",
 backgroundColor: if(
 local!currentPage = fv!index,
 "ACCENT",
 "TRANSPARENT"
 )
 )
 )
 )
 },
 spacing: "DENSE",
 stackWhen: {
 "DESKTOP_WIDE",
 "DESKTOP",
 "DESKTOP_NARROW",
 "TABLET_LANDSCAPE",
 "TABLET_PORTRAIT"
 }
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout(
 contents: {
 choose(
 local!currentPage,
 a!sectionLayout(
 label: index(local!pages, local!currentPage).name,
 contents: {
 a!richTextDisplayField(value: a!richTextItem(text: "Page 1"))
 }
 ),
 a!sectionLayout(
 label: index(local!pages, local!currentPage).name,
 contents: {
 a!richTextDisplayField(value: a!richTextItem(text: "Page 2"))
 }
 ),
 a!sectionLayout(
 label: index(local!pages, local!currentPage).name,
 contents: {
 a!richTextDisplayField(value: a!richTextItem(text: "Page 3"))
 }
 )
 )
 }
 )
 }
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label: "next",
 icon: "angle-right",
 iconPosition: "END",
 style: "NORMAL",
 saveInto: {
 a!save(local!currentPage, local!currentPage + 1)
 },
 validate: true,
 showWhen: local!currentPage < length(local!pages)
 ),
 a!buttonWidget(
 label: "submit",
 icon: "check",
 iconPosition: "END",
 style: "NORMAL",
 submit: true,
 validate: true,
 showWhen: local!currentPage = length(local!pages)
 )
 },
 secondaryButtons: {
 a!buttonWidget(
 label: "Cancel",
 style: "NORMAL",
 submit: true,
 validate: false
 ),
 a!buttonWidget(
 label: "Back",
 icon: "angle-left",
 style: "NORMAL",
 saveInto: {
 a!save(local!currentPage, local!currentPage - 1)
 },
 validate: false,
 showWhen: local!currentPage > 1
 )
 }
 )
 }
 )
 }
 )
 }
)