Welcome!

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

Reply
Developer
i68040
Posts: 62
Registered: ‎02-05-2012
My Device: Classic

Dynamically populate DropDown with Options in QML?

Is there any way to dynamically add Options to a DropDown using QML/JavaScript? I have figured out how to clear the list:

 

DropDown {
                id: scanResultDropdownSelector
                title: "Selected Option:"
                selectedIndex: 0
                horizontalAlignment: HorizontalAlignment.Center
                Option {
                    text: "Current"
                    value: "Here we are"
                }
                Option {
                    text: "Old1"
                    value: "blah"
                }
                Option {
                    text: "Old2"
                    value: "YAB"
                }
            }

    // Clear list
    function clearList() {
        scanResultDropdownSelector.removeAll();
    }

 

Is there anyway to add options via QML? I see there is a .add(option) command exposed to QML, but I don't know how to create a new Option in JavaScript to make this work.

 

Developer
soaman
Posts: 849
Registered: ‎03-03-2011
My Device: Z10

Re: Dynamically populate DropDown with Options in QML?

Create a new Q_INVOKABLE method in your own class, pass it to QML and call it from JavaScript.
--------------------------------------------------------------------------------------
Leader of Ljubljana BlackBerry Developer Group
BlackBerry Certified Builder for Native Application Development
Developer
i68040
Posts: 62
Registered: ‎02-05-2012
My Device: Classic

Re: Dynamically populate DropDown with Options in QML?

In this case I was  hopeful that the .add(option) method that is exposed via QML would allow me to do something like this:

 

dropDownlist.add(new Option().setText("something").setValue("aValueHere")).

 

While the .add method has been marked as Q_INVOKABLE inside dropdown.h, the constructor for an Option has not been marked as Invokable.

 

What this means is that I'll need to manipulate my DropDown options from C++ rather than QML (For Beta3, anway)

Developer
i68040
Posts: 62
Registered: ‎02-05-2012
My Device: Classic

Re: Dynamically populate DropDown with Options in QML?

I put together a primitive CustomControl that lets me add Options to a DropDown via QML. It could be useful for educational purposes.

 

Download it here -or-

See details on my website

Developer
TheMarco
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB

Re: Dynamically populate DropDown with Options in QML?

Posted this on your blog as well:

 

Hey! Thanks for this!


However I'm having some issues with it. It seems I can add one item to it but if I add another one immediately after (basically like in your example) that option doesn't get added. No errors in the console either.


A second issue is the fact that I want to use onSelectedIndexChanged: { some code } but this impossible. It says that property doesn't exist.
Any ideas?

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

Developer
georg22
Posts: 247
Registered: ‎11-22-2011
My Device: Blackberry Playbook

Re: Dynamically populate DropDown with Options in QML?

A pure QML solution is possible, postet here   (scroll to the end of the article).

Developer
bbquincar
Posts: 304
Registered: ‎08-14-2012
My Device: PlayBook, Z10, Dev C

Re: Dynamically populate DropDown with Options in QML?

will your sample be updated for Gold version

BlackBerry 10 game reviews for the unknown, small and indie developers. Little games with big dreams. VeryBerryGames.com | Follow @VeryBerryGames | TwoCasualCoders.com | never casual on quality
Developer
i68040
Posts: 62
Registered: ‎02-05-2012
My Device: Classic

Re: Dynamically populate DropDown with Options in QML?

I wasn't planning on updating the sample as RIM got back to me with how to dynamically add options to a dropdown control in QML. I updated my article (linked above) with the details.
Developer
bbquincar
Posts: 304
Registered: ‎08-14-2012
My Device: PlayBook, Z10, Dev C

Re: Dynamically populate DropDown with Options in QML?

Ok ill check it reason I ask. I'm trying to have my dropdown populated by xml do u have a simple sample you could show me its driving me crazy. Similar with the segmenintedcontrols thanks.
BlackBerry 10 game reviews for the unknown, small and indie developers. Little games with big dreams. VeryBerryGames.com | Follow @VeryBerryGames | TwoCasualCoders.com | never casual on quality
Developer
i68040
Posts: 62
Registered: ‎02-05-2012
My Device: Classic

Re: Dynamically populate DropDown with Options in QML?

Sure. I spent a little time and came up with a sample project which can be downloaded here. There are a few details available on my website here.

 

The sample shows how to create an XMLReader class in C++ that passes a QVariantList back to QML. On the QML Side it shows how to populate a DropDown from the returned data.

 

While the class is fairly bare-bones, hopefully it helps you on your way.