Oracle Apex：如何在单页面内实现Wizard步骤切换而非跳转页面

方法一：动态区域+条件显示 #

• 创建一个隐藏页面项（如PXX_CURRENT_STEP），默认值设为1，用来存储当前步骤编号。
• 为每个向导步骤创建独立的动态区域，给每个区域设置服务器端条件：PXX_CURRENT_STEP = 对应步骤编号（比如步骤1的条件是PXX_CURRENT_STEP = 1）。
• 在每个区域添加「下一步」「上一步」按钮，按钮行为选择提交页面，并在按钮的「提交后设置」中更新PXX_CURRENT_STEP：
  • 下一步按钮：将PXX_CURRENT_STEP设为当前步骤+1
  • 上一步按钮：将PXX_CURRENT_STEP设为当前步骤-1
• 若需要步骤导航栏，创建静态列表，每个列表项的目标设为提交页面，提交时设置PXX_CURRENT_STEP为对应步骤编号，再用CSS给当前步骤的列表项添加高亮样式。

方法二：Tabs组件改造 #

• 创建Tabs区域，每个Tab对应一个向导步骤。
• 用CSS隐藏默认Tabs导航栏：

  .t-Tabs-nav { display: none; }
  

• 添加自定义步骤导航按钮/列表，点击时通过JavaScript切换Tab：

  apex.tabs.change('tabs-XX', 'tab-XX-step1', true); // 替换为你的Tabs静态ID和Tab ID
  

• 给「下一步」「上一步」按钮绑定JavaScript事件，调用apex.tabs.change()切换对应Tab；若需表单验证，切换前加入校验逻辑：

  if (apex.item('PXX_INPUT1').isEmpty()) {
      apex.message.showErrors([{type: "error", location: "page", message: "请填写必填项"}]);
      return false;
  }
  apex.tabs.change('tabs-XX', 'tab-XX-step2', true);
  

方法三：JavaScript+CSS控制DOM显示 #

• 将所有步骤内容放在同一区域内，每个步骤用独立div包裹，添加类名（如.wizard-step）和唯一ID（如step-1、step-2）。
• 初始化时只显示第一个步骤：

  document.querySelectorAll('.wizard-step').forEach((step, index) => {
      step.style.display = index === 0 ? 'block' : 'none';
  });
  

• 创建页面项PXX_CURRENT_STEP跟踪当前步骤，编写切换函数：

  function goToStep(stepNum) {
      // 隐藏所有步骤
      document.querySelectorAll('.wizard-step').forEach(step => {
          step.style.display = 'none';
      });
      // 显示目标步骤
      document.getElementById(`step-${stepNum}`).style.display = 'block';
      // 更新页面项
      apex.item('PXX_CURRENT_STEP').setValue(stepNum);
  }
  

• 给按钮绑定onclick事件，比如下一步按钮绑定goToStep(apex.item('PXX_CURRENT_STEP').getValue() + 1)。

注意事项 #

• 确保所有步骤的表单元素在同一页面表单内，避免数据丢失。
• 若需保存中间数据，可在按钮提交时执行页面进程，将数据写入临时表或会话状态。
• 自定义导航栏时，可通过动态动作监听PXX_CURRENT_STEP的变化，给当前步骤导航项添加高亮类。

内容的提问来源于stack exchange，提问作者Pavle Vasiljevic