How to pass parameter to router.goBack()?

How-to Discussions
1

I’m trying to build a multipage app with the typical title bar fixed at the top of the homepage and the other pages that swipe back and forth below the title bar. For this reason I put the UX that renders the title bar in MainView.ux and below the <Navigator> part:

<!-- MAINVIEW.UX -->
<StackPanel Dock="Top" Color="Red">
    <Shadow Size="3" Distance="1" />
    <Panel Height="52">
        <Text Value="{pageTitle}" Color="White" FontSize="20" Alignment="Center" />
    </Panel>
</StackPanel>

<Navigator DefaultPath="splash">
    <SplashPage ux:Template="splash" router="router" />
    <HomePage ux:Template="home" router="router" />
    <MusicPage ux:Template="music" router="router" />         
</Navigator>

{pageTitle} should contain the title of the page the user is viewing and should change dinamically during navigation. So suppose that when the app is lunched

pageTitle = HOME (HomePage.ux)

the user then clicks a button and jumps to MusicPage.ux. As pageTitle is an Observable I can keep trace of it easily and change {pageTitle} accordingly BEFORE actually going to the other page:

function gotoMusic() {
    pageTitle.value = "MUSIC";
    router.push("music");
};

module.exports = {
    pageTitle: pageTitle
}

But the problem comes here: the user is now in MusicPage.ux, when he presses the BACK button to go back to HomePage.ux {pageTitle} won’t - of course - change.

How do I pass a parameter to the goBack() function? router.goBack() has no parameters so I tryied <Global> and <Resources> but I’m pretty sure these are not the right way.

2

Hi Enrico,

you can not and should not pass any parameters to goBack().

For your specific use-case, it would make sense to either make use of Activated trigger, or AlternateRoot behavior.

I personally would favor Activated, but it all depends on your use-case.

3

Ok, got it. Thank you Uldis!

For other beginners as me here’s the working code. Suppose to have a two pages app (HomePage.ux and SecondPage.ux) the following is MainView.ux which routes and keep trace of the navigation between the two pages:

<!-- MainView.ux -->
<App>
    <Router ux:Name="router" />
    
    <!-- This is the panel where we want to display the name of the page --> 
    <!-- The panel will be always visible and 'fixed/sticky' as it is rendered in MainView.ux -->
    <StackPanel>
        <Text ux:Name="title" Value="" />
    </StackPanel>

    <Navigator DefaultPath="home">
        <HomePage ux:Template="home" router="router">
            <!-- When the page HomePage.ux is 'Activated'... -->
            <Activated>
                <!-- ...<Set> changes the value of the property 'Value' of the <Text> 'title' above -->
                <Set Target="title.Value" Value="HOME PAGE"/>
            </Activated>
        </HomePage>	
        <SecondPage ux:Template="secondpage" router="router">
            <Activated>
                <Set Target="title.Value" Value="SECOND PAGE"/>
            </Activated>
        </SecondPage>
    </Navigator>
</App>