How to open the EdgeNavigator on pressing the back button

How-to Discussions
1

Hello! How can I open the EdgeNavigator on pressing the back button while in the main view? In the following example I can navigate back from the green and red page plus close the EdgeNavigator by pressing the back button, but how can I toggle the EdgeNavigator in the yellow view?

<App>
  <JavaScript>
    module.exports = {
      gotoGreenPage: function() {router.push("greenPage");},
      gotoRedPage: function() {router.push("redPage");},
      dismissSidebar: function() {navigator.dismiss();}
    };
  </JavaScript>
  <Router ux:Name="router" />
  <Navigator DefaultPath="yellowPage">
    <Page ux:Name="yellowPage" Background="Yellow">
      <EdgeNavigator ux:Name="navigator" HitTestMode="LocalBoundsAndChildren">
    	<DockPanel ux:Name="sidebar" Width="100%" Edge="Left">
          <Router ux:Name="subrouter" />
          <PageControl>
            <Page Background="Blue">
              <OnBackButton>
                <Callback Handler="{dismissSidebar}" />
              </OnBackButton>
            </Page>
          </PageControl>
        </DockPanel>
        <DockPanel>
          <Button Text="Goto green page" Background="Black" Width="200" Height="100" Alignment="Center" Y="-25%" Clicked="{gotoGreenPage}" />
          <Button Text="Open menu" Background="Black" Width="200" Height="100" Alignment="Center">
            <Clicked>
              <NavigateToggle Target="sidebar" />
            </Clicked>
          </Button>
          <Button Text="Goto red page" Background="Black" Width="200" Height="100" Alignment="Center" Y="25%" Clicked="{gotoRedPage}" />
        </DockPanel>
      </EdgeNavigator>
    </Page>
    <Page ux:Name="greenPage" Background="Green" />
    <Page ux:Name="redPage" Background="Red" />
  </Navigator>
</App>
2

Hello! I managed to push this a bit further, but got stuck again. The logic works, but how can I trigger the EdgeNavigator to open from JS in the “console.log” line? For EdgeNavigator there’s “open”, but I can’t seem to get it working in this context.

<App>
  <JavaScript>

    var canOpenNavigator = true;

    module.exports = {
      gotoGreenPage: function() {router.push("greenPage");},
      gotoRedPage: function() {router.push("redPage");},
      dismissSidebar: function() {canOpenNavigator = true; navigator.dismiss();},
      detectBackButton: function() {
        if (canOpenNavigator) {
          console.log("Open edge navigation");
        }
      },
      enableNavigation: function () {canOpenNavigator = true;},
      disableNavigation: function () {canOpenNavigator = false;}
    };

  </JavaScript>
  <Router ux:Name="router" />
  <Navigator DefaultPath="yellowPage">
    <OnBackButton>
      <Callback Handler="{detectBackButton}" />
    </OnBackButton>
    <Page ux:Name="yellowPage" Background="Yellow">
      <Activated Handler="{enableNavigation}" />
      <EdgeNavigator ux:Name="navigator" HitTestMode="LocalBoundsAndChildren">
        <DockPanel ux:Name="sidebar" Width="100%" Edge="Left">
          <Activated Handler="{disableNavigation}" />
          <Router ux:Name="subrouter" />
          <PageControl>
            <Page Background="Blue">
              <Activated Handler="{disableNavigation}" />
              <OnBackButton>
                <Callback Handler="{dismissSidebar}" />
              </OnBackButton>
            </Page>
          </PageControl>
        </DockPanel>
        <DockPanel>
          <Button Text="Goto green page" Background="Black" Width="200" Height="100" Alignment="Center" Y="-25%" Clicked="{gotoGreenPage}" />
          <Button Text="Open menu" Background="Black" Width="200" Height="100" Alignment="Center">
            <Clicked>
              <NavigateToggle Target="sidebar" />
              <Callback Handler="{disableNavigation}" />
            </Clicked>
          </Button>
          <Button Text="Goto red page" Background="Black" Width="200" Height="100" Alignment="Center" Y="25%" Clicked="{gotoRedPage}" />
        </DockPanel>
      </EdgeNavigator>
    </Page>
    <Page ux:Name="greenPage" Background="Green">
      <Activated Handler="{disableNavigation}" />
    </Page>
    <Page ux:Name="redPage" Background="Red">
      <Activated Handler="{disableNavigation}" />
    </Page>
  </Navigator>
</App>
3

In my tests, it was as simple as adding a single line to your code:

        if (canOpenNavigator) {
          console.log("Open edge navigation");
          navigator.open("Left");
        }

Or maybe I’m misunderstanding your use case.

4

Thank you Uldis!