Oracle Apex 實用筆記系列 7 - 用Region Selector實作标簽功能

需求

在一已有一級Tab Set的Apex項目中，筆者被要求實作一個二級Tab Set。一個可行的方案是在一個頁面中用一個Region Selector來實作。但是Region Selector有一些自己的特性，比如

第一個選項是Select All

如果從其他頁面傳回，無法記憶之前的選擇項

是以這篇文章着重對以上特性的修改以期模拟标簽頁的實作。

步驟

1. 建立Page1, Page2, Page3
   1. 可使用Apex提供的向導實作頁面的建立。
   2. 在Page2建立hidden item,比如P2_RETURN_TAB,設定value protected為No。 類似地，在Page3建立P3_RETURN_TAB；
2. 在Page1的設定
   1. 建立一個Hidden item，比如P1_REGION_SELECTOR, 設定value protected為No；
   2. 建立2個Region，需要注意的地方是在每個Region的配置中的Attribute頁面，把Region Display Selector設定為Yes。 
   3. 由于Region1和Region2的Region Display Selector被設定為Yes，預設地，除了Region1和Region2的名稱，有額外的一個Select All标簽出現在标簽行的第一項，并且它成為了被選中的那個；
   4. 建立一個Dynamic Action: Name: Selector Load; Event: Page Load; No condition；
   5. 建立一個True Action: Action:Execute Javascript Code;
   6. Code:

   7. $('.apex-rds li:first-child').remove();
      $('.apex-rds li:first-child').addClass('apex-rds-first');
      
      $selector=$v("P1_REGION_SELECTOR");
      if($selector==''){
      $selector='Region1'; 
      }
      
      $('span:contains('+$selector+')').parent().trigger('click');
                 

   8. 建立一個Dynamic Action: Name: Selector Click; Event: Click; Selection Type:JQuery Selector;jQuery Selector:.apex-rds a;No condition；
   9. 建立一個True Action: Action:Execute Javascript Code;
   10. Code:

   11. $selector=$(this.triggeringElement).find('span').text();
       $s('P1_REGION_SELECTOR',$selector);
                  

   12. 在Region1建立1個連結指向Page2,在連結中設定P2_RETURN_TAB的值為P1_REGION_SELECTOR的值。類似地，在Region2建立1個連結指向Page3,在連結中設定P3_RETURN_TAB的值為P1_REGION_SELECTOR的值。
3. 在Page2的設定
   1. 建立一個button. Action: Redirect to Page in this Application; Page: 1; Set These Items: P1_REGION_SELECTOR; With These values: &P2_RETURN_TAB.;
   2. 在Branch to Page or URL, Branch Point: On Submit:After Processing(After Computation, Validation and Processing); Target Type: Page in this Application; Page:1; Set These Items: P1_REGION_SELECTOR; With These values: &P2_RETURN_TAB.;
4. 在Page3的設定與在Page2的設定類似。

注意事項

本文是對複雜問題的簡化，比如在Region1中到Page2的連結可以不是簡單連結<a>而是Report中每一行的link。