Expand and Collapse all Tree Nodes


APEX comes with a nice region type which is a tree view. During the wizard creation, you have the option to add buttons to expand all and collapse all nodes - but after the fact, there is no option in the tree settings to add this functionality - so you either have to recreate the tree region specifying that option or have to know what you have to do in order to add in that functionality.

I came across this post on the OTN forums - http://forums.oracle.com/forums/message.jspa?messageID=4407552#4407552 - which give all the information about what you have to do to expand and collapse all nodes (I'm sure there are others, but that just happened to be the one I found).

This basic gist of it is this - there are two convenience functions to do the expanding and collapsing of all nodes - apex.widget.tree.expand_all(tree_id) and apex.widget.tree.collapse_all(tree_id), respectively - where tree_id is the unique identifier of the tree. You can either hard code it in (which is what is done when the buttons are created with the wizard, and in the examples on that post) or create a page item to reference the unique idenifier, and pass that in to the function call.

To find the unique identifier, you just have to view the page source. I find if you inspect the first node in the tree, the actual div with the tree id is 2 elements above. The other technique (which i have used as I find it avoids hard coding values) is to create a page item, and reference that item in the call to the javascript function(s).

So create a hidden page item (for example, P1_TREE_ID), followed by an item computation to run on page load with the source type of: SQL Query (return single value) and specify the source as:


select 'tree' || tree_id
from apex_application_page_trees
where page_id = :APP_PAGE_ID

Then, in my actual tree region, I specified region source as:

<a href="javascript:apex.widget.tree.expand_all('&P1_TREE_ID.')">Expand All</a> | <a href="javascript:apex.widget.tree.collapse_all('&P1_TREE_ID.')">Collapse All</a>


nb: This of course assumes your page only has one tree region on it, otherwise that computation will not work properly. Anyway, I can't think of a situation to use more than one tree on a page.

And there you have it. Expand and Collapse all links for your tree

Popular posts from this blog

Installing Oracle Instant Client on Ubuntu

Now that Oracle has enabled us to download instant client without any click through for accepting the license , I wanted to revisit a seamless install of the instant client on a new set up. Ubuntu has the documentation about installing the instant client here: https://help.ubuntu.com/community/Oracle%20Instant%20Client. First - because Oracle provides their releases in RPM archive format (or a tarball), in order to have an installer you need to create a DEB archive. There is a package in the archives, alien, which aids this process. This gives the start of the script: #!/bin/bash # Install dependencies sudo apt install alien The 3 packages the Ubuntu documentation tells us to retrieve are: - devel - basic (I opt for basiclite instead) - sqlplus So, over at the downloads page: https://www.oracle.com/database/technologies/instant-client/linux-x86-64-downloads.html we can grab the link. # Download files. Example specific to 19.3 # Some links were not correct on the do...
Read more

Report row buttons firing a dynamic action

Image
A lot of the time on reports of data, we'll define a link column, and specify an image which is the beloved pencil icon. Which is good and all, but looking in the Sample Database Application (packaged application), they have taken a different approach to style links - a button that stretches the width of it's containing cell. So, the UI ends up looking like so: So, is this done? Well first, you define a new column for the placeholder. Suppose I want my link column to be Report, I define an extra column in my query: , 'Report' report_link Then I need to go to my new column's attributes, and change the column type to a link. And, in the link attributes, set the text to what you want displayed. Here, I'm just going to display the value of the new column and point to my desired page. So I set the target page, then also the Link text as #REPORT_LINK#. At this point the report will just show link text, as we expect. So, then to replicate t...
Read more

Customising APEX built-in validation messages

Image
I was working on an application and when trying to save some data, I was getting these error messages despite the fact I had no validations on my page. And what I wanted to know, how do I change these message contents? APEX does some default checking based on entered data. A prime example of this is a date field. On a brand new application, I created a region and added a page item with the type as "Date Picker". If I enter text into the date input field that is not a date conforming to the date format, I will get the following error: "Date Field does not match format DS."   First of all, DS? What is that? This particular application was created by uploading a spreadsheet, and I did not set that. In fact, my spreadsheet had no date data to begin with. In saying that, a quick search in the globalization attributes, and somehow this application has the date format set to "DS". So first, let us change that - I like to use DD-MON-YYYY. So that fixes the error ...
Read more