Region and Region IDs

By

What's Region and Region IDs

A region is a plug or an area on a page using DIV tags as a container of other page components.

There are many IDs for a region in different phases. Here below is a RDS(Region Display Selector) region with the Standard template.


I would like to define them as following:
-- ID is the unique ID in database referring to section 1 in the picture.
-- So the ID of Region Display Selector in page 88 is 1421721788170690390.
ID := to_char(apex_application_page_regions.region_id);

-- cID is a fixed class for substitution string #REGION_CSS_CLASSES# in HTML div tag.
-- Here in the section 3, the value of cID is lto1421721788170690390_0.
cID := 'lto' || ID || '_0';

-- rID is a fixed value for substitution string #REGION_ID# in HTML div tag.
-- rID here is R1421721788170690390. 
rID := #REGION_ID# := 'R' || ID; 

-- sID is generated region ID in HTML div tag. It will be either the region's Static ID if defined, 
-- or if not will be an internally generated ID in the format 'R' || [Internal Region ID]. 
-- According to section 1, the STATIC_ID is null, so here sID is rID, R1421721788170690390 as displaying in section 3. 
sID := #STATIC_REGION_ID# := case apex_application_page_regions.static_id 
                             when null then rID 
                             else apex_application_page_regions.static_id 
                             end; 

-- iIDs are IDs generated in #BODY# substitution string and containing ID or STATIC_ID in HTML. 
-- Here in section 3, 1421721788170690390_RDS is one of iIDs. 
iIDs := inner IDs;

-- noID means there is no any of IDs above existing in HTML for specific region. 
-- Here if in section 3, there is no ID, cID, rID, sID or any of iIDs listed above, I will name noID. 
noID := null; -- there is not any of IDs above existing in HTML for specific region

Region IDs in various scenarios 

                                                                          Region IDs when template selected          Region IDs
REGION TYPE                           PLUG_SOURCE_TYPE                    #STATIC_REGION_ID#  #REGION_CSS_CLASSES#   when No Template
-----------------------------------   ---------------------------------   ------------------  --------------------   -------------------
Breadcrumb                            NATIVE_BREADCRUMB                            sID         cID                   noID
Calendar                              NATIVE_CSS_CALENDAR                          sID         cID                   sID
Chart                                 NATIVE_JET_CHART                             sID         cID                   iIDs and Region not display
Classic Report                        NATIVE_SQL_REPORT                            sID         cID                   iIDs
Classic Report (based on Function)    NATIVE_FNC_REPORT                            sID         cID                   iIDs
Data Upload Column Mapping            NATIVE_DATA_UPLOAD_COLUMN_MAPPING            sID         cID                   noID
Help Text                             NATIVE_HELP_TEXT                             sID         cID                   noID
Interactive Grid                      NATIVE_IG                                    sID         cID                   iIDs
Interactive Report                    NATIVE_IR                                    sID         cID                   sID
List                                  NATIVE_LIST                                  sID         cID                   noID
Map Chart                             NATIVE_FLASH_MAP                             sID         cID                   sID
PL/SQL Dynamic Content                NATIVE_PLSQL                                 sID         cID                   noID
Region Display Selector               NATIVE_DISPLAY_SELECTOR                      sID         cID                   iIDs
Static Content                        NATIVE_STATIC                                sID         cID                   noID
Tree                                  NATIVE_JSTREE                                sID         cID                   iIDs
URL                                   NATIVE_URL                                   sID         cID                   noID

Badge List [Plug-In]                  PLUGIN_COM.ORACLE.APEX.BADGE_LIST            sID         cID                   noID and region not display
Flot Pie Chart [Plug-In]              PLUGIN_COM.ORACLE.APEX.FLOT.PIE              sID         cID                   sID
HTML 5 Bar Chart [Plug-In]            PLUGIN_COM.ORACLE.APEX.HTML5_BAR_CHART       sID         cID                   iIDs
Mini Calendar [Plug-In]               PLUGIN_COM.ORACLE.APEX.MINICALENDAR          sID         cID                   iIDs
Slide Tooltip [Plug-In]               PLUGIN_COM_ORACLE_APEX_SLIDETOOLTIP          sID         cID                   iIDs
Translated Message [Plug-In]          PLUGIN_COM.ORACLE.APEX.TRANSLATED_MESSAGE    sID         cID                   noID
Tag Cloud [Plug-In]                   PLUGIN_COM.ORACLE.APEX.TAG_CLOUD             sID         cID                   noID
Actually, region IDs varies depending on region type defined and template selected, especially when no template assigned.
  • line 1-16 are default region types in APEX 5.1 and from line 18, they are some common region plugin. Here I don't check legacy or unsupported types.
  • when template assigned, all regions will contain sID and cID in HTML because substitution strings #STATIC_REGION_ID# and #REGION_CSS_CLASSES# are defined in all templates from Theme42 as default.
  • when there is no template selected for a region,  it becomes interesting. 
    • A Chart type region will not be displayed on a page even though there are iIDs generated for it. A Badge List [Plug-In] type region will not be displayed on a page and there are noID generated for it. Rendering failed.
    • noID: if define a Breadcrumb type region without a template selected, there will be noID generated but rendering normally.  Some other types are the same, such as Help Text, List, Static Content, and so on. The main reason is there is no any region IDs above used or referred in #BODY# content.
    • sID: there are some region types without template which still generate sID, such as Calendar, IR, Map Chart and Flot Pie Chart [Plug-In]. Normally, if sID generated, iIDs for region inner structure will be generated. But why? Why there is no template selected but these regions still generate sID? I suppose front-end logic (JS lib) relays on the div with sID and when rendering, database logic detect no template and then generate div with sID as reparation.
    • iIDs: Classic Report, IG, RDS, Tree, HTML 5 Bar Chart [Plug-In], Mini Calendar [Plug-In], and Slide Tooltip [Plug-In] will not generate sID but iIDs. That means these regions use sID to compose their inner HTML structure. 

How to quickly check if a template contains IDs?

In my previous post Locate Substitution String in clob Template column using regexp, there is a handy way to get this.

Which one is more reliable for jquery selector, sID or cID?

If a APEX application is using Theme42 without changing the default region templates, I would like to say cID is more reliable for jquery selector.  Because the value of cID is fixed and unique on one page.

How Plugin generates its IDs?

Utilizing the third function in my post Locate Substitution String in clob Template column using regexp will be able to find some clues. :)
-- change proper application_id
select r.application_id as app,
       t.line_number as l,
       t.column_index as c,
       t.attribute_string,
       to_char(r.display_name) as plugin_display_name
  from apex_appl_plugins r,
       table(utl_apex_substitutionstr.locate_orphan_substitutionstr(p_keywords => 'static_id',
                                                                    p_clob     => r.plsql_code)) t
 where r.application_id = 250
union all
select r.application_id as app,
       t.line_number as l,
       t.column_index as c,
       t.attribute_string,
       to_char(r.display_name) as plugin_display_name
  from apex_appl_plugins r,
       table(utl_apex_substitutionstr.locate_orphan_substitutionstr(p_keywords => 'STATIC_ID',
                                                                    p_clob     => r.plsql_code)) t
 where r.application_id = 250
 order by 1, 5, 2, 3
Output from SQLDeveloper:

Comments

Post a Comment

Popular posts from this blog

Note for APEX 5.1 UI, Theme, Templates and Substitution Strings

By
Image
From application shared components, User Interface section, we can get the hierarchy diagram as below.  Source SVG There are three levels, User Interface, Theme, and Template. UI attributes specify user interface options, including application level logo, favicon, user interface detection (especially application level CSS files for screen auto-detection ) and current theme Theme as a collection of templates, include theme level JavaScript, CSS, icons, image, skin style, and other static files serving current theme, component default template assignment, region default template assignment, and global template options (references between CSS classes and global style options, i.e. Button type option: tiny, Small or large) Template:  Major template types include page, region, report, button, breadcrumb, list and label (with yellow background color) Theme42 also includes templates for Legacy Calendar and Popup LOV as default but I don't draw in the diagram N...
Keep reading

RDS Customizable for APEX 5.1

By
Image
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 ...
Keep reading

Use Plugin Code Editor - Part 1/4: Demo

By
Image
If you want to use Code Editor plugin in Oracle APEX internal applications, you need 6 steps below to make it happen from scratch. get an application with f4000 theme (see  Use Theme: APEX 5.0 ) import f4000 to your APEX and export plugin "Code Editor" create test pages using Code Editor detect and add missed CSS and JavaScript files grant corresponding privilege to application parsing schema check issues and fix rock and roll Note: Here using internal Theme APEX5.0 is not mandatory but it's helpful from scratch. Now, you could jump over these steps,  import my demo applications and start you work with Code Editor. Demo If you find page loading without GIFs, please click HD GIFs link below (Due to the GIF size, it will take a while to load.): Native Hybrid Migrated Native Main features: theme APEX 5.0 supported all item type Code Editor plugins with 9 supported code modes with 11 items based on supported modes (PL/SQL Expression and Fun...
Keep reading