qbo3 Dropdown with multiple inputs

Question

I have a QBO3 task that includes a dropdown list configured to make an API call with several possible parameters.

The API call is:

Process/DatawarehouseQuery?Field1=Foo&Field2=Bar

The fields on the task include:

• DWDropdown: a dropdown list that should render the results of the DatawarehouseQuery api call
• Field1: an input that users can enter data into
• Field2: an input that users can enter data into

I have configured an onchange event handler for the Field1 as follows:

document.id('DWDropdown').retrieve('qbo.Dropdown').refresh({'Field1', this.value});

and similarly for Field2:

document.id('DWDropdown').retrieve('qbo.Dropdown').refresh({'Field2', this.value});

When a user triggers the Field1.onchange event, the API call made is:

Process/DatawarehouseQuery?Field1=Foo

When a user triggers the Field2.onchange event, the API call made is:

Process/DatawarehouseQuery?Field2=Bar

How do I configure the task to pass both Field1 and Field2 to the API call?

Answer 1

The qbo3.Dropdown behavior's refresh method requires all the data needed for the api call:

carriage returns added for clarity; the doubling of {{ and }} is an artifact of QBO's Task GUI designer.

document.id('DWDropdown').retrieve('qbo.Dropdown').refresh({{
  'Field1': document.id('Field1').value,
  'Field2': document.id('Field2').value
}});

As the number of fields grow, maintaining these onchange handlers can become unwieldy. As an alternative, you can create a custom function in the Javascript panel of the task, and reference that function from each of your onchange handlers:

function refreshDWDropdown()
{
  document.id('DWDropdown').retrieve('qbo.Dropdown').refresh({
    'Field1': document.id('Field1').value,
    'Field2': document.id('Field2').value
  });
}

and then your onchange handler becomes:

refreshDWDropdown();

---

When troubleshooting dropdown lists (or any other qbo3 behaviors), consider using the Chrome debugger and Fiddler.

Specifically, you can play with a dropdown list from the debugger console along these lines:

var dd = document.id('DWDropdown').retrieve('qbo.Dropdown');
dd.options; // this will show you the options, including url and data, used by the dropdown
dd.refresh({'Field1': 'Foo', 'Field2': 'Bar'}); // this will trigger the refresh directly
dd.refresh({'Field1': document.id('Field1').value}); // mimic your existing onchange code
dd.refresh({'Field1': document.id('Field1').value, 'Field2': document.id('Field2').value}); // mimic the recommend onchange code
refreshDWDropdown(); // call your function directly