Skip to Main Content

Disabling items selectively in tabular forms

This page demonstrates the selective disabling of items in a tabular form. All columns except empno are editable.
In the after refresh DA the items are disabled according to the autorisation.

Autorisation implemented:
- The president can change manager, salary, commission and department
- The manager can change of his job, salary and commission of his/her own employees
- Any employee can change his/her own name

More info can be found in this blogpost.

Tabular form on Emp

7782
7839
7934
7369
7566
7788
7876
7902
7499
7521
7654
7698
7844
7900

Source query

select emp.empno
     , emp.empno    as  empno_display
     , emp.ename
     , emp.job
     , emp.hiredate
     , emp.mgr
     , emp.sal
     , emp.comm
     , emp.deptno
     , case when emp.empno != :P300_EMPNO then 'ENAME:' else null end
    || case
          when :P300_JOB = 'PRESIDENT' then 'JOB:HIREDATE' 
          when :P300_JOB = 'MANAGER'   then case when emp.mgr   = :P300_EMPNO then 'MGR:HIREDATE:DEPTNO' 
                                                 else 'JOB:MGR:HIREDATE:SAL:COMM:DEPTNO'
                                end
          else 'JOB:MGR:HIREDATE:SAL:COMM:DEPTNO'
      end                     as  disable_items
from   emp

JavaScript for disabling items, executed in the after-refresh DA

function disable_tabform_items ( tabSelector )  

    // loop along all the rows with a DISABLE_ITEMS cell
    $(tabSelector).find('[data-item="DISABLE_ITEMS"]').each( 
      function() 
    {
      // make array of item names to be disabled
      list = $(this).val().split(':');
      if ( list.length > 0 ) 
      { 
        // identify the row
        var tr = $(this).closest('tr');

        // disable all the item in the list  
        for ( i=0 ; i < list.length ; i++ ) 
        {
          $(tr).find('[headers="'+list[i]+'"]')
               .find('input,textarea,select,button.ui-datepicker-trigger')
               .addClass('apex_disabled')
               .attr('tabindex','-1');
        }       
      }
    });
}