1.How？
參考文檔：
https://community.oracle.com/search.jspa?q=Dynamic+Navigation+Menu+Lists
https://community.oracle.com/message/14363198#14363198
https://community.oracle.com/message/14220243#14220243
Step1.新建一張菜單條目表
create table CUX_APEX_APP_LIST_ENTRIES
(
LEVEL_VALUE NUMBER,
LABEL_VALUE VARCHAR2(100),
TARGET_VALUE VARCHAR2(100),
IS_CURRENT VARCHAR2(100),
IMAGE_VALUE VARCHAR2(100),
IMAGE_ATTR_VALUE VARCHAR2(100),
IMAGE_ALT_VALUE VARCHAR2(100),
DISPLAY_ORDER NUMBER
)
Step2.初試化菜單列表?xiàng)l目
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '首頁', 'f?p=&APP_ID.:1:&SESSION.::&DEBUG.::::', '', 'fa-home', '', '', 1);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '一級菜單1', 'f?p=&APP_ID.:2:&SESSION.::&DEBUG.::::', '', 'fa-emoji-sweet-smile', '', '', 10);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '一級菜單2', 'f?p=&APP_ID.:3:&SESSION.::&DEBUG.::::', '', 'fa-emoji-slight-smile', '', '', 20);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (1, '一級菜單3', 'f?p=&APP_ID.:4:&SESSION.::&DEBUG.::::', '', 'fa-emoji-happy-smile', '', '', 30);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (2, '二級菜單11', 'f?p=&APP_ID.:5:&SESSION.::&DEBUG.::::', '', 'fa-emoji-big-eyes-smile', '', '', 11);
insert into CUX_APEX_APP_LIST_ENTRIES (LEVEL_VALUE, LABEL_VALUE, TARGET_VALUE, IS_CURRENT, IMAGE_VALUE, IMAGE_ATTR_VALUE, IMAGE_ALT_VALUE, DISPLAY_ORDER)
values (2, '二級菜單21', 'f?p=&APP_ID.:6:&SESSION.::&DEBUG.::::', '', 'fa-emoji-cool
', '', '', 21);
Step3.創(chuàng)建動態(tài)導(dǎo)航菜單
Step3.1.點(diǎn)擊<共享組件>->[導(dǎo)航菜單]
image.png
Step3.2.點(diǎn)擊[創(chuàng)建]
image.png
Step3.3.選擇[從頭開始]
image.png
Step3.4.新建的動態(tài)導(dǎo)航菜單叫“Cux Navigation Menu”，類型選擇[動態(tài)]
image.png
Step3.5.填寫動態(tài)的SQL查詢語句
select LEVEL_VALUE,
LABEL_VALUE,
TARGET_VALUE,
IS_CURRENT,
IMAGE_VALUE,
IMAGE_ATTR_VALUE,
IMAGE_ALT_VALUE,
DISPLAY_ORDER
from CUX_APEX_APP_LIST_ENTRIES
order by DISPLAY_ORDER asc
image.png
Step3.6.點(diǎn)擊[創(chuàng)建]即可
image.png
Step3.7.創(chuàng)建完成
image.png
Step4.把剛創(chuàng)建的導(dǎo)航菜單應(yīng)用到當(dāng)前的Universal主題
Step4.1.點(diǎn)擊<共享組件>->[用戶界面屬性]
image.png
Step4.2.點(diǎn)擊Desktop前的[編輯]
image.png
Step4.3.當(dāng)導(dǎo)航菜單列表設(shè)置為剛創(chuàng)建的Cux Navigation Menu
image.png
Step5.大功告成，查看運(yùn)行結(jié)果
image.png
2.Why？
CUX_APEX_APP_LIST_ENTRIES表字段的含義解析
| 序號 | 字段名稱 | 字段含義 | 我的備注 |
|---|---|---|---|
| 1 | LEVEL_VALUE | 表示幾級菜單項(xiàng)，1表示一級菜單項(xiàng)，2表是二級菜單項(xiàng)，以此類推 | 必須有值 |
| 2 | LABEL_VALUE | 表示菜單項(xiàng)顯示的文本 | 必須有值 |
| 3 | TARGET_VALUE | 表示點(diǎn)擊菜單項(xiàng)之后要鏈接到的頁面 | 必須有值 |
| 4 | IS_CURRENT | 表示是不是當(dāng)前選中的菜單項(xiàng)，官方文檔的說法是這個地方可以設(shè)置NULL，或者'YES'，'NO'，設(shè)置為NULL的時候被點(diǎn)擊的菜單項(xiàng)會高亮顯示 | 這個字段值的需要讀者自行測試，后面會介紹如何通過設(shè)置主題顏色來實(shí)現(xiàn)粉色高亮顯示剛剛被點(diǎn)擊過的菜單項(xiàng)，我測試的結(jié)果是：要么全部賦值NULL，要么全部賦值'NO'只留一個'YES' |
| 5 | IMAGE_VALUE |  image.png
|
這個地方我只測試了可以使用Font APEX圖標(biāo)庫里class名 |
| 6 | IMAGE_ATTR_VALUE | 未測試 | NULL即可 |
| 7 | IMAGE_ALT_VALUE | 未測試 | NULL即可 |
| 8 | DISPLAY_ORDER | 表示菜單自上而下的顯示順序 | 查詢的時候一定要通過該字段進(jìn)行排序，排過序之后，APEX就知道你定義的二級菜單到底應(yīng)該歸屬到哪個一級菜單之下，即自動把二級菜單歸屬到離它最近的上一條記錄中的一級菜單之下 |
3.Additional
粉色高亮顯示選擇的導(dǎo)航菜單項(xiàng)
Step1.創(chuàng)建完成.點(diǎn)擊[ThemeRolloer]，找到Navigation Style，修改選中狀態(tài)為粉色。
Step2.保存該主題樣式，并命名為“Cux Vita”。
Step3.當(dāng)該樣式應(yīng)用為當(dāng)前使用的樣式。
image.png
相關(guān)的APEX標(biāo)準(zhǔn)表
SELECT *
FROM APEX_APPLICATION_LISTS
where workspace = 'CUX'
and application_id = 115;
SELECT *
FROM APEX_APPLICATION_LIST_ENTRIES
where workspace = 'CUX'
and application_id = 115
and list_name = 'Desktop Navigation Menu';
