Trigger some method every time the page is "navigated to"

How-to Discussions
1

Given something like this:

<Page ux:Class="NotesEdit">
    <Router ux:Dependency="router" />
    <DockPanel>

        <JavaScript File="NotesEdit.js" />

        <StackPanel>
            <Text Value="{note.date}" />
            <Text Value="{note.description}" />
        </StackPanel>

    </DockPanel>
</Page>

I want to make something like this:

this.onEnter(function(){
    reloadNotes()
})

How can I achieve that?

2

use a Callback inside of WhileActive:

<Page>
    <WhileActive>
        <Callback Handler="{functionToCall}" />
    </WhileActive>
    ...
</Page>
3

Thank you Edwin.

I’m trying to find a way to do this in the JS logic, like the this.onParameterChanged method does, do you know if is even possible ?

Thnks

4

Just make NotesEdit.js expose the callback you want it to call, and when that’s called you know that the page is active.

<Page>
    <JavaScript>
        var isActive = false;
        module.exports = {
            whenActive: function() {
                isActive = true;
            },
            whenInActive: function() {
                isActive = false;
            }
        }
    </JavaScript>
    <WhileActive>
        <Callback Handler="{whenActive}" />
    </WhileActive>
    <WhileInactive>
        <Callback Handler="{whenInactive}" />
    </WhileInactive>
</Page>

You can obviously use an Observable as well by just wrapping the false: Observable(false) and setting the isActive.value = true; and vice versa

Another way that only works with ux:Class (Have not tested this):

<Page>
    <JavaScript>
        this.isActive; // Observable
    </JavaScript>
    <WhileTrue ux:Name="isActive" Value="true" />
    <WhileActive>
        <Change Target="isActive.Value" Target="true" />
    </WhileActive>
</Page>

I believe they will be making a this.onActive/this.onActivated property that you can bind to a function to, just like this.onParameterChanged

5

I believe they will be making a this.onActive/this.onActivated property that you can bind to a function to, just like this.onParameterChanged

Perfect, this will be probably what i’m looking for, a way to triger that method without writing in the UX MarkUp. Meanwhile I will implement the other sugestion via <WhileActive />. Thanks!

6

No problem!!

7

The <WhileActive /> doesn’t works in separated UX files (using <Router />, <Navigator /> and <Page ux:Class="NotesEdit" /> with <NotesEdit />

Unless someone knows how to trigger the in the separated UX Files, I need to mix this triggers in the MainView UX

    <Navigator DefaultTemplate="notesFind">

        <NotesFind ux:Template="notesFind" router="router">            <WhileActive>
                <Callback Handler="{findAllNotes}" />
            </WhileActive>
        </NotesFind>

        <NotesEdit ux:Template="notesEdit" router="router">            <WhileActive>
                <Callback Handler="{readSelectedNote}" />
            </WhileActive>
        </NotesEdit>

        <NotesEditAddPhoto ux:Template="notesEditAddPhoto" router="router">            <WhileActive>
                <Callback Handler="{readSelectedNote}" />
            </WhileActive    >
        </NotesEditAddPhoto>

    </Navigator>

Thnks.

8

Try adding the WhileActive inside the class itself, yet that should work

9

Inside the class is not working only directly in the “instance” (the markup in the mainview).

Tomorrow I will post my example (working and not working) so anyone can take a look.

Thanks!