Don't duplicate your radio items 🧐

A few days ago I've managed to produce a very weird bug that was hard to figure out. Thankfully, it was only in a demo application. I hope this blog post will help somebody to fix it a bit faster.

The problem...

...was that I couldn't click on the second radio group item with label "Accounting".

How I did it

I've created two radio group items. The first one that I've created was P58_RADIO (with label "Radio Group") and the second one was a duplicate of the first one so it was automatically named P58_RADIO_1. After that, I've moved that item before P58_RADIO and suddenly I couldn't click on "Accounting" label of the second radio group item (as shown above).

The problem is how APEX internal engine renders radio group items. This is the code for the radio item named P58_RADIO:

If you take a closer look at input and label HTML tags of radio buttons you can see how APEX is generating the ID and FOR HTML attributes: item name + underscore + sequence (starting from 1). In my case, "Accounting" label had FOR attribute that was equal to the ID of a duplicated item (P58_RADIO_1) and that didn't allow me to click on it.

How to fix it

I don't expect from APEX team to change the way how radio items are rendered so just be careful how you're naming your page items. 

CSS fix for Null Display Value

Also, in APEX 18.2.0.00.12 (and probably in some lower version), there's a UI bug with horizontal radio group items where property "Display Null Value" is turned on. The display value for null values is displayed in a row before other radio group item values. To fix it, use the following CSS:

Enjoy!

Tested in APEX 18.2.0.00.12.

APEX 18.1: Fix Interactive Grid JS error in translated apps

Recently one of our clients upgraded APEX from 5.1 to 18.1 and all Interactive Grid regions/pages were instantly "broken". There was some strange JS error ("...to few arguments") in the console window.

After some investigation I found out the cause of the error. It's actually reported as a known issue (28202781 - INTERACTIVE GRID IN TRANSLATED APP GIVES ERROR ON UPGRADE). Apparently the text string APEX.IG.SUMMARY was changed in APEX 18.1 to have fewer parameters and if you have translated application it will raise a JS error at runtime. I don't know why APEX raises error in this case and I hope that this will be fixed in some next release, but for now here's the way how you can fix this.

Of course, you can go to APEX builder > Shared Components > Text Messages and translate it there with the new text message that will have exactly two parameters (if you have less than two you'll again get JS error). Original text is Interactive Grid. Report: %0, View: %1.

You can also do it with PL/SQL script:

BEGIN
  FOR i IN (SELECT workspace_id
              FROM apex_workspaces
             WHERE workspace = :WORKSPACE_NAME)
  LOOP          
    apex_util.set_security_group_id(i.workspace_id);
  END LOOP; 
  
  FOR i IN (SELECT *
              FROM apex_application_translations
             WHERE application_id = :APP_ID
               AND translatable_message = 'APEX.IG.SUMMARY')
  LOOP
    apex_lang.update_message(
          p_id           => i.translation_entry_id,
          p_message_text => 'Interactive Grid. Report: %0, View: %1');
    COMMIT;
    EXIT;
  END LOOP;
END;
/

Tested with APEX 18.1.0.00.45

Enjoy!

On Demand Process Bug

In my last post I wrote about security of on demand application processes. While I was testing this I've noticed a bug in APEX version 4.2.6.00.03 and APEX 5 EA2 (probably in some older versions too).

If you have on demand application process (without authorization scheme) and call it from public page (e.g. login page 101) you'll get additional unwanted data in response message.

For example, if you create public on demand application process like this that outputs some string like"OK":

and call it in some on load dynamic action on public page (like login page):

When you take a look at console window you'll see additional data with "OK" string:

If you are expecting that your message is returning something in JSON format you'll get an JS error on page.

I've reported a bug to APEX team and they've fix it for version 5.