Best answer

How to add dynamic fields based on dynamic dropdown selection?

  • 24 June 2021
  • 7 replies
  • 1980 views

I am building an app in Zapier GUI,

I need to fetch the fields based on dropdown selection that user will make.

I am using Trigger with Polling: URL to fetch data using php api. Example : www.example.com/api_key

I have field 1 and field 2, depending on the selection in field1 field 2 will have different options within it.

Can Any one help me how to solve this.

icon

Best answer by Zane 28 June 2021, 21:21

View original

This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

7 replies

Userlevel 7
Badge +9

Here’s an example that demonstrates what you’re trying to do: 

 

Have a look at that and let us know if that doesn’t get you up and running.

Thanks for your comment. How can I pass “Vehicle Type” field say “type” from Vehicle Type API so then your “Marker Dropdown get the value as you have mentioned in code.

```

url: 'https://example.com/vehiclemaker',
method: 'GET',
headers: {
'Accept': 'application/json',
'x-api-key': bundle.authData['api_key']
},
params: {
'type': bundle.inputData.type
}

It’s helps a lot.

Userlevel 7
Badge +9

How can I pass “Vehicle Type” field say “type” from Vehicle Type API so then your “Marker Dropdown get the value as you have mentioned in code.

 

The code snippet you posted shows this - you can reference the user’s selection in bundle.inputData.type.

Note this specific example might actually be better served by using dynamic dropdowns instead: 

 

But you mentioned you wanted to create entirely different sets of fields based on the user’s selection, so this dynamic fields example shows how to do that - just build a set of fields rather than a single dropdown.

I already have two triggers say “Provider” and “Voice” from where I have collected the detail of two Dropdown by Webhooks.

Now I have set up an action ABC with input Designer “Provider” as Alter Dropdown field and “Voice” as dynamic Dropdown. So my concern, how can I make a relation between these two Dropdown so depending on the selection in Provider, Voice will have different options within it?

OR how can I call an API  of Provider downdown list (like javascript onChange Event) to get detail of “Voice” field and populate in Voice Dropdown?

Userlevel 7
Badge +9

If I understand correctly, it sounds very much like the example here is what you’re trying to accomplish:

 

Take a close look at that. In that example, imagine the “team” input is a dropdown rather than a string field - it’ll work the same.

Make sure, in addition to the “Provider” field in the ABC action, you also have a provider input field in the trigger that will populate the “Voice” dynamic dropdown. Give them the same key name. Make them both required.

In the implementation of the Voice trigger you’ll be able to reference the “provider” value as if it was “local” to the trigger - bundle.inputData.provider The value will get passed to it when the Editor populates the Voice dropdown.

 

I have create a trigger Get Voice list with key “provider” and API polling configuration

```
const options = {
  url: 'www.example.com/VoiceAllLists',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'X-API-KEY': bundle.authData.api_key
  },
  body: {
    'api_key': bundle.authData.api_key,
    'provider': bundle.inputData.provider
  }
}
```
 

Then In ABC action I have same Input Field with key “provider” and  once I choose a value from  Provider downdown list (like javascript onChange Event) , Voice dropdown field comes with no “No option available”

Now dynamic dropdown works but auto refresh Voice dropdown list based on onChange event of provider field.