Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.

Posts: 614
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View


I am having  issues getting a custom qml component (List) to identify root (TabbedPane) and push and new Page(screen) into view.

Application Backgound Info

General Structure of my BB10 App:

Main.qml - > custom list - > list items from custom data model -> press list item from custom list & push page -> press back to return to main.qml(which has custom list component)

List item data is being pulled in via mydata.xml. I also specify page urls in mydata.xml.



import bb.cascades 1.0

TabbedPane { showTabsOnActionBar: true id: topLevelTabbedPane Tab { title: qsTr("Tab 1") imageSource: "asset:///images/actionBar/icon1.png" Page { id: tab1 Container { id: mainContainer opacity: 1.0 translationY: 113 layout: DockLayout { } // awesomeCustomList holds custom list components awesomeCustomList { } } } ... }



This is custom list container. Inside I link another custom qml page for customizing each individual list item(customListItems.qml) .


import bb.cascades 1.0

Container {
    ListView {
        id: awesomeListContent
        dataModel: XmlDataModel {
            source: "mydata.xml"
        //tell cascades how to show each list item
        listItemComponents: [
            ListItemComponent {
                type: "item"
                //how each item should look
                //specified by customListItems.qml
                customListItems {



This is where I perform my magic. Basically I am styling list items and controls in a custom way. My issue is, in the onTouch handler, I am unable to target ID from main.qml (topLevelTabbedPane) and push page into view. I suspect that the ID isn't accessible somehow. Not sure there is an example of this type of nesting and access in the docs.

import bb.cascades 1.0

Container {
    id: thisLabel
    layout: DockLayout {
    Container {
        layoutProperties: DockLayoutProperties {
            horizontalAlignment: HorizontalAlignment.right
        Label {
            id: thisItem
            text: ListItemData.title
            onTouch: {
                // topLevelTabbedPane is ID of TabbedPane in main.qml ListItemData.pagelocation is 
// qml url specified in mydata.xml topLevelTabbedPane.deprecatedPushQmlByString(ListItemData.pagelocation) } } } }

Data Model


<item title="Horse Page" pagecontent="horse.qml" />
<item title="Dog Page" pagecontent="dog.qml" />
<item title="Pig Page" pagecontent="pig.qml" />

Relevant Resources I've Referenced

Property Alias - http://devblog.blackberry.com/2012/07/qml-tip-property-aliases/#more-10246

The property alias reference demos how to exposed nested element's property to its parent/root. I need to expose top level property(root) to nested component within a component.


Error I am Getting

ReferenceError: Can't find variable: topLevelTabbedPane

How can I make this work?

Posts: 614
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View



is actually
per mydata.xml structure. typo correction
Posts: 499
Registered: ‎05-07-2012
My Device: developer
My Carrier: developer

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

Is this still an open question, or was your 2nd post the solution?



Posts: 614
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

This is still an open question. Second post was typo correction.

Posts: 329
Registered: ‎05-07-2012
My Device: BB Alpha
My Carrier: N/A

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

[ Edited ]

Have you tried using a declarative context on your TabbedPane?


NavigationPane example:


In your C++ file:


    NavigationPane* m_Nav;

     * QML document reference for bottom pane. the BottomPane.qml reference is loaded into this variable.
    QmlDocument* m_BottomPaneContentQML;

     * The Cascades construct contains the one element used for the NavigationPane above.
     * Specifically, it is used for the side pane of the application.
    Page* m_SidePane;

     * QML document reference for side pane. the SidePane.qml reference is loaded into this variable.
     * From this object, we are able to extract the QDeclarativeContext to access constructs defined
     * in the file (see below)
    QmlDocument* m_SidePaneContentQML;

     * QML Declarative context used to allow binding between QML document and code.
     * In our application, this is required in order to allow toggling the QML navigation pane
     * via use of a button from within the code.
    QDeclarativeContext* m_SidePaneQmlContext;


m_Nav = qml->createRootNode<NavigationPane>();
m_SidePane = m_SidePaneContentQML->createRootNode<Page>();
// Obtain document contexts, they are used to bind a properties for the ContentPanes.
// and make the navigation pane and application available for QML.
//NOTE: The name "_navPane" is used in the QML file. This is where the link is made.
m_SidePaneQmlContext = m_SidePaneContentQML->documentContext();
m_SidePaneQmlContext->setContextProperty("_navPane", m_Nav);


Now in your QML file (in different QML file from where the NavigationPane is declared), you can do something like this, or use deprecatedPush or whatnot:


    paneProperties: NavigationPaneProperties {
        backButton: ActionItem {
            title: "Back"
            onTriggered: { 
                // _navPane is set in code.
                _navPane.pop ();

 Let me know if this helps,