Disable input elements in tabular form

There is a quite often requirement to disable a tabular form column based on the row information.

I got a customer request with the following requirement:
A select list column of a tabular form should be disabled (row based) when the value of another column is like SYSDATE.

There are 3 options to follow:
1. Create a manual tabular form and disable the column with a case statement inside the select
2. Deactivate the column with some jQuery code
3. Wait for APEX 5. I think there is some development ongoing about this problem.

Some thoughts about solution 2

I assume that the SYSDATE is: 12.12.2013
Our result should look like this:

How to achieve this?
First I need to extend the report with one extra column plus some column customization
Second is some jQuery code in form of two dynamic actions.

The SELECT statement:

SELECT -- Original columns:
       ANIMAL_OWNER_ID, ANIMAL_OWNER_NAME, ANIMAL_ID, to_char(LAST_DATE,'dd.mm.yyyy') as LAST_DATE, 
       -- New column:
       to_char(SYSDATE,'dd.mm.yyyy') as CURRENT_DATE
FROM   CUST_TABLE

Now I change the report attributes of column: LAST_DATE
Column Formatting >> HTML Expression:

<span class="tbl_date">#LAST_DATE#</span><span class="tbl_cur_date" style="display:none;">#CURRENT_DATE#</span>

Now I need to add two dynamic actions to change the appearance of our column: ANIMAL_ID
1. Deactivate the affected rows
Event: Page Load
Action: Execute JavaScript Code

$('.tbl_date').each(function( index ) {
 if ( $(this).html() == $(this).parent().find('.tbl_cur_date').html() ) 
  {
    $( this ).parent().parent().find('select[name="f01"]').prop('disabled', 'disabled');
  }
});

What am I doing here?
I search for all elements with the CSS class "tbl_date"
Now I compare the HTML value with the value of the class "tbl_cur_date".
If the result is TRUE then the select list will be disabled.
To find the select list I search for the name "f01". Actually because I only have one select element I  could use this code snippet as well: find('select')

2. Activate the affected rows before page submit. Otherwise I would get an tabular form error.
Event: Before Page Submit
Action: Execute JavaScript Code

$('.tbl_date').each(function( index ) {
 if ( $(this).html() == $(this).parent().find('.tbl_cur_date').html() ) 
  {
    $( this ).parent().parent().find('select[name="f01"]').prop('disabled', '');
  }
});

Now I have a huge security hole in my application. To close this one I need a tabular form validation. The validation must check for changed select elements. Of course only those which should not be able to change.
You can follow this blog post which is providing a hint how to achieve it: http://www.apex-at-work.com/2012/06/tabular-form-validation-issue.html

Post Tags:

APEX examples