CODEWITHSUNDEEP
nativescript
Marek Brzeziński
Marek Brzeziński

Reputation: 345

Get Frame's element on another page view

i have some Frame that points to dashboard/dashboard/dashboard:

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" loaded="load">
<GridLayout rows="*,60">
    <Frame defaultPage="dashboard/dashboard/dashboard/" id="dashboard"></Frame>
    <GridLayout row="1">
        <StackLayout verticalAlignment="bottom" row="2" class="bottom-nav">
            <GridLayout rows="*" columns="*" height="70">

                <Label class="icon4 foot-icon" row="0" col="0" id="ico4"></Label>
            </GridLayout>
        </StackLayout>
    </GridLayout>
</GridLayout>
</Page>

Now, i would like to use dashboard.js to target this Frame's element (ico4) in this case. All i want is to select this and add css class for this. But nothing works for me. I've tried this but without sucess:

dashboard.js:

var frame = require('ui/frame');
var topmost = frame.getFrameById('dashboard').getElementById('ico4');
var ic = topmost;
console.log(ic);

My question is - is this possible to target this ico4 in any way? Thank you.

Edit: I've Tried your path @Nick Iliev, but for me ico is undefined...

    var frame = require('ui/frame');
    var myFrame = frame.getFrameById("dashboard");

    // Its working the output :Frame<dashboard>@file:///app/dashboard/root.xml:3:5;
    console.log(myFrame);

    var myPage = myFrame.currentPage;
    // It's working too
    console.log(myPage);

    var ico = myPage.getViewById("ico4");

    // Not working - Undefined...

console.log(ico);

EDIT: I've added simple playground to show my problem: https://play.nativescript.org/?template=play-js&id=uVY4Ir

//app-root.xml (frame has ID)

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="load">
<GridLayout rows="*,60">
    <Frame defaultPage="home/home-page" id="dashboard"></Frame>
    <GridLayout row="1">
        <StackLayout verticalAlignment="bottom" row="2" class="bottom-nav">
            <GridLayout rows="*" columns="*,*,*,*,*,*" height="70">
                <Label id="ico1" text="test"></Label>
            </GridLayout>
        </StackLayout>
    </GridLayout>
</GridLayout>

Now home-page.js

var frameModule = require("tns-core-modules/ui/frame");
var HomeViewModel = require("./home-view-model");

var homeViewModel = new HomeViewModel();

function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = homeViewModel;

  var root = frameModule.getFrameById('dashboard');
// this console.log will show frame's info
  console.log(root);
// But this below undefined. Why the frame cannot find this element ?

  var ico = root.getViewById('ico1');
  console.log(ico);
}

exports.pageLoaded = pageLoaded;

Upvotes: 0

Views: 709

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

There is no getElementById in tns-core-modules but there is a page method called getViewById. To use it you will need to get the page reference through your current frame reference.

Here is an example of how to get the current page in a selected frame.

const frame = getFrameById("my-frame-id");
const page = frame.currentPage;
let ico = page.getViewById("ico4");

Upvotes: 1

Related Questions