Question

How do you clear the value of input filed when dependent field changes?

  • 24 June 2021
  • 6 replies
  • 610 views

Userlevel 1

I have created 2 dynamic input fields, both populated from an API.

 

Field 2 (channelId) is dependent on the choice in field 1 (appId).

 

inputFields: [
{
key: 'appId',
label: 'App',
required: true,
type: 'text',
helpText: 'Choose the App',
dynamic: 'app.id.display_name',
altersDynamicFields:true,
},
{
key: 'channelId',
label: 'Channel',
required: true,
type: 'string',
helpText: 'Choose the Channel',
dynamic: 'channel.channel',
}
]

 

This works fine the first time the user makes choices.

 

However, if they choose both options, and then change field 1 (appId) it does not clear the selection in Field 2 (channelId)

 

If you re open the menu, you see the new choices - so the perform is running in the resource,  but the previous selected value is not cleared- leaving an invalid selection.

 

How do you ensure that the dependent field is cleared when the field that alters it is changed? 

 

 


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

6 replies

Need answer to the same question. Can someone respond please?

Userlevel 7
Badge +11

Hey @ikbelkirasan @Troy Tessalone or @AndrewJDavison_Luhhu would any of you by any chance be able to help out here? Thanks!

Userlevel 1

Anything?  This is still an issue.

 

Even more so now that we have a `list` input type.  If the user picks two items from it, but then goes back and changes a filed that updates the options in that list, the incorrect options are still set as chosen.

Are there any workarounds that we can run?  Any way to programatically clear the chosen values ?

 

Matt

It seems that this is a design limitation of Zapier. I looked at a few of the robust  existing Apps, like the one for Google Sheets, and found that they work the same way (i.e. they did not find a solution).

The workaround I’ve come up with is to use a wrapper function to make the entire set of input fields dynamic, coupled with the altersDynamicFields property on fields with dependencies.

Basically, I only create a field while its immediate child has not yet been set. So if I have two fields, where the first is a dependency of the second:

  • While there is no value set for the first field I only create that field
  • When the value for the first field is set, I always create the second field (in this case that field)
  • When the value for the second field is set, I stop generating the first field

This logic can be extended for as many nested direct-dependency relationships as you want.

Unfortunately the user experience with this approach is janky for the following reasons:

  • There is a delay between setting a field and the UI changing to reflect which fields are now being shown, and there is no animation for the change. So for the user the new fields suddenly appear and the old ones suddenly disappear, all after a significant lag time. Definitely confusing without training or verbose help text.
  • Zapier adds a UI section called “Extra Fields” if you stop generating a field that still has a value stored in inputData, and allows the user to clear those fields. So if you need all of the fields to exist and for dependencies to exactly match, a user can very easily mess that up.

Has anyone found a way to do this without creating bad UX?

I just got confirmation from Zapier’s Partner support that this is currently a limitation of the platform. They did say that they’re aware of these limitations and that there are plans to improve them, but they do not have a timeline so who knows?

It looks like, for now, we’ll have to use janky workarounds via dynamic fields and their storage system API (https://store.zapier.com/).

I’d love to hear about any other tricks people come up with!

Userlevel 1

A programmatic workaround I made, to avoid having outdated value in the conditional field.
With this solution, the old field remains in the additional fields section.
I don't care because I'm handling the correct field based on the dynamic field key in the perform function.

inputFields: [
{
key: 'appId',
label: 'App',
required: true,
type: 'text',
helpText: 'Choose the App',
dynamic: 'app.id.display_name',
altersDynamicFields: true,
},
function (z, bundle) {
if (bundle.inputData.appId && bundle.inputData.appId !== '') {
return [{
key: `${bundle.inputData.appId}-channelId`,
label: 'Channel',
required: true,
type: 'string',
helpText: 'Choose the Channel',
dynamic: 'channel.channel',
}];
}
return [];
},
]