apex.oracle.com - Upgrade to APEX 5.0

It is time to get used to the new APEX builder interface. apex.oracle.com has been upgraded to the latest pre-production version of APEX 5.0. Some functionality like "Administration" are not visible any more and you have to search a bit. The overall impression is good and my old demo application seem to still work in the most of the cases.

Enjoy.

Read Only Item Layout

The possibility to set the items conditionally to read only is one of the important security features in APEX. Using this feature you can secure your applications and it will not be possible to manipulate the protected item (region or page). The downside of this feature is that it will change the layout of the protected items to some kind of standard, ignoring the previous formatting in the "normal" mode. If you have a form which looks like this:

and change the description item to the read only mode, then the page will look a lot different and will be hard to control:

In such cases you can help yourself in different ways. Using some css or jQuery, you can make those read only items to appear only slightly different. For example, I used this code to change the layout of the description item on page load:

$('#P3_BP_DESC_DISPLAY').attr("readonly","readonly").css({"font-weight":"bold","color":"#ccc","display":"block","width":"240px"
,"height":"120px","overflow-y":"auto","border":"1px solid grey"})

and the result looked like this:

There are also some other more generic methods:

.display_only {font-weight:bold; color: #ccc; display: block; width: 200px}

$('[id*=_DISPLAY]').css({"font-weight":"bold","color":"#ccc","display":"block","width":"200px"})

$('.display_only').css({"font-weight":"bold","color":"#ccc","display":"block","width":"200px"})

The only thing you need to note is that setting an item to the read only mode will create two page elements. The displayed element will get the suffix _DISPLAY added to the corresponding item ID.

Enjoy.

APEX Connect June 2015

APEX Connect in Düsseldorf in June 2015 is going to be the biggest APEX-only event in Germany so far. You should consider joining us.

APEX Connect in Düsseldorf im Juni 2015 wird der größte APEX-Treffen bisher sein. Meldet euch und hilft uns es noch erfolgreicher und größer zu machen. Viele interessante Vorträge und vor allem viele interessante Persönlichkeiten aus der APEX-Welt werden dort sein. Das ist eine ausgezeichnete Gelegenheit viel Neues zu erfahren. Anmeldungsformular kann man hier aufrufen. Die Preise sind moderat und durchaus im Rahmen.

A good Rule of Thumb

I like the newest blog post from Joel Kallman and especially his rule of thumb:

"My rule of thumb - when you're editing code in a text area/code editor in the Application Builder of APEX and you see the scroll bar, it's time to consider putting it into a PL/SQL package."

I would go further and say that even the smallest application you create should have at least one package for all the PL/SQL code you write.

IR Scrolling - With a Little Help From My Friends

If you are working with interactive reports you will for sure be faced with a problem of wide reports. If you are taking care of the page layout and eventually have more than just an interactive report on the page, you will want to limit it's size to something making sense. The first problem will appear if you limit the width by setting the region attribute to something like this

style="width:830px"

and you will not see some of the columns:

If you add a scrolling by wrapping the region in a div and adding the following to the region header:

<div style="width:810px;overflow-x:scroll">

and closing it in the footer by adding:

</div>

you will be able to scroll with two ugly side effects:

The action bar will be included in the scrolling as well and disappear as you scroll to the right.

The sort widgets for the columns will appear on the wrong position the more you scroll.

You can solve this problem in the following way:

Remove the scrolling DIV from the region header / footer.

Use this java script in the page Function and Global Variable Declaration:

function onload_ir(p_width, p_report_id){

$('<div id="scroll_me" style="width:' + p_width + 'px;overflow-x:auto;display:inline-block"></div>').insertBefore('#apexir_DATA_PANEL'); $("#apexir_DATA_PANEL").appendTo("#scroll_me"); $("#apexir_DATA_PANEL").show();

var or_Finished_Loading = gReport._Finished_Loading; gReport._Finished_Loading = function(){ or_Finished_Loading(); if(gReport.current_control=='SORT_WIDGET'){

var offset_pos = $("#" + p_report_id ).position().left; var pos_left = $('#apexir_rollover').css('left'); pos_left = pos_left.replace('px',''); if (pos_left>p_width-100) {new_pos = parseFloat(pos_left) + parseFloat(offset_pos) - 25; $('#apexir_rollover').css('left', new_pos+'px');} }; }; };

Create a Dynamic Action which runs After Refresh (fire on page load option should be turned on) of the IR region and execute this script there:

onload_ir(810, 7990109002761687)

810 is the widht of the scolling region, which is a bit less then the total width of the region.

7990109002761687 is the id of the data grid of the interactive report. You can find this id if you use firebug and scroll to the point where the data grid is placed.

What this script does is:

It will wrap the data grid into an additional div and add a scroll bar to it.

It will overwrite the IR onload function and add a sort widget positioning function to it in order to reposition the widget according to the scrolling.

The important part of the overloading function was done by Tom Petrus, who is a big help when it comes to tricky stuff like this.

Now, once you have done that, your report will show up properly once you scroll it.

Enjoy.