Single Component With Back button for all Pages

How-to Discussions
1

I have a custom Toobar component in my app.

<!-- TOOLBAR START-->

<StackPanel Dock="Top" ux:Class="Toolbar">

    <Router ux:Dependency="router"/>

    <JavaScript File="../Backend.js" />

    <string ux:Property="Title" />
    <float4 ux:Property="Color" />

    <Panel Height="56" Color="{Property this.Color}" Padding="16, 0">
        <Button Clicked="{goBack}">
          <Icon FontSize="20" Margin="0,16">&#xE876;</Icon>
        </Button>
        <Text Value="{Property this.Title}" Alignment="CenterLeft" Font="medium" FontSize="15" Margin="56,0" TextColor="#fff" />
        <StackPanel Orientation="Horizontal" Alignment="Right" >
            <Icon FontSize="20"  Margin="0,16">&#xE5D4;</Icon>
        </StackPanel>
    </Panel>

    <!-- Flat or Raised?-->
    <DropShadow />

</StackPanel>
<!-- TOOLBAR END -->

The button calls a function in my main JS file that tells the router to go back. I reference the app’s router to the Toolbar component as a ux:Dependency. The toolbar is included in pretty much every page in the app.

My problem is basically that it doesn’t go back when pressed, what am I doing wrong?

2

Here is what I use and its working.

    <WhileTrue Value="{Property this.ShowBackButton}">
    <Panel Width="50" Height="50">
    <MDI Alignment="VerticalCenter" TextAlignment="Left" FontSize="30" Name="back" TextColor="#fff" Margin="10,0,0,0">&#xf2ea;</MDI>
    <Clicked Handler="{routerPop}" />
    </Panel>
    </WhileTrue>

javascript:

module.exports = {
  routerPop : function() { router.goBack();}
}
3

Sorry Ish, I can’t quite understand what you are doing. Could you show me some more of your code so I can get a better idea of where and how you are using it?

4

Hi!

Could you share some more of your code Casey? Hard to see why it’s not working the way you want.

5

Hi Kristian,

I’ve actually just managed to fix it now, I was using router.goto() for navigation which resets the navigation path each use. Switched to router.push() and works perfect now! :slight_smile: