1.How？

参考文档：

https://docs.oracle.com/en/database/oracle/application-express/18.2/htmdb/managing-navigation-menus.html#GUID-2C1F991A-5D69-496A-9059-B2612D24FDB5

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.初试化菜单列表条目

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.创建动态导航菜单

Step3.1.点击<共享组件>->[导航菜单]

image.png

Step3.2.点击[创建]

image.png

Step3.3.选择[从头开始]

image.png

Step3.4.新建的动态导航菜单叫“Cux Navigation Menu”，类型选择[动态]

image.png

Step3.5.填写动态的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.点击[创建]即可

image.png

Step3.7.创建完成

image.png

Step4.把刚创建的导航菜单应用到当前的Universal主题

Step4.1.点击<共享组件>->[用户界面属性]

image.png

Step4.2.点击Desktop前的[编辑]

image.png

Step4.3.当导航菜单列表设置为刚创建的Cux Navigation Menu

image.png

Step5.大功告成，查看运行结果

image.png

2.Why？

CUX_APEX_APP_LIST_ENTRIES表字段的含义解析

序号	字段名称	字段含义	我的备注
1	LEVEL_VALUE	表示几级菜单项，1表示一级菜单项，2表是二级菜单项，以此类推	必须有值
2	LABEL_VALUE	表示菜单项显示的文本	必须有值
3	TARGET_VALUE	表示点击菜单项之后要链接到的页面	必须有值
4	IS_CURRENT	表示是不是当前选中的菜单项，官方文档的说法是这个地方可以设置NULL，或者'YES'，'NO'，设置为NULL的时候被点击的菜单项会高亮显示	这个字段值的需要读者自行测试，后面会介绍如何通过设置主题颜色来实现粉色高亮显示刚刚被点击过的菜单项，我测试的结果是：要么全部赋值NULL，要么全部赋值'NO'只留一个'YES'
5	IMAGE_VALUE	image.png	这个地方我只测试了可以使用Font APEX图标库里class名
6	IMAGE_ATTR_VALUE	未测试	NULL即可
7	IMAGE_ALT_VALUE	未测试	NULL即可
8	DISPLAY_ORDER	表示菜单自上而下的显示顺序	查询的时候一定要通过该字段进行排序，排过序之后，APEX就知道你定义的二级菜单到底应该归属到哪个一级菜单之下，即自动把二级菜单归属到离它最近的上一条记录中的一级菜单之下

3.Additional

粉色高亮显示选择的导航菜单项

Step1.创建完成.点击[ThemeRolloer]，找到Navigation Style，修改选中状态为粉色。

Step2.保存该主题样式，并命名为“Cux Vita”。

Step3.当该样式应用为当前使用的样式。

image.png

相关的APEX标准表

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';