Problem with navigation to another frame


{N} 4 introduced new way of navigation.
In the app.js we can use:{ moduleName: "app-root" });

Then app.root xml have this : (it navigates to the login page)

<Frame defaultPage="login/login" id="app-root"></Frame>

All is working fine.
But i have a folder named dashboard.
It has another frame: (dashboard/frame.xml)

<Frame defaultPage="dashboard/dashboard/dashboard" id="dashboard"></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>

Now, lets supose that in app.js i can have this:

//{ moduleName: "app-root" });
//{ moduleName: "dashboard/root" });

Now if i will uncomment 1 or 2 line, all will work fine.

Bur, my question is: how to navigate properly to dashboard frame from another page that has button with event that should load this dashboard?

Contract.xml page has a button with sign tap attached

model.sign = function() {
        // Only this below will work, but produces some kind of issue, as looks like this frame is loaded twice -there are some glitches
        var application = require("application");{ moduleName: "dashboard/root" });

        // This will not work
        var frameModule = require("ui/frame");
        var frame = frameModule.getFrameById("dashboard/root");

        // This will not work
        var frameModule = require('ui/frame');
        var topmost = frameModule.topmost();

basicly, only{ moduleName: “dashboard/root” }); navigates to this page but with some issues…


{N} 4.0 how to navigate to frame

You must forgot that whatever you pass to should be a frame. Whatever you pass to navigate method should be a Page. You can’t pass a frame to navigate method.



Hi @manojdcoder,
Thanks for the reminder.
Now i’m confused, as seems i can’t navigate to this page properly.
This below will navigate, but only dashboard page will be loaded, and the Frame not (no valid way to achieve this in Nativescript ?) Thanks.

var frameModule = require('ui/frame');
var topmost = frameModule.topmost();


I’m sorry but I guess you are not understanding the navigation flow yet Or need to architecture your app better. From what I understood, you don’t need another frame at all - just use the root frame to navigate to any page.



I’ve created Playground.

Now you may try to uncomment in app.js:
//{ moduleName: “dashboard/root” });

Dashboard page will be loaded (and you will see “text” label that is in root.xml frame, and the button that is in dashboard page .)
So, frame and dashboard page is loaded properly.
Now, you may want to run first line in app.js{ moduleName: “app-root” });

You will see that app-root is loaded and the connected home-page.
this has a button that links to dashboard, if you click, you will see dashboard, but without Frame (so, no “text” text from dashboard/root.)
This is my only concern.
Does this make sense ?



I’m sorry but I guess you are not understanding the navigation flow yet Or need to architecture your app better.

I will try to explain this :
App has 2 frames - root.xml loads login page, and there you have login page, forgot password, sign up, add user data etc…
When user has all the data filled, or already signed up, he should end up at dashboard page.
And the dashboard has it’s own frame - which serves like bottom navigation.
My only problem is on how to load this dashboard properly, after when user end sign up or login.



Or - let’s supose that i can live without first frame - that frame which loads login page.
So, maybe better to ask if i can load this dashboard frame, and make it invisible to the moment when user navigates into dashboard page ?



Try this,

1 Like


Hi @manojdcoder,
Thank you very much. It seems to work, but there is only small issue.

Dashboard label has tap action (test) and this navigates to the test.xml.
Then bottom frame is lost. Is there any way to have this frame always present ?



Everything you need is already in the docs. topmost() will return the recent frame you used to navigate. When you call it from dashboard the recent frame you used to navigate was root frame but you need dashboard frame here. So you have to use getFrameById(frameId)

1 Like


Thank you - all works well.