Navigator and goBack() issue.

How-to Discussions
1

Hi guys,

I’m building a app that requires some navigation. At this moment I have 2 navigators.

MainView.ux

<Router ux:Name=“router"/>

<Navigator DefaultPath="splashscreen" GotoState="Unchanged">
	<TW.Splashscreen ux:Name="splashscreen" router="router">
		<WhileActive>
			<Change iosStyle.IsVisible="false"/>
			<Change androidStyle.IsVisible="false"/>
		</WhileActive>
	</TW.Splashscreen>
	<TW.Login ux:Name="login" router="router"/>
	<TW.ForgotPassword ux:Name="forgotPassword" router="router"/>
	<TW.MainPage ux:Name="mainPage" router="router"/>
</Navigator>```

MainPage.ux
```

In the first navigator all works fine. In the second one when I navigate from widgets to widgets Settings

function gotoSettings(){
	router.push("mainPage", {}, "widgetsSettings", {});
}

and then I press the back button and call router.goBack() it works fine.
But when I navigate widgets -> widgetsDetails -> Settings

function gotoWidgetDetails(args){
	router.push("mainPage", {}, "widgetsDetails", {args : args});
}

function gotoSettings(){
	router.push("mainPage", {}, "widgetsSettings", {});
}

and then in widgetsSettings press the go back button it navigates back to widgetsDetails and gives me an error:

LOG: InternalError: Can not navigate to '', not found! in Fuse.Controls.PageControl, Name: pageControl</Users/anaalmeida/Library/Application Support/Fusetools/Packages/Fuse.Controls.Navigation/0.42.2/$.uno:1824>
LOG: Error: Unable to navigate to route: mainPage?{}/widgetsDetails?{"args":{"data":{"Date":"October 2016","Resource":"Bla Bla","Text":"Utilization","Value":"70%"},"index":0,"localX":215,"localY":81.5,"node":{"external_object":null},"x":215,"y":141.5}}/ in Fuse.Navigation.Router, Name: router</Users/anaalmeida/Library/Application Support/Fusetools/Packages/Fuse.Navigation/0.42.2/$.uno:2802>

I believe this happen because I have a PageControl in my widgetsDetails.ux:

<PageControl ux:Name="pageControl" Layer="Layout">
	<Panel Margin="40,50,40,120">			
		...
	</Panel>
	<Panel Margin="40,50,40,120">			
		...
	</Panel>
	<Panel Margin="40,50,40,120">			
		...
	</Panel>
	<Panel Margin="40,50,40,120">			
		...
	</Panel>
</PageControl>

...

<PageIndicator ux:Name="pageIndicator" Navigation="pageControl" Dock="Bottom" Alignment="TopCenter">
	<Circle ux:Template="Dot" ux:Name="dotFac" Color="LighterGray" Margin="5" Width="10" Height="20">
		<ActivatingAnimation>
			<Scale Factor="1.1"/>
			<Change dotFac.Color="Purple" />
		</ActivatingAnimation>
	</Circle>
</PageIndicator>

I based my code on your example.
I really need this PageControl with PageIndicator here.

Can’t I have this PageControl with PageIndicator here or am I doing something wrong?
Can someone help me?

Thanks!

2

By default a PageControl belongs to the Router as well. If you don’t want this then set IsRouterOutlet="false" on it.

https://www.fusetools.com/docs/fuse/controls/pagecontrol

3

I read it but I never thought using that. Now all is working as I expected!

Thank you very much!