Checkbox in Tabular Form (Solution to span multiple pages)

Question

Hi,
We had a case where a large report needed to have check boxes. These check boxes would populate a list of id's which we then processed for a specific task. By default APEX doesn't support this.
After spending some time on this, I thought I'd post my solution to help any others who experience the same problems. For this example we will use P10
1. Create a new "normal" report.
SELECT e.*, APEX_ITEM.CHECKBOX(1,e.EMPNO,'onClick="updateList(this);"',:P10_LIST, ',') AS Cancel,
FROM emp e
2. Create a hidden item called P10_LIST
3. Add an HTML region to the page whose template is "No Template" (do this so it doesn't show up. Call the region "JavaScript". Set its sequence to 1
4. Add the following in the JavaScript region:
<script src="http://SERVER_NAME/String.js" type="text/javascript"></script>
<script src="http://SERVER_NAME/Ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function updateList(pObject){
vItem = 'P10_LIST';
myAjax = new Ajax();
vList = myAjax.getItemValue(vItem);
//Determine to remove or add from list
if (pObject.checked) {
//Add item
vList = vList.listAppend(pObject.value);
else{
//Remove from list
vList = vList.listRemoveItem(pObject.value);
}//if
//Set the session value
myAjax.setItemValue(vItem,vList);
//Set the HTML value
document.getElementById(vItem).value = vList;
</script>
This script:
- Loads the List from the session
- Modifies the list
- Stores it in the session
5. The JavaScript region references 2 files, which you'll need to add to your server. They are as follows:
Ajax.js
function Ajax(){
// TODO: Enter proper names etc.
this.appProcessNameNull = 'AJAX_null';
this.appProcessNameReturnItem = 'AJAX_ReturnItem';
this.tempItem = 'P0_AJAX_TEMP';
* TODO: Document
* Sets Item in session
Ajax.prototype.setItemValue = function(pItem,pValue,pAppProcess){
if (pAppProcess == null)
pAppProcess = this.appProcessNameNull;
var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=' + pAppProcess,0);
get.add(pItem,pValue);
gReturn = get.get();
* TODO: Document
* @param pItem Name of item to get
* @param pTempItem Name of temp item
* @param pAppProcess Application Process to call which will return item
* @return session value
Ajax.prototype.getItemValue = function(pItem,pTempItem,pAppProcess){
if (pTempItem == null)
pTempItem = this.tempItem;
if (pAppProcess == null)
pAppProcess = this.appProcessNameReturnItem;
var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=' + pAppProcess,0);
get.add(pTempItem,pItem);
gReturn = get.get();
return gReturn;
String.js
// From http://www.somacon.com/p355.php
String.prototype.trim = function() {
     return this.replace(/^\s+|\s+$/g,"");
// From http://www.somacon.com/p355.php
String.prototype.ltrim = function() {
     return this.replace(/^\s+/,"");
// From http://www.somacon.com/p355.php
String.prototype.rtrim = function() {
     return this.replace(/\s+$/,"");
* Appends value to list
* @param pValue Value to add to list
* @param pDelimeter Defaults to comman
String.prototype.listAppend = function(pValue, pDelimeter){
if (pDelimeter == null)
pDelimeter = ',';
vStr = this;
if (vStr.length == 0)
vStr = pValue;
else
vStr = vStr + pDelimeter + pValue;
return vStr;
* Removes a value from list
* @param pValue Value to remove from list
* @param pDelimeter Defaults to comman
String.prototype.listRemoveItem = function(pValue, pDelimeter){
if (pDelimeter == null)
pDelimeter = ',';
vStr = this;
vStr = pDelimeter + vStr + pDelimeter;
// Remove value
vStr = vStr.replace(pDelimeter + pValue + pDelimeter, pDelimeter);
//Remove prefix and suffix items
if (vStr.length > 0 & vStr.charAt(0) == pDelimeter){
vStr = vStr.substring(1);
if (vStr.length > 0 & vStr.charAt(vStr.length-1) == pDelimeter){
vStr = vStr.substring(0,vStr.length - 1);
return vStr;
6. On Page 0 Create a hidden Item called: P0_AJAX_TEMP
(Note: this is can be used for all your AJAX calls)
7. Create an Application Process called: "AJAX_null". Process Text: null;
8. Create an Application Process called: "AJAX_ReturnItem". Process Text:
begin
htp.prn(v(v('P0_AJAX_TEMP')));
end;
If you look at the Ajax.js you'll notice points 6,7, and 8 are all customizable etc... I just put it in so you can test right away.
Now the user can select items on multiple pages (if pagination applies). Once they hit a submit button you can use P10_LIST to process your values.
Hope this helps.
Martin

Answer 1

Hi Martin,
I was trying to use your funda in my App. But i dont know why it is not doing anything.
Also i'm facing a very small but severe problem with one of my report. I am using checkbox. So that user will be able to select all those records he/she wants. but the problem is that when i'm selecting few records with the help of the check boxes, selections are there. When moving to other page and coming back to that page, selections are gone. I think selections should not go like this. Otherwise the user will get confused.
Can you tell me how can retain the check box selections??
Thanks
Sudipta