Sunday, November 10, 2019

Region Display Selector - How to Prevent Scroll on Page Load

A few days ago I visited my dear friends Aljaž Mali and Andrej Grlica and they had one interesting case. They had a page where they used region display selector in Scroll Window mode to display some regions in tabs. Since region display selector wasn't positioned on top of the page, on page load navigation was scrolled down to the first tab region (as in this example).

To fix it, the first thought from Andrej and me was to somehow do it with JavaScript, but after we examined JS API we concluded that there isn't any clean solution.

And then, as always, four eyes are better than two...we came out with a nice but dirty solution.

The Fix

To fix it you need to:
  • create a dummy region with Region Display Property turned on an put it before all other regions with that property on
  • use region template - Blank with Attributes 
  • add Static ID (in our case it was noScrollTab)
  • add the following CSS to the page either as inline CSS or to the external static file (preferred way)

How?

What have we done here? We created a region on the first position in region display selector - the region that usually is scrolled down to on page load and then with CSS we've positioned it to the top left corner of the page and hid it.

The demo is available here.

Tested in APEX 19.2.0.00.18.

Enjoy!


Thursday, November 7, 2019

APEX 19.2: Finally, API for component export

I don't remember when I was so excited about the new APEX feature as at the moment when I've discovered that there's a new parameter in procedure apex_export.get_application called p_components that enables component export. I know, it's small, but it opens a big playground.

Maybe the reason for this excitement is that for some time now, I'm working on an APEX app for creating patches of database object and APEX components and the only missing piece was API for component export. I had that working before APEX 19.2, but I had to use an internal export procedure which is not so convenient.

The only thing that you could do with the apex_export API before 19.2 was to export a whole application or all components in some predefined structure.

From APEX 19.2 you can export any component that you want through the API. So, how can you do that...


The Code...


... is pretty straight forward. Just select component from a new dictionary APEX_APPL_EXPORT_COMPS. The columns that you need for component export are TYPE_NAME and ID, for example:

Then you should combine them in the array in form TYPE_NAME:ID (currently there's a bug in 19.2 docs, where you can find that the array values should be formed as TYPE:NAME):

The output of the get_application procedure is a table of apex_t_export_file (with name and contents columns). Name column will always have same value (in format f{APP_ID}_components.sql, for example, f100_components.sql) and the contents column will have export code (as a CLOB). No matter how many components do you add to the array you'll always get only one file/element as an output. The only time when you can get more files is if you set p_split parameter to true.

After that, you can spool code into SQL file as shown in the example in the documentation or play with it in so many different ways. For example, one of the ways is to create an application to manage your APEX component exports (with nice filenames), as shown here https://apex.oracle.com/pls/apex/f?p=apexbyg:62.

More about that in the next blog post.

Tested in APEX 19.2.0.00.18.

Enjoy!


Friday, June 7, 2019

Username Display Fix

This thing is very simple, but it got me confused...so I hope it will help someone.

I was building a small APEX app (in APEX 19.1.*) with a custom authentication scheme (custom plugin) and when I've logged in to the app I've noticed that the username is in lowercase. So the first thing that got to my mind was that there's some problem with my authentication plugin. But that wasn't it.

I'm not 100% sure but I think from APEX 18.1 there's a change how navigation bar looks like. By default when you create an app you'll get username with a nice icon and drop down with Sign Out link. Before, at least in APEX 5.1, by default, there was only a Log Out link. Maybe that's the reason why I didn't notice this thing before.


So, lowercase is actually forced by CSS. So if you want to display your username as it came out from authentication scheme (in my case uppercase) you only need to remove Shared Components > Navigation Bar List > &APP_USER. > List Item CSS Classes property that's by default set to has-username



Tested in APEX 19.1.0.00.15

Enjoy!

Thursday, May 9, 2019

Generate APEX URL in JavaScript

When developers want to generate APEX URL from a JavaScript the thing that most of them will do is to concatenate URL string like this:

But there's one (unfortunately) undocumented feature that you can use to make it easier. It's possible to do it by using apex.util.makeApplicationUrl function that excepts a JavaScript object as the only parameter. In that object, you can define all that is needed to generate an APEX URL.

Here is an example:

Note: the function will not generate the checksum for pages or items with session state protection turned on.

Enjoy!

Tested in APEX 19.1.0.00.15

Monday, December 10, 2018

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.

Friday, September 14, 2018

How to set IG default values for email fields when downloading report

Few days ago I've got interesting APEX question (I don't mind that the question was sent by mail, but there's Oracle Community Forum where you can get quicker answer and more people will benefit from it).

..and the question is: how to define default values for fields that are shown when you want to download Interactive Grid report and send it by the e-mail.


Maybe I'm wrong but I think there's no native way to do this so I found a workaround.
You can do this for a specific region/page or globally by using global page (page 0).

First of all you need to create on click dynamic action triggered on checkbox item "Send as Email":


The Event Scope attribute must be set to Dynamic and if you want to restrict this dynamic action to the specific region you should define Static Container (jQuery Selector) property with static ID of IG region (for example #emp, if static ID of a region is emp).

You also need to create true dynamic action of a type Execute JavaScript Code where you can define items and values that you want to set:



Demo is available here.

Tested in APEX 18.1.0.00.45.

Enjoy!

Friday, August 17, 2018

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!