EdgeNavigator/PageControl goBack() <Activated> not triggering

In a page combining EdgeNavigator and PageControl the Activated event does not trigger when coming back from another page using goBack() / backbutton.

Example where it happens in the Preview mode. Swiping between Page X and Page 1 triggers the activated call, but going to Page 1 then using back does not. Remove the EdgeNavigator and it works fine.

<App>
	<Router ux:Name="router"/>

	<JavaScript>
		function goToPage() {
			console.log("Go page");
			router.push("goto_page");
		}

		function page1_activated() {
			console.log("page1_activated");
		}

		module.exports = {
			goToPage : goToPage,
			page1_activated : page1_activated
		};
	</JavaScript>

	<ClientPanel>			
		<Navigator DefaultPath="home">
			<Page ux:Template="home">
				<EdgeNavigator>
					<PageControl ux:Name="containerControl">
						<Page ux:Name="page_x">
							<Text Value="Page X" />
						</Page>					
						<Page ux:Name="page_1">
							<Activated>
	        					<Callback Handler="{page1_activated}"/>
	    					</Activated> 						
							<Panel Tapped="{goToPage}">
							<Text Value="Page 1" />
							</Panel>
						</Page>
					</PageControl>	
				</EdgeNavigator>
			</Page>
			<Page ux:Template="goto_page">
				<Text Value="Page 2" />
			</Page>			
		</Navigator>
	</ClientPanel>
</App>

Hey Nicolai.

Is this all code that you have? I can’t see Router instance in your code.

Try to add this line right before ClientPanel and it should work:

<Router ux:Name="router" />

Hope this helps.

The code block display cuts the tops 2 lines and bottom. The router is defined there. This is just a mini example I created to show the issue. I am using Activated in my App to call JS. It works fine when swiping between pages using PageControl but does not get called when coming “back” from a page outside the PageControl. It was working fine until I added an EdgeNavigator to the page.

<App>

	<Router ux:Name="router"/>

	<JavaScript>
		function goToPage() {
			console.log("Go page");
			router.push("goto_page");
		}

		function page1_activated() {
			console.log("page1_activated");
		}

		module.exports = {
			goToPage : goToPage,
			page1_activated : page1_activated
		};
	</JavaScript>

	<ClientPanel>			
		<Navigator DefaultPath="home">
			<Page ux:Template="home">
				<EdgeNavigator>
					<PageControl ux:Name="containerControl">
						<Page ux:Name="page_x">
							<Text Value="Page X" />
						</Page>					
						<Page ux:Name="page_1">
							<Activated>
	        					<Callback Handler="{page1_activated}"/>
	    					</Activated> 						
							<Panel Tapped="{goToPage}">
							<Text Value="Page 1" />
							</Panel>
						</Page>
					</PageControl>	
				</EdgeNavigator>
			</Page>
			<Page ux:Template="goto_page">
				<Text Value="Page 2" />
			</Page>			
		</Navigator>
	</ClientPanel>
</App>

Hey!

Thank you for full code. I created issue ticket.