{N} 4.0 how to navigate to frame


#1

Hi,

I’m having the following (dashboard directory):
root.xml - please see defaultPage…

<GridLayout xmlns="http://schemas.nativescript.org/tns.xsd" loaded="load">

    <Frame defaultPage="dashboard/dashboard/dashboard" id="dashboard-frame"></Frame>

    <StackLayout verticalAlignment="bottom" row="2" class="bottom-nav" id="bottom-Nav" backgroundColor="{{ bg }}">
        <GridLayout rows="*" columns="*,*,*,*,*" height="70">
            <Label class="icon0 foot-icon" text="{{ x }}" row="0" col="0" tap="{{ loadPage }}" data-id="0"></Label>
            <Label class="icon1 foot-icon" row="0" col="1" tap="{{ loadPage }}"  data-id="1"></Label>
            <Label class="icon2 foot-icon" row="0" col="2" tap="{{ loadPage }}"  data-id="2"></Label>
            <Label class="icon3 foot-icon" row="0" col="3" tap="{{ loadPage }}"  data-id="3"></Label>
            <Label class="icon4 foot-icon" row="0" col="4" tap="{{ loadPage }}"  data-id="4"></Label>

        </GridLayout>
    </StackLayout>
</GridLayout>

This is dashboard.xml that is loaded in app.js

application.run({ moduleName: "app-root" });

dashboard.xml

<Page class="page" loaded="loaded"
      xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:header-white="components/header-white" actionBarHidden="true">

    <GridLayout rows="120,*,20">

        <StackLayout row="0">
            <header-white:header-white/>
        </StackLayout>

        <ScrollView row="1" rowSpan="2" height="100%" class="scrollview" scrollBarIndicatorVisible="false">

            <StackLayout class="with-bottomnav">

               <Label text="Welcome back Michelle," class="welcome light"></Label>
                <Label class="info" textWrap="true">
                    <Label.formattedText>
                        <FormattedString>
                            <FormattedString.spans>
                                <Span text="You have completed "></Span>
                                <Span class="sign-link bold" text="15"></Span>
                                <Span class="sign-link" text=" of the allowed "></Span>
                                <Span class="sign-link bold" text="20"></Span>
                                <Span  class="sign-link" text=" hours this week"></Span>
                            </FormattedString.spans>
                        </FormattedString>
                    </Label.formattedText>
                </Label>

            </StackLayout>

        </ScrollView>

        <StackLayout row="2" class="footer">

        </StackLayout>

    </GridLayout>
</Page>

all works fine, but the problem is - how to navigate into this dashboard properly?
This normal approach will not work - i will see this page loaded, but without root.xml content - i will just see dashboard.xml but without root.xml applied.

global.goToPage = function(page,effect,clear=false) {
    var frameModule = require('ui/frame');
    var destination = page;
    var topmost = frameModule.topmost();

    var navigationEntry = {
        moduleName: destination,
        clearHistory: clear,
        backstackVisible: true,
        transition: {
            name:effect,
        }
    };
    topmost.navigate(navigationEntry);
};

model.login = function() {
        global.goToPage('dashboard/dashboard/dashboard');
    };

#2

Can you get an example running in the NativeScript Playground that we could look at?


#3

Hi @roblauer,
Thanks for the interest, but i was able to link this using:

var application = require("application");
application.run({ moduleName: "dashboard/root" });

#4

Hi @roblauer,
I was wrong, application.run will work but with the issues (it feels like page is loaded twice, some javascript is not working etc… So looks like bad way)
I’ve added some entry that expplains my issue, you can check here.

Kind regards,
Konrad.


#5

Hi @roblauer.

If you will load first frame from app.js you will see a button that redirects to the dashboard.
You will notice that there is no connected frame.
But if you will start the app using second line of code in app.js you will see dashboard and “text” that is pare ot this frame.
My problem is how to load dashboard using this button and also to have frame content.