Dynamically Create CheckBoxes, Their Labels, And Their Select Values In Flex

I recently had to build a Flex 2.0 application that included a form with a number of checkboxes. The specific number of checkboxes and their labels needed to be based on information pulled from a database since that data could frequently change. Additionally, the select value for each checkbox must be based on information pulled from a database (some of the checkboxes needed to be checked initially).

To document how I solved this challenge and to help others below are the details of my solution. You can view a demo of this solution here: /flex/testcombobox/bin/testcombobox.html (right click to view the source). I recommend you view the source while reading through this explanation.

When the Flex 2 application is done creating itself, it calls a CFC function that returns a query (see functions initVars and handleGetAllAudienceResult). The results returned from the CFC method are placed into an ArrayCollection object (audienceAryCol). Each object in this ArrayCollection has a data and label field. The data value is the id number for the audience (for example 3) and the label value is the audience abbreviation (for example SF) associated with that id value.

To display the checkboxes in a form, I use a Tile component. Inside the Tile component I used the Repeater component, with the audienceAryCol as its data provider. The Repeater component will create a checkbox for each object stored in the data provider.

The CheckBox component is created using the rp.currentItem.label for the checkbox's label value. rp is the id of the Repeater component. currentItem is the current object in the data provider being used to create this checkbox. The label field's value is the text I want to display on the label (for example CH).

To determine if the checkbox is checked (select = "true"), I call a function named getChecked. I pass to this function the data field value for the current object being used to create this checkbox. I am using a separate array to store the id values of the checkboxes that should be checked (initially this array, named audienceIDAry is storing 1 and 3 [see the initVars function]).

Inside the getChecked function I set a boolean variable (isChecked) initially to false. Then I search through the audienceIDAry for the data value passed to this function. If that data value is in the array, that means the checkbox should be selected already and I change isChecked to equal true. The function getChecked then returns the boolean value. This way I can have specific checkboxes checked depending on id values stored in a different array. In the actual application, these array values (the data id numbers for the check boxes that should be checked at the beginning) are pulled from a database.

When the user clicks on a checkbox to either select or de-select it, I call a function named updateAudience. I pass to this function event.currentTarget.getRepeaterItem(). Once all the checkboxes are rendered, you cannot refer to the Repeater's current item (rp.currentItem). Instead you must use event.currentTarget.getRepeaterItem(), which returns the object used when that specific checkbox was created. My updateAudience function has a generic Object parameter to receive this object.

Inside the updateAudience function I search through the array's elements to see if the data field's value of the object that was passed to the function is already stored in the array. If it is, that means the checkbox was already selected, so the user clicked on the check box to de-select it. Therefore, I need to remove that data value from my audienceIDAry.

If the data field's value of the object that was passed to the function is NOT in the audienceIDAry that means the checkbox was not already selected and the user clicked on it to select that checkbox. Therefore, I need to add that data value to my audienceIDAry.

The audienceIDAry will always hold the id values for those checkboxes that are checked. I could then use this array to update my database by sending the array to a CFC function.

Now I have an application that can render dynamically a number of checkboxes and their labels. The application can also dynamically determine which checkboxes should initially be checked and also keep track of which checkboxes the user selects. If I update the database table that stores the id and abbreviation values, my Flex program doesn't need to be changed. It will render the correct checkboxes next time the application is loaded.

Related Blog Entries

Hi there
I'm getting an error
'nnot access datasource leadership'
# Posted By AndyC | 11/16/06 1:31 PM
Thanks for letting me know. It is a problem with my web host and I've asked them to fix it. The datasource was working fine earlier.

You can still load the application and view the source for now.

# Posted By Bruce | 11/16/06 2:54 PM
Should be working now.
# Posted By Bruce | 11/16/06 3:07 PM
Hello, just my 2 cents in case someone will come here to browse for this problem... and wondering what's going wrong :p

you have to use "event.currentTarget.getItemRepeater()" to retrieve the item used by the repeater to generate your component!!

trying to use the currentItem a below as you would for the label, won't work!!

even trying to bind it won't work! (a compilation error will occur, braces are messed up)

thanks for all the help, great blog!
# Posted By Daniel Rodrigues | 12/5/06 11:46 AM

Thanks for the comment, but I'm just a little confused. I think I'm pretty clear in my article that you must use event.currentTarget.getRepeaterItem() when using the Repeater component if you want to refer to the Repeater's current item.

Is there something I wrote that was confusing?
# Posted By Bruce | 12/5/06 3:43 PM
Ups, sorry, the paragraph slipped slightly trough my fingers, and I really was killing my brain to get to this one... And being a newby I got enthusiastic about focusing my own troubles :p

I apologize, you may well remove my comment! Silly me!

# Posted By Daniel Rodrigues | 12/6/06 1:59 AM
I also found that if you set a hard coded id for the element that is to be repeated, you can then treat the id variable as an array and loop through and check the selected property.


<mx:Repeater id="rpMa" dataProvider="{myDP}">
<mx:CheckBox id="chbMissionAlert" label="{rpMa.currentItem.strValue}" />

i can then loop through chbMissionAlert as though it is an array.

for (var i:Number = 0; i < chbMissionAlert.length; i++)
if (chbMissionAlert[i].selected)
# Posted By Ashley Gibson | 2/6/07 3:53 PM
hi bruce.very useful stuff it is.

i have simulate 'checkboxes in combo-box' module.

Dataprovider to combo-box modified & i have generate dynamic array of checkboxs on title window.select all check-box selects all consecutives checkboxes & vice-a-versa.

# Posted By prashant shelke | 2/14/07 10:49 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.