DirectNavigation - Sidebar

How-to Discussions
1

Hey, I’m trying to set it up where when a user clicks the picture or the different pages on the sidebar it will navigate to those pages. I currently have a Mainview.Ux and a Sidebar.ux (Mainview is utilizing the Edgenavigator to bring out the sidebar) just like in the socialmedia example.

Here’s a look at my sidebar when it’s opened:

file
LpvP1mOfTqdJ-legacy-files-3vEvX2SWsIq5H4Oo-2rUfLEvv-YGd_OPYG3Vwj4gI.png376×668

and here’s a look at my code:

Mainview.ux

file

file

Sidebar.ux

file

Have any suggestions?

2

Our Tab bar navigation example shows how to do this in a single UX file. While this won’t cover your use case directly, it outlines how to navigate to specific pages in general.

The idea is to give each Page a ux:Name (perhaps Name is the same these days, but I don’t think so off the top of my head):

<Page ux:Name="page1">

Then you can use the Active property on the PageControl (or Navigation, whichever you’re using) to the name of the Page, and it will navigate there. For example, here’s a Clicked trigger that uses a Set animator to navigate to a page with ux:Name="page1" inside a PageControl called pages:

        <Clicked>
          <Set pages.Active="page1" />
        </Clicked>

This works from purely UX, but currently as we’re still working on features that allow you to set properties exposed in other UX files, you’ll need to use JS to accomplish this.

If you bind your PageControl's Active property to an Observable that contains a string corresponding to the current Page's ux:Name, then you can simply change the Observable's value property to navigate to a specific page. An example:

JS:

var currentPage = Observable("page1");

function someHandler() {
    currentPage.value = "page2";
}

UX:

<PageControl Active="{currentPage}">
    <Page ux:Name="page1"> ... </Page>
    <Page ux:Name="page2"> ... </Page>

The last piece of this puzzle then involves making sure the bindings in your Sidebar.ux and Mainview.ux actually correspond to the same currentPage (or whatever you choose to name it) Observable. I’m guessing your Mainview.ux instantiates a Sidebar somewhere? In this case, as long as your JavaScript tag exists on a parent node that’s common to all of the nodes that bind to it, the bindings should cascade and bind to the same Observable (at least in Fuse 0.8.5 and above, which is currently available here and will be out officially in the next few days). I would try that first, and let me know if you run into any issues. We’re still hammering out the details for working with larger projects with many UX files and many JS contexts/bindings, so there may be kinks :slight_smile:

3

Jake, you’re the man! Thanks for the walkthrough. That makes so much sense…

The only question I have would be the JS image you provided: I’m still a bit fuzzy on the concept of the Observable() function. Is that making the currentPage (in your exmample) able to be called in another .ux file and be useable within that scope?

I’ve read the documentation and the guide but I’m still trying to really grasp that.

I understand exactly what I want do do, it’s just knowing the right code and syntax that I’m having trouble with.

Again, thank you so much and the videos are awesome!

4

Also, for the JS { Would I need to add a currentPage.value for each page that I make i.e. Calendar, Stats, Camera Bag, etc.}

5

file

6

What do I need to put in the block under Clicked to make it navigate to the page I want?

file