Membuat Tree dengan custom icon

Jika anda telah mengimplementasikan APEX tree, tentu tahu bahwa ada 3 tree template
1. Default : tanpa icon
2. Blue : dengan icon default warna biru
3. Classic : dengan icon folder


Namun untuk digunakan sebagai menu navigator tentu kurang menarik dan tidak merepresentasikan proses atau sekedar folder, nah untuk membuatnya cukup mudah.
Lakukan langkah2 berikut :

• Buatlah nested table (table yang mereference ke table itu sendiri). Jangan lupa untuk membuat kolom untuk membedakan tipe node.

CREATE TABLE T_TREE
(
  ID           NUMBER(10)                       NOT NULL,
  SEQ          NUMBER(5),
  DESCRIPTION  VARCHAR2(100 BYTE),
  ALIAS        VARCHAR2(50 BYTE),
  PAGE         NUMBER(10),
  STATUS       VARCHAR2(2 BYTE),
  MENU_ID      NUMBER(10),
  LINK         VARCHAR2(500 BYTE),
  TOOLTIP      VARCHAR2(100 BYTE)
)

• Upload data.
• Buatlah page dalam apex.
• Upload icon yang kan dipakai melalui shared component>images>upload file image
• Buatlah region tree dengan query seperti ini.

select case when connect_by_isleaf = 1 then 0
            when level = 1             then 1
            else                           -1
       end as status, 
       level, 
       DESCRIPTION as title, 
       case when "STATUS" = 'X' then '#WORKSPACE_IMAGES#pt_process2.png'
            when "STATUS" = 'M' then '#WORKSPACE_IMAGES#folder.gif'
            when "STATUS" = 'F' then '#WORKSPACE_IMAGES#form.png'
            when "STATUS" = 'R' then '#WORKSPACE_IMAGES#article.gif'
       end         as icon,
       "ID" as value, 
       "TOOLTIP" as tooltip, 
       case when "STATUS" in ('F','R') then
        'f?p=&APP_ID.:'||"PAGE"||':&SESSION.::NO::P1_SELECTED_NODE:'||"ID" 
       else
        'f?p=&APP_ID.:1:&SESSION.::NO::P1_SELECTED_NODE:'||"ID"
       end as link 
from T_TREE
start with "STATUS" = 'X'
connect by prior "ID" = "MENU_ID"
order siblings by "SEQ"

Oke selanjutnya anda akan lihat hasilnya

eng..ing..eng....