RDS Customizable for APEX 5.1

Background

Is there a way to set a parent for regions that allocated or assigned to Region Display Selector, especially when there are multiple RDSes in one page?

This is the first question when I used RDS in APEX 5.1. I think this is a common question after you find there is a Yes/No option for RDS without a parent node. Then I posted this question to Steven's Blog. er, Yes, I did.

It's an old post but Steven still replied and re-posted my question to his twitter after checking with his team. How professional! And then I got the answer is no. No default or original way but the workaround with template or region type.

Then I found the plugin RDS Customizable (link is original design with version 1.1 ). It's for APEX 4+. I used it on APEX 5.1 and found there are some slight bugs. Now I renew it to work gracefully with 5.1 and update source code to github folder.

• region_type_plugin_com_blogspot_apexnotes_apex_rds_customizable_V1.2.sql: plugin v1.2 source code
• RDS_Customizable_demo_app.sql: demo application exported from APEX 5.1

Following the link below to check demo:
https://apex.oracle.com/pls/apex/f?p=RDS_CUSTOMIZABLE:DEMO

Things I done

1. normalize RDS id to regionID || '_RDS' or staticID || '_RD'

OK. It's nothing lost without changing it. But according to my previous post Region and Region IDs. I think normalizing it will make it gracefully.  Very personal point.

-- get the id of the region into local variable
l_id := case upper(apex_plugin_util.escape(p_region.static_id,true)) 
         when 'R'||to_char(p_region.id) then to_char(p_region.id) 
         else apex_plugin_util.escape(p_region.static_id,true) 
         end;
...
-- open <div> and <ul>
htp.p('<div class="apex-rds-container">');  
htp.p('<ul class="apex-rds rds-customizable" id="'|| l_id ||'_RDS">'); 
...

2. add order of "regions_and_label" in the main sql statement to fix display order bug

Mentioned in original RDS Customizable post but not included in source code from v1.1 demo page.

   , regions_and_label as (
        select  regions.* 
               ,rownum     seq 
          from  regions
         union all
        select  * 
          from  custom_label 
         order by seq nulls last

Using "order by" to control the position of "ShowAll" tab.

3. set showing all tabs when ShowAll tab is displayed, otherwise show the first tab

  -- add the click event for the RDS region and trigger click on the 'Show All' "tab"
  apex_javascript.add_onload_code(
    'apex.widget.regionDisplaySelector("'|| l_id ||'",{"useSlider":true,"mode":"standard"});' ||
         'apex.jQuery("#'|| l_id ||'_RDS > li:' || case when l_display_ALL = 1 
                                                   then ( case l_ALL_position when 0 then 'first' else 'last' end )
                                                   else 'first' end || ' > a:first").trigger("click");');

Previous logic is to show the first tab after page rendering.

4. upgrade to use 5.1 released apex.widget.regionDisplaySelector

Line 2 in the code above point 3. I added the second parameter according to default RDS.

5. update the help text to display normally.

I suppose APEX5.1 changed the way to render html tags <a> and <span> in plugin Help Text. I updated the text to display normally when using this plugin in page designer.

In conclusion, RDS Customizable is a light-weight plugin with refined code by using "apex.widget.regionDisplaySelector" (now merge to widget.apexTabs.js) for front-end and using a class attribute as a parent-children reference between RDS and sub-region. It's really worth to try.

Thanks to
Steven, Art and Jorge again from the blog and twitter for giving answers.
Tereska Jagiello, the original developer of RDS Customizable plugin.