Spacing APEX items

APEX examples

Spacing APEX items

Von Tobias Arnhold → 3.13.2009

Did you ever experienced the problem when you have a couple of items in the same line/row in a HTML region and you have a select list (in the next row) which becomes so Hugh that the upper items places more and more to the right. It just looks ugly and the select list value
normally changes dynamically.
What to do?
First we need to bring a logical barrier in between the line breaks.
Using a "Stop and Start HTML Table" object in between text items and select list.
It will look like that:
Result: Just the text label is incorrect anymore.Now we have two choices:1. Using &nbsp object until it fits.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text1:&nbsp;
Problem: The more text different there are, the more &nbsp you will need.

2. Creating a SPACER item
Create a new display only item called :P1_SPACER in front of the first text item.Now add the following text under "Element Table Cell Attributes" > style="width:200px"Edit the pixel value so that it fits into your page.

The region items will be listed like that:
In case you still have some problem with different browser presentations look at my last post.

Update 17.03.2009:
Just tested a really good hint from Patrick.
Using the ColSpan option in the select list item saves all other steps above. Set the value for ColSpan (in my case) to 3 and the same result appears. Good that I never stop learning...

Own browser check condition in APEX

Browser issues

Own browser check condition in APEX

Von Tobias Arnhold → 3.12.2009

The easiest way to check the browser type for conditional displaying
is to use one of the following conditions:

• Client Browser: Mozilla, Netscape 6.x/7x or higher
• Client Browser: Microsoft Internet Explorer 5.5,6.0 or higher
• Client Browser: Other browsers (or older version)

That way is definitely the easiest one. But in case you have several display conditions you need to check or you want to use that check at another point (for example inside an pl/sql script) then you get some trouble.
I asked in the APEX forum for help and thanks to Andy he gave me a really good hint how to find a solution for that issue.
Forum link: http://forums.oracle.com/forums/message.jspa?messageID=3322457

In my case I wanted to use a condition inside the SQL statement of an updateable report. Because FF and IE displayed the report columns differently.

First I followed the hint from Andy and analyzed the OWA_UTIL output with the function PRINT_CGI_ENV().

BEGIN
OWA_UTIL.PRINT_CGI_ENV();
END;

The result for parameter HTTP_USER_AGENT (with FF) looks like that:

HTTP_USER_AGENT = Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7 (.NET CLR 3.5.30729)

Next step was to get that output text into a variable. Function OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') provides the information.
I created a variable called :P1_BROWSER_TYPE and an initialization process to save the information in my variable.

IF :P1_BROWSER_TYPE NULL THEN
IF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%MSIE 7.0%' THEN
 :P1_BROWSER_TYPE := 'IE7';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%MSIE 6.0%' THEN
 :P1_BROWSER_TYPE := 'IE6';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%Firefox/3%' THEN
 :P1_BROWSER_TYPE := 'FF3';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%Firefox/2%' THEN 
 :P1_BROWSER_TYPE := 'FF2';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%Firefox/1%' THEN
 :P1_BROWSER_TYPE := 'FF1';
ELSE
 :P1_BROWSER_TYPE := 'UNKNOWN';
END IF;
END IF;

Now I created my updateable report with a CASE WHEN CHECK inside the SQL statement:

SELECT CASE :P1_BROWSER_TYPE WHEN 'FF3' THEN '<b><div style="width: 289px">Sum:</div></b>'
                           WHEN 'FF2' THEN '<b><div style="width: 289px">Sum:</div></b>'
                           WHEN 'FF1' THEN '<b><div style="width: 289px">Sum:</div></b>'
                           WHEN 'IE7' THEN '<b><div style="width: 247px">Sum:</div></b>'
                           WHEN 'IE6' THEN '<b><div style="width: 247px">Sum:</div></b>'
                           ELSE '<b><div style="width: 247px">Sum:</div></b>' END as "Sum",
        ...

Example app: http://apex.oracle.com/pls/otn/f?p=28737:7
Documentation link for the OWA_UTIL package: http://download-west.oracle.com/docs/cd/B12037_01/appdev.101/b10802/w_util.htm#997271