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".


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.

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


var lPassengers = [];
$("#van-passengers a.checked").parent()
  .each(function() { lPassengers.push($(this).attr("id")) });

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


See it in action: Demo