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>