Skip to main content
S
shahedj3682
September 30, 2023
Question

Navigate bwtween 3 pages with "next" button

  • September 30, 2023
  • 3 replies
  • 0 views

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

3 replies

M
munagad4627
September 30, 2023

Hi Shayna,

Once Remove line 137 and try moving to next page 

mathieud0001
mathieud0001
Brainy
September 30, 2023

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

stefanhelzle0001
stefanhelzle0001
Brainy
September 30, 2023

docs.appian.com/.../ux_wizards.html

Terms & ConditionsAccessibility statement