DefaultPath for PageIndicator

How-to Discussions
1

Hey guys,

in my app I currently have a Router Navigation for my basic outer structure to navigate between my login screen, my registration screen and my LoggedIn-Screen (which is the inner part of my app):

Main.ux:

<Router ux:Name="router" />
      <Navigator DefaultPath="LoggedInPage">
        <LoginPage ux:Template="LoginPage" router="router"/>
        <RegistrationPage ux:Template="RegistrationPage" router="router"/>
        <LoggedInPage ux:Template="LoggedInPage" router="router"/>
      </Navigator>

In my LoggedInPage I navigate between different pages with a PageControl.
This page also has a PageIndicator docked at the bottom which is my menu bar:

LoggenInPage.ux:

    <PageControl ux:Name="loggedInNavigation" Interaction="None">
        <MapPage ux:Name="map">
          <FileImageSource ux:Key="Icon" File="../Assets/Icons/ic_near_me.png" />
        </MapPage>
        <Page>
          <FileImageSource ux:Key="Icon" File="../Assets/Icons/ic_list.png" />
          <Navigator ux:Name="listNav" DefaultPath="list">
            <PoiListPage ux:Template="list" />
            <DetailViewPage ux:Template="detail" />
          </Navigator>
      </Page>
        <ProfilePage ux:Name="profile">
          <FileImageSource ux:Key="Icon" File="../Assets/Icons/ic_person.png" />
        </ProfilePage>
    </PageControl>

    <PageIndicator Dock="Bottom" Height="40" Navigation="loggedInNavigation">
      <GridLayout ColumnCount="3" />
      <Panel ux:Template="Dot" Color="#F2F2F2">
        <ActivatingAnimation>
            <Scale Target="icon" Factor="1.25"/>
            <Change icon.Color="#02BBC2" />
        </ActivatingAnimation>
        <Clicked>
          <NavigateTo Target="{Page Visual}"/>
        </Clicked>
        <Panel Padding="10">
            <Image ux:Name="icon" Source="{Page Icon}" Color="#b3b3b3"/>
        </Panel>
        <Rectangle Height="1" Alignment="Top">
            <SolidColor Color="#b3b3b3"/>
        </Rectangle>
      </Panel>
    </PageIndicator>

As you can see, the PageControl contains three different pages: map, another page and profile.
The other page contains a Navigator with a PoiListPage and a DetailViewPage because I want to be able to click an element in my PoiListPage which leads me to more details on the DetailViewPage.
This is all working fine.

But I am currently stuck on the PageIndicator.
As soon as I open an element in the PoiListPage (so that the page changes to DetailViewPage) the specific button in the PageIndicator is not linking to the PoiListPage any more but to the DetailViewPage.
I need to lock the link to the DefaultPath of my Navigator.

How can I do that?

2

You are asking a relatively complicated question that the code you’ve added does not illustrate to the extent where it would make sense. Specifically: your PageIndicator is tied to the top-level PageControl, but you’re asking how to lock the “dot” to one of the pages in a nested Navigator, which the PageIndicator has nothing to do with.

It is not possible to help you without seeing a complete, minimal reproduction that we could copy-paste and run.

3

Thank you for your help.
Here is a reproduction with 2 files:

Main.ux:

<App>
  <ClientPanel>
    <Router ux:Name="router" />
    <Navigator DefaultPath="innerView">
      <innerView ux:Template="innerView" router="router" />
    </Navigator>
  </ClientPanel>
</App>

innerView.ux:

<Page ux:Class="innerView">
  <JavaScript>
    var innerLink = function(){
      router.pushRelative(innerNav, "innerPage2");
    }
    module.exports = {
      innerLink: innerLink
    };
  </JavaScript>
  <Router ux:Dependency="router" />
  <DockPanel>
    <PageControl ux:Name="loggedInNavigation" Interaction="None">
      <Page ux:Name="page1">
        <Text Value="Page 1" />
      </Page>
      <Page ux:Name="page2">
        <Navigator ux:Name="innerNav" DefaultPath="innerPage1">
          <Page ux:Template="innerPage1">
            <StackPanel>
              <Text Value="innerPage 1" />
              <Panel ux:Name="Button" Width="60" Height="30" Clicked="{innerLink}">
                <Rectangle Color="Red" />
              </Panel>
          </StackPanel>
          </Page>
          <Page ux:Template="innerPage2" >
            <Text Value="innerPage 2" />
            </Page>
          </Navigator>
        </Page>
        <Page ux:Name="page3">
          <Text Value="Page 3" />
        </Page>
      </PageControl>


      <PageIndicator Dock="Bottom" Height="40" Navigation="loggedInNavigation">
      <GridLayout ColumnCount="3" />
      <Rectangle ux:Template="Dot" Width="30" Height="30" Margin="10" Color="#555">
          <ActivatingAnimation>
            <Scale Factor="1.3" />
            </ActivatingAnimation>
          <Clicked>
          <NavigateTo Target="{Page Visual}"/>
        </Clicked>
      </Rectangle>
    </PageIndicator>
  </DockPanel>
</Page>

On the innerPage1, you can navigate to innerPage2 by clicking the red button.
As you can see, there is no turning back to innerPage1 by pressing the PageIndicator.

I am not really fixed to the solution with the PageIndicator.
I was just thinking that this could be the best way to do this.
If there is, in your opinion, a better way to implement this structure, I am open to suggestions.

4

I would go with Navigator in your case. I replaced PageControl and PageIndicators with only one Navigator with all pages inside. Each button leads to every subpage. From innerPage1 you can navigate to innerPage2. Now if you click Page2 button, you will go back to innerPage1.

Here I used router function getRoute which can retrieve route name and by that, I can navigate to page2 or go back to innerPage1.

            function goToSecondPage() {
                router.getRoute(function(route) {
                    // console.log(JSON.stringify(route));
                    if (route[2] == "innerPage2") {
                        router.goBack();
                    } else {
                        router.gotoRelative(innerNav, "page2", {});
                    }
                });
            }

Here’s a complete, minimal, fully working app based on your original code:

<App>
    <ClientPanel>
        <Router ux:Name="router" />
        <Navigator DefaultPath="inner">
            <InnerView ux:Template="inner" router="router" />
        </Navigator>
    </ClientPanel>

    <Page ux:Class="InnerView">
        <JavaScript>
            function goToFirstPage() {
                router.gotoRelative(innerNav, "page1", {});
            }

            function goToSecondPage() {
                router.getRoute(function(route) {
                    // console.log(JSON.stringify(route));
                    if (route[2] == "innerPage2") {
                        router.goBack();
                    } else {
                        router.gotoRelative(innerNav, "page2", {});
                    }
                });
            }

            function goToThirdPage() {
              router.gotoRelative(innerNav, "page3", {});
            }

            function innerLink() {
                router.pushRelative(innerNav, "innerPage2", {});
            }
            
            module.exports = {
                innerLink: innerLink,
                goToFirstPage: goToFirstPage,
                goToSecondPage: goToSecondPage,
                goToThirdPage: goToThirdPage
            };
        </JavaScript>
        <Router ux:Dependency="router" />
        <DockPanel Padding="16">
            <Navigator ux:Name="innerNav" DefaultPath="page1">
                <Page ux:Template="page1" >
                    <Text Value="Page 1" />
                </Page>
                <Page ux:Template="page2">
                    <StackPanel>
                        <Text Value="innerPage 1" />
                        <Panel ux:Name="Button" Width="60" Height="30" Clicked="{innerLink}">
                            <Rectangle Color="Red" />
                        </Panel>
                    </StackPanel>
                </Page>
                <Page ux:Template="innerPage2" >
                    <Text Value="innerPage 2" />
                </Page>
                <Page ux:Template="page3">
                    <Text Value="Page 3" />
                </Page>
            </Navigator>

            <Grid Dock="Bottom" ColumnCount="3" Padding="12">
                <Button Text="Page1" Clicked="{goToFirstPage}" />
                <Button Text="Page2" Clicked="{goToSecondPage}" />
                <Button Text="Page3" Clicked="{goToThirdPage}" />
            </Grid>
        </DockPanel>
    </Page>
</App>

Hope this helps!

5

Thank you for your help!
Its now working perfect :slight_smile: