How to Implement Dynamic Dependent Dropdowns in NetSuite Using Client-Side Scripting

While NetSuite's native 'Sourcing & Filtering' capabilities on custom List/Record fields can achieve dependent dropdowns without scripting in many common use cases, there are complex scenarios where configuration alone may not suffice. The solution for these complex scenarios involves using client-side scripting to filter the values available in a dropdown. It is important to note that scripting cannot directly filter the options of standard or custom NetSuite fields that store values. Instead, scripting can only add or remove options from temporary UI Object fields, which are display-only and do not store values. Therefore, in addition to the script that dynamically filters options, supporting scripts are necessary to manage the data flow: copying the selected value from the temporary UI field into a permanent 'real' field upon record submission, and loading the 'real' field's value back into the temporary UI field when the record is viewed or edited. This approach typically requires a combination of client scripts, utilizing SuiteScript 1.0 API functions as demonstrated in the examples below. It is important to note that SuiteScript 2.x is the current best practice for NetSuite development, offering a modular, object-oriented approach, and its function signatures for script entry points (e.g., beforeLoad, pageInit, fieldChanged, beforeSubmit) typically accept a context object rather than individual parameters. The scripts needed can be summarized as:

1. A beforeLoad script to add the temporary UI field to the screen.

2. A pageInit script to initialize options in the dropdown and copy the value from the 'real' field into the temporary UI field, if any.

3. Client-side logic (e.g., in fieldChanged) to manage the dynamic changing of options in the temporary UI field.

4. A beforeSubmit script to copy the value from the temporary UI field into the 'real' field before the record is saved.

   Script samples are provided below for reference.

   Add the dropdown field to the page:

javascript
function beforeLoad(type, form, request) {
//maybe check the type. Typically, we only need to do this for ‘edit’
form.addField('custpage_myfield','select','My dropdown');
}

On pageInit, check for a stored value in the 'real' field and set the temporary UI field accordingly:

javascript
function pageInit(type){
    setDropdownValues(); //here we populate the possible options of the dropdown
    if(nlapiGetFieldValue('myrealfield')!'' &&
nlapiGetFieldValue('myrealfield')!null){
        nlapiSetFieldValue('custpage_myfield',
nlapiGetFieldValue('myrealfield'));
    }
}

Sample function that sets possible options based on results of a search:

javascript
function setDropdownValues() {
  var customer  nlapiGetFieldValue(‘entity’);
  var date  nlapiGetFieldValue(‘trandate’);
  var columns  [];
  columns.push(new nlobjSearchColumn(‘name’);
  var filters  [];
  filters.push(new nlobjSearchFilter(‘custrecord_entity’,null,’is’,customer);
  filters.push(new nlobjSearchFilter(‘custrecord_date’,null,’is’,date);
  var results  nlapiSearchRecord(‘custrecord_bobo’,null,columns, filters);
  if(results!null){
    nlapiRemoveSelectOption(‘custpage_myfield’);
    for(var i0; i<results.length; i++){
      nlapiInsertSelectOption(‘custpage_myfield’,results[i].getId(),results[i].getValue(‘name’),false);
    }
  }
}

Sample code to change the options in the dropdown based on other field changes:

javascript
function fieldChanged(machine, name){
    if (name  'entity' || name  'trandate') {
        setDropdownValues();
    }
}

Function to copy the value from the temporary UI field into the 'real' field before submission:

javascript
function beforeSubmit(type){
    if(type!'delete'){
        nlapiSetFieldValue('myrealfield',
nlapiGetFieldValue('custpage_myfield'));
    }
}