• State Suggested Answer
  • Replies 8 replies
  • Answers 2 answers
  • Subscribers 8 subscribers
  • Views 5341 views
  • Users 0 members are here
Related Discussions
Home » Discussions » General

How to refresh interface on navigation change

Ram
A Score Level 1

Hi All,

I am using the Navigation pattern in my interface.

I am having different tabs on the left navigation. I am referring to separate interfaces for each tab.

So now when i am moving between the tabs, the content is not refreshing. (When I am changing from WorkSpace Tab and clicking back the Workspace tab i can see the content previously where i left.)

I want to reload the content when we click on the tab each time.

Here i am using rule!testPage1(), rule!testPage2() interfaces for different tabs.

{
  a!localVariables(
    /* The selected navigation section */
    local!activeNavSection: 1,
    /* The navigation sections */
    local!navSections: {
      a!map(name: "Workspace", icon: "briefcase"),
      a!map(name: "Tasks",     icon: "tasks"),
      a!map(name: "Requests",  icon: "paper-plane"),
      a!map(name: "Calendar",  icon: "calendar"),
      a!map(name: "My Time",   icon: "clock-o"),
      a!map(name: "Expenses",  icon: "money")
    },
    {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!forEach(
                items: local!navSections,
                expression: a!cardLayout(
                  contents: a!sideBySideLayout(
                    items: {
                      a!sideBySideItem(
                        item: a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: a!richTextIcon(
                            icon: fv!item.icon,
                            color: "SECONDARY",
                            size: "MEDIUM"
                          ),
                          align: "LEFT"
                        ),
                        width: "MINIMIZE"
                      ),
                      a!sideBySideItem(
                        item: a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: a!richTextItem(
                            text: fv!item.name,
                            color: "ACCENT",
                            size: "MEDIUM",
                            style: if(
                              fv!index = local!activeNavSection,
                              "STRONG",
                              "PLAIN"
                            )
                          )
                        )
                      )
                    },
                    alignVertical: "MIDDLE"
                  ),
                  link: a!dynamicLink(
                    value: fv!index,
                    saveInto: local!activeNavSection
                  ),
                  style: if(
                    fv!index = local!activeNavSection,
                    "ACCENT",
                    "NONE"
                  ),
                  showBorder: false,
                  accessibilityText: if(
                    fv!index = local!activeNavSection,
                    fv!item.name & " " & "selected",
                    ""
                  )
                )
              ),
              /* This card is used to set a minimum height on the column so that the *
               * divider takes up more screen space when there is minimal content.   *
               * Once content is added to the main column, this can be removed.      */
              a!cardLayout(
                height: "TALL",
                showWhen: not(a!isPageWidth("PHONE")),
                showBorder: false
              )
            },
            width: "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!navSections, you will need to make sure            *
               * the list of sections here is the correct length.         */
              choose(
                local!activeNavSection,
                rule!testPage1(),
                rule!testPage2(),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {}
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {}
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {}
                ),
                a!sectionLayout(
                  label: index(
                    local!navSections.name,
                    local!activeNavSection,
                    ""
                  ),
                  contents: {}
                )
              )
            }
          )
        },
        spacing: "SPARSE",
        showDividers: true
      )
    }
  )
}

Initially screen will be like below.

Then In WorkSpace tab, i have selected value X and entered 123. (Just left the data as it is and moved to next tab)

Then I moved to Tab Tasks, Then selected value C and entered dsf.

When i moved back to Workspace Tab, I am able to see the previously selected/entered data.

When i moved back to previous tab(WorkSpace Tab) i should be able to see the initial tab as below. (All the entered/selected content should be cleared)

  Discussion posts and replies are publicly visible

Parents
  • 0 

    a!localVariables(
  /* The selected navigation section */
  local!activeNavSection: 1,
  /* The navigation sections */
  local!navSections: {
    a!map(name: "Workspace", icon: "briefcase"),
    a!map(name: "Tasks",     icon: "tasks"),
    a!map(name: "Requests",  icon: "paper-plane"),
    a!map(name: "Calendar",  icon: "calendar"),
    a!map(name: "My Time",   icon: "clock-o"),
    a!map(name: "Expenses",  icon: "money")
  },
  /*Variable declaration for each nav section*/
  local!TasksDD,
  local!TasksTF,
  local!workspaceDD: a!refreshVariable(
    value: null,
    refreshOnVarChange: {local!TasksDD,local!TasksTF}
  ),
  local!workspaceTF: a!refreshVariable(
    value: null,
    refreshOnVarChange: {local!TasksDD,local!TasksTF}
  ), 
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!forEach(
              items: local!navSections,
              expression: a!cardLayout(
                contents: a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextIcon(
                          icon: fv!item.icon,
                          color: "SECONDARY",
                          size: "MEDIUM"
                        ),
                        align: "LEFT"
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextItem(
                          text: fv!item.name,
                          color: "ACCENT",
                          size: "MEDIUM",
                          style: if(
                            fv!index = local!activeNavSection,
                            "STRONG",
                            "PLAIN"
                          )
                        )
                      )
                    )
                  },
                  alignVertical: "MIDDLE"
                ),
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: local!activeNavSection
                ),
                style: if(
                  fv!index = local!activeNavSection,
                  "ACCENT",
                  "NONE"
                ),
                showBorder: false,
                accessibilityText: if(
                  fv!index = local!activeNavSection,
                  fv!item.name & " " & "selected",
                  ""
                )
              )
            ),
            /* This card is used to set a minimum height on the column so that the *
               * divider takes up more screen space when there is minimal content.   *
               * Once content is added to the main column, this can be removed.      */
            a!cardLayout(
              height: "TALL",
              showWhen: not(a!isPageWidth("PHONE")),
              showBorder: false
            )
          },
          width: "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!navSections, you will need to make sure            *
               * the list of sections here is the correct length.         */
            choose(
              local!activeNavSection,
              {
                rule!Test_IF_SubRule(
                  dropdownVal: local!workspaceDD, 
                  textVal:local!workspaceTF
                )
              },
              {
                rule!Test_IF_SubRule(
                  dropdownVal: local!TasksDD, 
                  textVal:local!TasksTF
                )
              },
              /*rule!testPage1(),
              rule!testPage2(),*/
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              )
            )
          }
        )
      },
      spacing: "SPARSE",
      showDividers: true
    )
  }
)

    Please check variable declaration from line 14 to 23 and line number 101 to 111 where I have called the sub rule. Below is the sub rule code

    a!localVariables(
  local!arrayValue: { "x", "y", "z" },
  {
    a!dropdownField(
      label: "Select a value",
      choiceLabels: local!arrayValue,
      choiceValues: local!arrayValue,
      value: ri!dropdownVal,
      saveInto: ri!dropdownVal,
      placeholder: "Please select"
    ),
    a!textField(
      label: "",
      value: ri!textVal,
      saveInto: ri!textVal
    )
  }
)

    I have given example for workspace navigation, try it out. Hope this help.

Reply
  • 0 

    a!localVariables(
  /* The selected navigation section */
  local!activeNavSection: 1,
  /* The navigation sections */
  local!navSections: {
    a!map(name: "Workspace", icon: "briefcase"),
    a!map(name: "Tasks",     icon: "tasks"),
    a!map(name: "Requests",  icon: "paper-plane"),
    a!map(name: "Calendar",  icon: "calendar"),
    a!map(name: "My Time",   icon: "clock-o"),
    a!map(name: "Expenses",  icon: "money")
  },
  /*Variable declaration for each nav section*/
  local!TasksDD,
  local!TasksTF,
  local!workspaceDD: a!refreshVariable(
    value: null,
    refreshOnVarChange: {local!TasksDD,local!TasksTF}
  ),
  local!workspaceTF: a!refreshVariable(
    value: null,
    refreshOnVarChange: {local!TasksDD,local!TasksTF}
  ), 
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!forEach(
              items: local!navSections,
              expression: a!cardLayout(
                contents: a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextIcon(
                          icon: fv!item.icon,
                          color: "SECONDARY",
                          size: "MEDIUM"
                        ),
                        align: "LEFT"
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextItem(
                          text: fv!item.name,
                          color: "ACCENT",
                          size: "MEDIUM",
                          style: if(
                            fv!index = local!activeNavSection,
                            "STRONG",
                            "PLAIN"
                          )
                        )
                      )
                    )
                  },
                  alignVertical: "MIDDLE"
                ),
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: local!activeNavSection
                ),
                style: if(
                  fv!index = local!activeNavSection,
                  "ACCENT",
                  "NONE"
                ),
                showBorder: false,
                accessibilityText: if(
                  fv!index = local!activeNavSection,
                  fv!item.name & " " & "selected",
                  ""
                )
              )
            ),
            /* This card is used to set a minimum height on the column so that the *
               * divider takes up more screen space when there is minimal content.   *
               * Once content is added to the main column, this can be removed.      */
            a!cardLayout(
              height: "TALL",
              showWhen: not(a!isPageWidth("PHONE")),
              showBorder: false
            )
          },
          width: "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!navSections, you will need to make sure            *
               * the list of sections here is the correct length.         */
            choose(
              local!activeNavSection,
              {
                rule!Test_IF_SubRule(
                  dropdownVal: local!workspaceDD, 
                  textVal:local!workspaceTF
                )
              },
              {
                rule!Test_IF_SubRule(
                  dropdownVal: local!TasksDD, 
                  textVal:local!TasksTF
                )
              },
              /*rule!testPage1(),
              rule!testPage2(),*/
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              )
            )
          }
        )
      },
      spacing: "SPARSE",
      showDividers: true
    )
  }
)

    Please check variable declaration from line 14 to 23 and line number 101 to 111 where I have called the sub rule. Below is the sub rule code

    a!localVariables(
  local!arrayValue: { "x", "y", "z" },
  {
    a!dropdownField(
      label: "Select a value",
      choiceLabels: local!arrayValue,
      choiceValues: local!arrayValue,
      value: ri!dropdownVal,
      saveInto: ri!dropdownVal,
      placeholder: "Please select"
    ),
    a!textField(
      label: "",
      value: ri!textVal,
      saveInto: ri!textVal
    )
  }
)

    I have given example for workspace navigation, try it out. Hope this help.

Children
No Data
© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.