APEX-AT-WORK by Tobias Arnhold

Browsing "Older Posts"

Building IR filters with AJAX - not solved yet

Von Tobias Arnhold → 3.17.2010

I got stuck on a problem with Interactive Reports.
I wanted to build filters during the application runtime with AJAX. These filters should be created if an user makes changes with select lists or trees similar to my old example:
IR with dynamic rules

What I need now are exact filters on hidden or visible fields:

My idea was to use the apex_util.ir_filter procedure:

apex_util.ir_filter(
p_page_id in number, -- Page that contains an Interactive Report
p_report_column in varchar2, -- Name of the report SQL column to be filtered
p_operator_abbr in varchar2 default null, -- Filter type
p_filter_value in varchar2); -- Value of filter, not used for N and NN

With an application process:

-- application process AP_GET_CAT
declare
  V_CAT varchar2(100);
begin
 select c.cat_name into V_CAT from categories where c_id = :P1_C_ID;

 apex_util.ir_filter(
  p_page_id=>1,
  p_report_column=>'CAT_NAME',
  p_operator_abbr=>'EQ',
  p_filter_value=>V_CAT);

 htp.prn(V_CAT);
end;

and some javascript:

// js get cat data
function set_cat(v_id) {
  var get = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=AP_GET_CAT',0);
  get.add('P1_C_ID',v_id)
  $x('P1_C_ID').value = v_id;
  gReturn = get.get();
  get = null; 
}

The functionality itself worked well but a submit is required for the APEX procedure apex_util.ir_filter.

My other idea was to imitate the user actions with javascript only:

// js code: set IR filter
$x('apexir_COLUMN_NAME').value = 'CAT_NAME';
$x('apexir_STRING_OPT').value = '=';
$x('apexir_EXPR').value = $x('P1_CAT_NAME').value;
gReport.column.filter();

Unfortunately it doesn't work this way... But it feels close to a solution.

It works if I use a sql where clause for my IR like this:
SELECT s_id, sales, sales_info
FROM sales, categories
WHERE s_c_id = c_id
AND s_c_id = :P1_C_ID;

and some javascript:

// not tested
var get = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=AP_GET_CAT',0);
get.add('P1_C_ID',v_id)
$x('P1_C_ID').value = v_id;
gReturn = get.get();
init_gReport();gReport.reset();gReport.pull();
get = null;

Maybe one of you guys did already solve this task and could help me out here.

Forum entry: http://forums.oracle.com/forums/thread.jspa?messageID=4167521

Tobias

IE issues

Automatic linebreak if word breaks out of table element

Von Tobias Arnhold → 3.11.2010

I found a great source how to prevent word break outs in <th> and <td> elements:
Peter Bromberg's: FIREFOX / IE Word-Wrap, Word-Break, TABLES FIX
How does the break out looks like:

CSS code to prevent this issue:

.prevent_breakout
{
width: 250px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

With javascript it could look like this:

<script type="text/javascript">
 function set_lb(v_val, v_max_width){
  var v_browser=navigator.appName; 
  // ...
  if (v_browser=="Microsoft Internet Explorer")  
  {
    $x(v_val).style.width = v_max_width; // set width
    $x(v_val).style.wordWrap   = 'break-word';  // Internet Explorer 5.5+
  }else
  {
    $x(v_val).style.width = v_max_width; // set width
    $x(v_val).style.whiteSpace = 'pre-wrap'; // css-3
    $x(v_val).style.whiteSpace = '-pre-wrap';  // Opera 4-6
    $x(v_val).style.whiteSpace = '-o-pre-wrap';  // Opera 7
    $x(v_val).style.wordWrap   = 'break-word';  // Internet Explorer 5.5+
    $x(v_val).style.whiteSpace = '-moz-pre-wrap'; // Mozilla, since 1999
  }
</script>

Thanks Peter for this great hint!

Update 07.05.2010
Report Attributes > Column Attributes > Column Formatting > CSS Style:
overflow:hidden;float:left;width:250px;word-wrap:break-word;white-space:pre-wrap;display:block;

IE issues

Weird IE behaviour with JS function String.charAt(Index)

Von Tobias Arnhold → 3.10.2010

I had a real pain with the MS Internet Explorer and the javascript function String.charAt(Index)

I wanted to update a string and checked each value. IE was able to give just an empty value back. But it was not checkable!

if ((v_browser=="Microsoft Internet Explorer")&& (v_string.charAt(x)=='')&& (y+1==x) && (v_string.charAt(x+1)=='<'||v_string.charAt(x+2)=='<'))

Even the length was 1 and not 0!
Finally I tried this function String.charCodeAt(Index) with an alert box and voilà two values where prompted: 13 and 10

13 and 10 wait... LINEBREAK!

HELL why does it do such things...

Now I could check it!

if ((v_browser=="Microsoft Internet Explorer")&&(v_check_unicode=='13'||v_check_unicode=='10'||v_check_unicode=='NaN'))

My script works and I feel released.
Now I have to watch the end of Real against Lyon.. :D

Column header groups in APEX report

Von Tobias Arnhold →

Did you ever want a report header grouped like this:

Just add some html code into your report template > column headings > Before Column Heading:

Important to know:
- Changes like this have effect on every report you use with that report template
- Make a copy of your existing report template and use the new one instead

In my example I used 8 columns and three of them should have a group column above it. Use colspan="3" to stripe it over 3 columns.

Here the generated HTML code:

For APEX Interactive Reports watch there:
Dimitri Gielis: Group Headings in an Interactive Report (APEX)
And there:
Martin Giffy D'Souza: Column Groups in APEX Interactive Reports

EXTJS

AJAX based select list in APEX - Part 2

Von Tobias Arnhold → 3.01.2010

I couple of days ago I wrote about a way using AJAX based select lists in APEX.
After some hints from Peter Raganitsch I tried the ApexLib Framework but I run into some issues with ExtJS.
Error message:
vFieldValue is undefined
populateLovField(Object { name="pFieldId"}, Object { name="pLovEntry"})ApexLib_Full.js
populateDependingLovs(Object { name="pFieldId"})ApexLib_Full.js
(?)()ApexLib_Full.js
(?)(Object { name="pEvent"})ApexLib_Full.js
vAjaxRequest.add(pLovEntry.oUsedFi...ace(/\:/g, String.fromCharCode(1)));

Error part where somehow an ExtJS function got called:
vAjaxRequest.add(pLovEntry.oUsedFieldList[ii], vFieldValue.replace(/\:/g, String.fromCharCode(1)));

I found another solution from Carl Backstrom: Ajax Selects
I modified his script a bit and used it in my environment.

Using the ApexLib would have been much easier luckily I just had a really small application.

Good for us that APEX 4.0 will solve these problems by a new standard feature:
Oracle APEX 4.0: Cascading LOVs/Select Lists