How to Utilize APEX Navigation List Into an Object Security

Long time ago before APEX 5 release, i am prefer using tree as main navigation. Now APEX 5 offer us more awesome style using list as main navigation.

Ok let me show you to adopt this APEX view as authorization scheme to view/access menu base on role granted by main navigation menu which is APEX_APPLICATION_LIST_ENTRIES

1. Display APEX_APPLICATION_LIST_ENTRIES as tree
• The Query

 select case when connect_by_isleaf = 1 then 0
            when level = 1             then 1
            else                           -1
        end as status
      , level
      , entry_text as title
      , entry_image as icon
      , list_entry_id as value
      , null as tooltip
      , null as link
   from APEX_APPLICATION_LIST_ENTRIES
  where application_name = 'APPS_NAME'
    and list_name = 'List name'
  start with list_entry_parent_id is null   
connect by 
  prior list_entry_id = list_entry_parent_id
  order siblings by display_sequence

• Use same icon as List
change this : Region Attributes >> Settings >> Icon Type : fa
• Display List as Tree

2. Use on role entry
3. Create Authorization scheme base on role
4. Use Authorization on pages, list

APEX 5 Tree Enhancement

APEX Early Adopter 3 telah release, kemaren telah terdaftar dan mencoba nya. Banyak sekali peningkatan yang signifikan dalam versi ini, yang paling ingin saya coba adalah universal theme.

Berikut beberapa ujicoba yang telah saya lakukan.

• Mencoba implementasi jstree terbaru ke dalam APEX. dalam hal ini kita memperoleh feature
• APEX dapat menerima file zip library dan otomatis di unzip kedalam Static Workspace Files.

• Kita tidak perlu merubah referensi apapun di file CSS, tinggal pakai seperti halnya kita melakukan zip di file explorer.

• Mencoba APEX tree.
• Ada jenis tree baru yaitu : APEX Tree

• APEX tree bisa memakai custom vector icon seperti font-awesome

• Contoh query

 select case 
          when connect_by_isleaf = 1 then 0
          when level = 1             then 1
          else                           -1
        end as status 
      , level
      , m.description as title
      , case 
          when m.status = 'X' then 'fa-home fa-lg'
          when m.status = 'M' then 'fa-folder-open-o fa-lg'
          when m.status = 'F' then 'fa-book fa-lg'
          when m.status = 'R' then 'fa-table fa-lg'
          when m.status = 'T' then 'fa-tasks fa-lg'
          when m.status = 'C' then 'fa-bar-chart fa-lg'
          when m.status = 'S' then 'fa-cubes fa-lg'
        end as icon
      , m.id as value
      , m.tooltip as tooltip
      , 'f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::::P3_ID,P3_SELECTED:'||m.id||','||m.id as link 
   from my_menu m
  start with m.status = 'X'
connect by prior m.id = m.parent_id
  order siblings by m.SEQ

Implementasi jsTree dalam APEX

Jika anda telah mengimplementasikan APEX tree dan kurang sreg dengan style-nya. Maka kita bisa mencoba dengan mengimplementasikan jsTree ke dalam APEX.

Sebenarnya APEX tree telah memakai jsTree yang dimodifikasi dan dibundle dalam library js APEX. Namun yang dipakai masih versi lama. Librari jsTree ada di folder #IMAGE_PREFIX#libraries/jquery-jstree.

Anda sekarang bisa memakai jsTree versi stabil dari jstree v.1.0pre yang dapat di download dari sini.
Berikut referensi yang bisa anda pakai dalam membangun jstree kedalam apex.

• jsTree Documentation.
• Tom's Blog tentang ajax tree.

 Oke tanpa banyak nyengnyong lagi kita coba construct jsTree dalam APEX :

1. Buatlah konstruksi pl/sql AJAX callback dengan nama GET_NODE_DATA dengan return xml data:

declare
      l_xml         VARCHAR2(32767):='';
      l_loop_counter NUMBER(5);
BEGIN
      FOR i IN (SELECT m.id,m.STATUS,
                       m.menu_id parent_id,
                       m.description name,
       case when .. then 
--- define your dynamic icon for node here
       end   tree_image,
                      case   when
--- define your dynamic style for node here e.g : color,font
                      end tree_style,                      
                      m.TOOLTIP as tooltip, 
                      null as link,                      
                      m.STATUS type_menu,m.alias
                  FROM your_table m
                 START WITH m.menu_id is null
                CONNECT BY PRIOR m.id = m.menu_id 
                order siblings by m.seq
                )
      LOOP
         l_xml := l_xml || ''||
         '<![CDATA['||i.name||']]>';
      END LOOP;
         l_xml := l_xml || '';
      htp.prn(l_xml);
EXCEPTION
      WHEN OTHERS THEN
         RAISE;
END;

2. Buatlah js function untuk membangun tree yang dipanggil saat windows on load.

function loadDataTree() {
    apex.server.process("GET_NODE_DATA", null,
                            {
                                dataType: 'text',
                                success: function (pData) {
                                    constructTree(pData);
                                }
                            }
                       )
}

function constructTree(pData) {
    $(function () {
        var treeCon = $("#treeContainer").jstree({
            "plugins": ["themes", "xml_data", "ui", "cookies"],
            "ui": {
                "select_limit": 2,
                "select_multiple_modifier": "alt"
            },
            "core": {
                "animation": 700,
                "initially_open": [1,3], "load_open": true
            },
            "xml_data": {
                "data": pData
            },
            "themes": {
                "theme": "classic",
                "dots": false,
                "icons": true
            },
           "cookies": { prefix: "tree1", opts: { path: '/' } }
        });
 $("#treeContainer").on("dblclick", "a", function (e, data) {
    document.location.href = $(e.target).attr('href');
      });
    });
};

3. Buatlah sebuah region dengan region source :
4. Demo bisa dilihat disini untuk implementasi jstree on apex.oracle.
5. Preview image 

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