Show page only on first time.

General
1

Hi all,

I’m new in fuse. currently i build app which is contains onboarding page that only show at first time.
My current structure like this.

	<Navigator DefaultPath="onBoard">
		<OnBoard ux:Template="onBoard" router="router" />
		<Welcome ux:Template="welcome" router="router" />
		<Login ux:Template="login" router="router" />
	</Navigator>

I want onBoard page only show once, the second time users open this app it should be go to welcome, how i can do it in fuse?
Thanks before.

2

I’ve found solution using match, but i don’t know it is the right method or not.

	<Match Value="{defaultPath}">
			<Case String="onBoard">
					<Navigator DefaultPath="onBoard" ux:Name="navigate">
						<OnBoard ux:Template="onBoard" router="router" />
						<Welcome ux:Template="welcome" router="router" />
						<Login ux:Template="login" router="router" />
					</Navigator>
			</Case>
			<Case String="welcome">
					<Navigator DefaultPath="welcome" ux:Name="navigate">
						<OnBoard ux:Template="onBoard" router="router" />
						<Welcome ux:Template="welcome" router="router" />
						<Login ux:Template="login" router="router" />
					</Navigator>
			</Case>
	</Match>
3

Hey!

A recommended way to handle this would be to create a file on app launch, and check if it exists before that. You could even use the file for something useful, like storing user settings or something similar. You can read more about FileSystem Module.

Here’s an example of how you could solve this:

<App>
    <Router ux:Name="router" />
    <JavaScript>
    var FileSystem = require("FuseJS/FileSystem");

    // path to our file which will be created on first app execution
    var path = FileSystem.dataDirectory + "/" + "settings.json";

    function firstLogin() {
        // look for file in filesystem
        FileSystem.exists(path)
            .then(function(x) {
                if(x == true) {
                    // if file exists, skip OnBoard page and go to Welcome page
                    router.goto("welcome");
                } else {
                    // write something in our file to know that this is first app lauch
                    FileSystem.writeTextToFile(path, JSON.stringify({showSplash: false}))
                        .then(function(content){
                            console.log(content);
                        }, function(error) {
                            console.log(error);
                        });
                }
            }, function(error) {
                console.log("Unable to check if file exists");
        });
    }

    // firstLogin() function will be executed on every app launch:
    firstLogin();

    module.exports = {

    }
    </JavaScript>

    <Navigator DefaultPath="onBoard">
        <OnBoard ux:Template="onBoard" router="router" />
        <Welcome ux:Template="welcome" router="router" />
    </Navigator>

    <Page ux:Class="OnBoard">
        <Router ux:Dependency="router" />
        <Panel>
            <Text Value="OnBoard" />
        </Panel>
    </Page>

    <Page ux:Class="Welcome">
        <Router ux:Dependency="router" />
        <Panel>
            <Text Value="Welcome" />
        </Panel>
    </Page>
</App>