Alex Nuijten wrote up a nice blog post, APEX: Tree with Checkboxes, on how to add checkboxes to the APEX Tree component. In the article he shared a method to add checkboxes to an APEX Tree. In his next blog post he is going to share how to show the tree with the values pre-selected from the database. I needed to have this functionality and at the time of this posting he hadn't been able to finish his next post.
This post will share the method I used to pre-select the checkboxes and save the checkbox selections based on values from the database. Alex may share a different, more elegant method (maybe using JSON), but this is how I did it based on my requirements.
In my case, the selected items are retrieved and stored in a single database field with the selected values stored as a colon-delimited string. In my example, the item that stores the checked values is "P93_PASSENGERS".
First, I followed the steps in Alex's post to add the checkboxes to the tree items. In my example, the Static ID I chose for the tree is "van-passengers".
![](f?p=3834120:100:0:APPLICATION_PROCESS=GEF:::FID,AID:861,3834129)
Select and Show the checkboxes from database value
Create a Dynamic Action with the Event set to "Page Load" with an "Execute JavaScript Code" true action.
$.each( $v("P93_PASSENGERS").split(":"),
function(intIndex, objValue) {
$("li#"+objValue+".leaf a:first").click();
}
);
Lines 1 and 2: This will take the string value in the page item and create an array that we can iterate through and run a function on each value.
Line 3: Find leaf node and "click" it to trigger the change event on the tree which will handle the logic for the parent nodes.
![](f?p=3834120:100:0:APPLICATION_PROCESS=GEF:::FID,AID:843,3834129)
Save the selected checkboxes to the database value
Change the Save button "Action when Button Clicked" to "Defined by Dynamic Action".
Create a Dynamic Action with the Event set to "Click", the Selection Type set to "Button", and the button set to "SAVE (Apply Changes)" (or whatever your save button is named).
Add a true action:
Action: Execute JavaScript Code
Code:
var lPassengers = [];
$("#van-passengers a.checked").parent()
.each(function() { lPassengers.push($(this).attr("id")) });
$s("P93_PASSENGERS",lPassengers.join(":"));
Lines 1-3: Iterate through all the selected checkboxes and add their id to an array. ("van-passengers" is the static id I gave to my tree region)
Line 4: Join all the values in the array into a colon-delimited value and save it to the page item.
Add another true action to submit the page.
Action: Submit Page
Request/Button Name: SAVE
![](f?p=3834120:100:0:APPLICATION_PROCESS=GEF:::FID,AID:841,3834129)
See it in action: Demo