Last couple of weeks/days when i went through the Oracle APEX forum there was quite a lot of questions about the APEX trees.
I really worked a lot with them and want to describe how to use them.
1. This
how to will base on the following table ddl:
CREATE TABLE "LOG_SYSTEMS"
( "S_ID" NUMBER NOT NULL ENABLE,
"S_NAME" VARCHAR2(100) NOT NULL ENABLE,
"S_DESCRIPTION_SHORT" VARCHAR2(100),
"S_PARENT" NUMBER NOT NULL ENABLE,
"S_RESPONSIBLE_DEPARTMENT" VARCHAR2(5),
"S_CONTACT_PERSON" VARCHAR2(100),
"S_TYPE" VARCHAR2(20)
CONSTRAINT "PK_S_ID" PRIMARY KEY ("S_ID") ENABLE
)
2. How does the standard SQL selection of a APEX tree look like
select "S_ID" id, -- Primary key
"S_PARENT" pid, -- Parent key
"S_NAME" name, -- Displayed value (node description)
'f?p=&APP_ID.:1:&SESSION.::NO::P1_SYSTEM:'||"S_ID" link, -- linked page
null a1,
null a2
from "#OWNER#"."LOG_SYSTEMS"
3. How to improve the displayed value (node)
You can concat several columns:
-- name with description
"S_NAME" || ' (' || "S_DESCRIPTION" || ')' AS name,
-- name with html (big)
'<b>' || "S_NAME" || '</b>' AS name,
-- name with icon in front of it
'<img src="#WORKSPACE_IMAGES#tree_group.png" border="0" style="vertical-align:middle" alt="Group">  ' || "S_NAME" AS name,
-- Using of the case command to see different node values
CASE
WHEN "S_TYPE" = 'GROUP' THEN '<b>' || "S_NAME" || '</b>'
WHEN "S_TYPE" = 'SYSTEM' THEN "S_NAME" || ' (' || "S_DESCRIPTION" || ')' END AS name,
4. How to use the link column
-- Standard link column would link to page 1 and overwrite the
-- value of :P1_SYSTEM
'f?p=&APP_ID.:1:&SESSION.::NO::P1_SYSTEM:'||"S_ID" link,
-- Using several values to overwrite in page
'f?p=&APP_ID.:1:&SESSION.::NO::P1_SYSTEM,P1_S_NAME,P1_FROM_TREE:'|| "S_ID"||','||"S_NAME"||',YES' AS link,
-- Link to a specified page via node value
'f?p=&APP_ID.:' ||"S_ID" || ':&SESSION.::NO::' AS link,
-- Link to a specified page via node value and javascript
'javascript:change_page(' || "S_ID" || ')'
Go Edit Page > HTML Header
<script language="JavaScript" type="text/javascript">
function change_page(v_page) {
var v_url = 'f?p=&APP_ID.:' + v_page + ':&SESSION.::::';
window.location.href = v_url;
}
</script>
-- If you use your tree as a pop up tree and want to give back a node
-- value to the parent page with submit and close the pop up
-- page automatically afterward
-- Info: I used it as a self made pop up tree item
'javascript:close_page(' || "S_ID" || ',''' || "S_NAME" || ''')' AS link,
-- I also used a hidden item in the pop up page to fill with the parent
-- page id &P101_WHEREFROM.
Go Edit Page > HTML Header
<script language="JavaScript" type="text/javascript">
function close_page(v_id,v_value) {
var v_page = 'P' + '&P100_WHEREFROM.' + '_S_ID';
var v_page_display = 'P' + '&P101_WHEREFROM.' + '_S_NAME';
var l_field_id = opener.document.getElementById(v_page);
l_field_id.value = v_id;
if(l_field_id.getAttribute('onchange') || l_field_id.onchange) {l_field_id.onchange()}
var l_field_value = opener.document.getElementById(v_page_display);
l_field_value.value = v_value;
if(l_field_value.getAttribute('onchange') || l_field_value.onchange) {l_field_value.onchange()}
close();
window.opener.doSubmit('POPUP_RELOAD');
}
</script>
I used these examples in my application TIA:
http://apex.oracle.com/pls/otn/f?p=25500:1
Login:
guest Password: apexuser
Download it from:
http://www.oracle-apex-award.de/TIA-Technische-Infrastruktur.70.0.html
The application is in German but the developments (used variables, hints) are made in English.
Hope you can use it in your application and of course you are welcome http://www.blogger.com/img/blank.gifto give me some feedback.
Update 12.09.2011:
The example application doesn't work anymore. I currently work on a new version which includes the new APEX tree as well:
http://apex-at-work.blogspot.com/2011/09/logbuch.html
I will try to extend the view of the standard APEX tree as well as I did with the old one. Of course I will write about it. :)
Update 26.09.2011:
I just saw a nice example application about APEX trees:
http://apex.oracle.com/pls/apex/f?p=36648:27
Opera 9.51:
Internet Explorer 6 (with MultipleIE):
Firefox 3:
Opera 9.51:
Internet Explorer 6 (with MultipleIE):
Firefox 3:
