Set Cursor Focus in Tabular Forms

In tabular forms I like to add a javascript function that allows the user to navigate vertically using the up and down arrows on the keyboard (see previous posts), which is now out of the box in Apex 4. A nice little add-on to this is to automatically select the contents of the cell when the cursor enters it. This can be easily achieved by adding the following to the Execute when Page Loads region of the page details.

$("input[type=text]").focus(function () {

this.select();

});

Read all IDs from an Interactive Report

So you like the functionality that interactive reports give you and would like to integrate it with a third party application such as Google Maps or an embedded java applet. The challenge is to read the currently filtered and sorted report rows and pass them into the third party application; a pretty straight forward task with JQuery, but how do you cope with the pagination?

This is a nice trick; hide the report, display all the rows, read them and return the report to the original state. Like this:

Demo

Here's how I did it.

Add a hidden item to a column in the report and uncheck the hide option in the iR settings so that it cannot be removed from the report. e.g.

apex_item.hidden(1,empno)||empno empno

Set Function and Global Variable Declaration:

function f_get_ids() {
// read the start pagination
var l_start_pag = $('#apexir_ROWS_PER_PAGE_MENU .dhtmlSubMenuSelected').children().attr('href');
// after refresh function
$('#report').one('apexafterrefresh', function () {
$s('P47_IDS', f_conc_ids());
$('#form_LOADER').hide();
window.location = l_start_pag;
});
// reset the text item
$s('P47_IDS', '');
f_show_form();
// show all rows in report
javascript: gReport.search('SEARCH', 100000);
}

// Function to read all ids on report
function f_conc_ids() {
var lv_ids;
$('[name="f01"]').each(function () {
if (lv_ids) {
lv_ids = lv_ids + $(this).val() + ':';
} else {
lv_ids = $(this).val() + ':';
}
});
return lv_ids.substring(0, lv_ids.length - 1);
}

function f_show_form() {
$("#report").hide();
$("#form").show();
$('#form_LOADER').show();
}

function f_hide_form() {
$("#form").hide();
$("#report").show();
}

Set HTML Header:

<span style="position:absolute;top:4px;left:48%;display:none;" id="form_LOADER">

<img src="/i/ws/ajax-loader.gif">

</span>

Display additional information for Shuttle Item

Problem: user wants to display some additional information on a selected value in a shuttle menu

Forum post

solution

1. Add the following to "Execute when Page Loads":

$("#P44_SHUTTLE_LEFT,#P44_SHUTTLE_RIGHT").click(function(){

f_emp_detail($('option:selected').val());

});

2. Add the following to "Function and Global Variable Declaration":

function f_emp_detail(pThis) {

var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=get_emp', 44);

get.add('P44_EMPNO', pThis)

gReturn = get.get();

get = null;

$s('P44_DEPT', gReturn);

}

3. Create an On demand application process called get_emp:

DECLARE

lv_dep VARCHAR2(4000);

BEGIN

SELECT deptno2

INTO lv_dep

FROM emp

WHERE empno = :p44_empno;

htp.p(lv_dep);

END;

Demo

(When the user clicks a value in the Shuttle the Department is displayed)

Reformat NULL fields in a report

Forum Post

Add the following to the 'Execute when Page Loads' region of the Page (where the column name is JACK):

Apex Shuttle Extender Key LOV

So you really like the Apex shuttle menu with its ease of selecting and ordering multiple values. The difficulty comes when you have a large number of values and the user has difficulty scrolling through the list trying to find the value they want. One solution is to use have a basic set of values in the shuttle item and use the Shuttle Extender plugin to add additional values. Great, but this only works where the user is able to freetext values and the display value is the same as the return value. My requirement was to be able to get the same effect using a Popup Key LOV to extend the shuttle list, and this is how I did it:

1. Create a Shuttle Item P44_SHUTTLE with a basic set of values e.g.

SELECT ename, empno FROM emp WHERE empno > 7782

However the extended shuttle menu will inevitably contain values that are not in the basic lov. Using the Display Additional Values, will only display the return value and not the display value. To get around this, UNION onto the end of the lov query a SELECT that will return the additional values entered.

Note the use of the split item function to convert the colon separated list into a table. The creation of this table function is described here.

UNION

SELECT ename,

empno

FROM emp,

TABLE(useful_functions.split_item(:P44_SHUTTLE))

WHERE empno = column_value

2. Crate another item of type POPUP KEY LOV, P44_SHUTTLE_EXTENDER, with an lov query that contains the full set of values.

SELECT ename, empno FROM emp WHERE empno <= 7782

3. In the Shuttle Extender item set the following.

Post Element Text =>

<a href="javascript:f_shuttle_popup('P44_SHUTTLE_EXTENDER','P44_SHUTTLE');"> Add</a>

HTML Form Element Attributes =>

onchange="$(this).css('background-color','')"

4. Add the following code to the Function and Global Variable Declaration of the Page

Demo

Highlight Search Words in Apex Interactive Reports

This was a problem raised in a Form Post

To implement:

1. Download the jquery.highlight-3.js from this website and add it to the page.

2. Create a style in a CSS sheet or between style tags in the page header

.highlight { background-color: yellow }

3. Create 2 x dynamic actions:

• Before Refresh, Region, Execute JavaScript Code

gv_search = $("#apexir_SEARCH").val();

• After Refresh, Region, Execute JavaScript Code

if (gv_search) {

$('.apexir_WORKSHEET_DATA td').highlight(gv_search);

}

Or instead of Dynamic Actions add the following to the Execute When Page Loads region

Demo

Prevent wrapping in Apex Interactive Reports

To prevent wrapping in IR Columns, add the following code to the "Execute when Page Loads" region of the page details

$('td[headers="ADDRESS"]').attr("style","white-space:nowrap");

where "ADDRESS" is the name of the column to which it applies.

Simples!

NB. If the report has partial page refresh on the pagination scheme, then you will need to create a Dynamic Action that fires after Region Refresh and on Page Load with the above JS.