# Navigation and Nested PageControl

**URL:** <https://forums.fusetools.com/t/navigation-and-nested-pagecontrol/3220>\
**Category:** How-to Discussions\
**Created:** [January 26, 2017, 9:35am UTC](https://forums.fusetools.com/t/navigation-and-nested-pagecontrol/3220 "2017-01-26T09:35:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cjay](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@Cjay](https://forums.fusetools.com/u/Cjay)\
**Post date:** [January 26, 2017, 9:35am UTC](https://forums.fusetools.com/t/navigation-and-nested-pagecontrol/3220/1 "2017-01-26T09:35:10Z")

</div>

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/CbyBDBYWWoMu-image-1485422957207.jpg)

Above is a sample of what i am trying to achieve with fuse. When a user clicks a feed item, the app navigates to the next page and shows the content of the item clicked. However, swiping to other feed item screens should be possible. I hope the design above explains better.  
Thanks

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [January 26, 2017, 6:22pm UTC](https://forums.fusetools.com/t/navigation-and-nested-pagecontrol/3220/2 "2017-01-26T18:22:39Z")

</div>

You could do it like this:

- Place a Navigator with 2 pages at the top level: one page for the menu and another that contains a PageControl.
- Inside the PageControl you keep the different subpages (your feeds).
- When a button is clicked in the menu you use JS to set the correct subpage inside the PageControl and then you navigate from the menu page to the PageControl.

Then you should be able to swipe between the subpages and use a backbutton to go back to the menu.

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [January 26, 2017, 6:26pm UTC](https://forums.fusetools.com/t/navigation-and-nested-pagecontrol/3220/3 "2017-01-26T18:26:13Z")

</div>

Something like this:

```auto
<App>
	<ClientPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");
			var itemlist = Observable({pId: "p1"}, {pId: "p2"}, {pId: "p3"} );
			function gosub(arg){
				pc.seekToPath(arg.data.pId);
				router.push("itemroot");
			}
			module.exports = {gosub,itemlist}
		</JavaScript>
		<Router ux:Name="router"/>

		<Navigator DefaultPath="menu">
			<DockPanel ux:Name="menu">
				<StackPanel>
					<Each Items="{itemlist}">
						<Panel Color="#ddf" Margin="10" Padding="10" Clicked="{gosub}">
							<Text Value="{pId}"/>
						</Panel>
					</Each>
				</StackPanel>
			</DockPanel>

			<DockPanel ux:Name="itemroot">
				<PageControl ux:Name="pc" >
					<Page ux:Name="p1" Color="Red"/>
					<Page ux:Name="p2" Color="Blue"/>
					<Page ux:Name="p3" Color="Green"/>
				</PageControl>
			</DockPanel>
		</Navigator>
	</ClientPanel>
</App>

```

Notice that we use `seekToPath()` to set the correct subpage without triggering the transition animations in the PageControl.

---

<div class="post-metadata">

**Author:** ![Cjay](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@Cjay](https://forums.fusetools.com/u/Cjay)\
**Post date:** [January 27, 2017, 8:28am UTC](https://forums.fusetools.com/t/navigation-and-nested-pagecontrol/3220/4 "2017-01-27T08:28:04Z")

</div>

Working as expected. Thank you

---

<div class="post-metadata">

**Author:** ![Cjay](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@Cjay](https://forums.fusetools.com/u/Cjay)\
**Post date:** [January 29, 2017, 11:28am UTC](https://forums.fusetools.com/t/navigation-and-nested-pagecontrol/3220/5 "2017-01-29T11:28:36Z")

</div>

Hi Remi, on trying to implement this, I realize that it’s close to what I’m trying to achieve.  
But my challenge is that the pageControl pages are dynamic( populated from the DB).  
After clicking the router.push  
Is there a wait to stall it from executing until the PageControl is updated?