Change parameters in MainView.ux from subpages

Hey guys,

I have the following setup. A MainView.ux page which is the MainPage and hosts a sidemenu as well as a ClientPanel with a topBar.

Currently we cannot pass the {topBarLabel} from the Pages e.g. the StartPage.
Adressing the Menu.js and calling a function to change the topBarLabel or changing the label via var Menu = require("Menu") and then setting it as Menu.topBarLabel.value = "myValue" doesnt change the Label. It changes the value but does not change the Text where the label is referenced.

As well as changing the Label I’d like to change the visibility of the topBar but this seems to be impossible from the subPages.
How can I adress those fields properly from my subpages and enforce the display of those changed values?

Thank you!

MainView.ux

<App>

  <JavaScript File="Menu.js" />
  <Router ux:Name="router" />

  <EdgeNavigator ux:Name="Navigator">
  <Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#fff">
    <!-- SideMenu Code -->
  </Panel>

  <ClientPanel>
      <iOS.StatusBarConfig Style="Dark"/>

      <Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />

      <StackPanel ux:Name="TopBar" Dock="Top" Color="#fff">

        <Panel Height="56">

          <MenuButton Alignment="Left">
            <Clicked>
              <NavigateToggle Target="sidebar" />
            </Clicked>

          </MenuButton>

          <Panel>
            <Text Value="{topBarLabel}" />
          </Panel>

        </Panel>

      </StackPanel>

      <Navigator DefaultPath="startPage">

        <StartPage ux:Template="startPage" router="router" />

        <!-- More Pages -->

      </Navigator>

    </ClientPanel>

  </EdgeNavigator>

</App>

Hi!

This is a common problem that people run into when trying to structure a larger app, so I’ll try to explain carefully with some principles:

  • State should never be “owned by a page” (unless it is completely private to that page and hence of no interest to other pages). You should not write any code concerned with “passing state between pages”. If you are doing that, you have structured your code wrong. Instead, state should be owned by your apps model, completely defined in stand-alone .js files.
  • Make your model in stand-alone .js files and require() them into <JavaScript> tags on pages that need them.
  • Note that you should never include model files with <JavaScript File=""> (it looks like you are doing this in your above code).

In general, remember this:

  • Model code - goes in plain .js files included in the :Bundle in your .unoproj that arerequire()d whenever used.
  • Viewmodel code - goes in <JavaScript> tags, and requires the model

In short, it looks like the main problem with your code is that you need to remove the line <JavaScript File="Menu.js" />

we refactored the components to separate files. Works as intended now.