Dynamically disable drop-down fields

Some workflow scenarios require that a drop-down field be disabled based on the value of another field. For example, you may want to disable the status field when the is_active field is set to No.

There are 2 types of drop-down fields in AppGini:

  1. Lookup fields: These are fields that are linked to another table. For example, a category_id field that is linked to a categories table.
  2. Option list fields: These are fields that have a fixed list of options. For example, a status field that can have the options Pending, Approved, and Rejected.

Both types of fields use the select2 UI component to display the drop-down list.

Disabling lookup fields

To disable a lookup field, you can use the following code:

$j(() => {
  // replace the following with the actual condition 
  // that should disable the field if not met
  let enable = $j('#is_active').val() === 'Yes';

  // replace 'fieldname' with the actual field name of the 
  // lookup field you want to disable
  $j('#fieldname-container').select2('enable', enable);
});

Disabling option list fields

To disable an option list field, you can use the following code:

$j(() => {
  // replace the following with the actual condition 
  // that should disable the field if not met
  let enable = $j('#is_active').val() === 'Yes';

  // replace 'fieldname' with the actual field name of the 
  // option list field you want to disable
  $j('#s2id_fieldname').select2('enable', enable);
});

Both code snippets are very similar. The only difference is the selector used to target the field. For lookup fields, we use #fieldname-container, while for option list fields, we use #s2id_fieldname.

Where to put the code

You can put the code in some place where JavaScript code can be executed in the detail view of your table. This can be one of the following:

  1. The hooks/[tablename]-dv.js file, where [tablename] is the name of the table.

    This is the simplest method, and is recommended if all the logic can be evaluated client-side.

  2. The hooks/footer-extras.php or hooks/header-extras.php file.

    In this case, you should wrap the code in a <script> tag, like this:

    <script>
      // your code here
    </script>
    

    This method is recommended if you need to include some server-side logic in your code since you can use PHP code in these files.

  3. The tablename_dv() hook function in the hooks/[tablename].php file (where tablename is the name of the table).

    In this case, you should wrap the code in a <script> tag, and use output buffering to append the code to the $html variable, like this:

    function tablename_dv($selectedID, $memberInfo, &$html, &$args) {
      ob_start();
      ?>
      <script>
        // your code here
      </script>
      <?php
      $html .= ob_get_clean();
    }
    

    This method is recommended if you need to include some server-side logic that depends on $selectedID or $memberInfo. $selectedID is the ID of the record being viewed, and $memberInfo is an array containing information about the logged-in user.