How to refresh interface on navigation change

RE: How to refresh interface on navigation change

Ravi Roshan — Thu, 09 Sep 2021 18:02:21 GMT

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.

RE: How to refresh interface on navigation change

Zach Goldsby — Thu, 09 Sep 2021 16:49:49 GMT

Had to move refresh variable to parent interface rule and pass to child interface

RE: How to refresh interface on navigation change

Zach Goldsby — Thu, 09 Sep 2021 16:37:01 GMT

Is there any way to implement this design using child interface rules for each section? This seems cleaner but doesn't pass the newly refreshed value to the child section rule because the child is only called when the active section equals the chosen index. Choose()

RE: How to refresh interface on navigation change

Danny Verb — Thu, 25 Mar 2021 14:56:08 GMT

I recommend using the function a!refreshVariable() within each of your sections. This is great for resetting the initial value of a variable when another variable changes, in your case the variable which changes would be local!activeNavSection. For example, lets say you have a variable for your workspace dropdown. You should set that variable to:

a!localVariables(
    local!activeNavSection: 1,
    local!selectedWorkspaceDropdown: a!refreshVariable(
        value: null,
        refreshOnVarChange: {local!activeNavSection}
    ),
    {}
)

RE: How to refresh interface on navigation change

Ram — Thu, 25 Mar 2021 10:59:04 GMT

We have a admin screen with different tabs to display different contents and few actions need to be performed in those tabs.

RE: How to refresh interface on navigation change

Stefan Helzle — Thu, 25 Mar 2021 10:55:04 GMT

This is not how this works. If you want to reset already filled fields, you need to implement it. Means: add some a!save() into the saveInto in dynamicLinks in your tabs.

Is this just some tests? What do you want to achieve?

RE: How to refresh interface on navigation change

Ram — Thu, 25 Mar 2021 10:50:20 GMT

Attached screenshots.

RE: How to refresh interface on navigation change

Stefan Helzle — Thu, 25 Mar 2021 10:11:35 GMT

What exactly should update? Can you provide some screenshots with as-is and to-be?