Best answer

Can you refresh fields based on dynamic field selection?

  • 11 February 2022
  • 4 replies
  • 110 views

Userlevel 1

Hello,

I am building an action and I have two dynamic fields and the second one depends on the value selected in the first dynamic field to make the api call, i.e., the first field contains the teams available in the app and the second field should populate the team members for the the team selected in the first dynamic field. 

Is there a way to refresh the fields once a value for the first dynamic field has been selected?

icon

Best answer by GetUWired 18 February 2022, 16:08

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.

4 replies

Userlevel 7
Badge +9

Yes! This is discussed here 

.

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

Userlevel 1

Hi Zane,

Thanks for the suggestion. The article you sent seems to involve one dynamic dropdown and one dynamic field and did not show a clear solution to my problem.

My example is using two dynamic fields.

When the action loads, dynamic field A calls an api to get all teams in my app.

And dynamic field B is supposed to call an api to get all the members for the team selected in dynamic field A but it does not. Only when I click `Refresh Fields` does it recognize that a selection has been made for dynamic field A, takes that team id and then makes a call to the getmembers() api. 

My question is, can I trigger a refresh when a selection is made for dynamic field A.

 

For clarity I have added the sample code for the dynamic fields.

Dynamic Field A

const options = {
  altersDynamicFields: true, // @Zane, added this here just in case it helps. It did not.
  url: `https://xyz.com/api/teams,
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': `Bearer ${bundle.authData.access_token}`,
    'X-SUBDOMAIN': bundle.authData.subdomain
  },
  params: {
    
  }
}

return z.request(options)
    .then((response) => {
      response.throwForStatus();
      const results = z.JSON.parse(response.content);      
      const field = { key: 'Team', choices: results.map(x =>  ({label: x.Name, sample: x.Name, value: x.id})  ) }    
      return field;
    });

 

Dynamic Field B

// @Zane, bundle.inputData.Team is the value of the selected team from dynamic field A and I add it to the url below as part of the url path NOT a query argument/parameter

const options = {
  url: `https://XYZ.com/api/teams/${bundle.inputData.Team}/members`,
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': `Bearer ${bundle.authData.access_token}`,
    'X-SUBDOMAIN': bundle.authData.subdomain
  },
    params: {
    'Team': bundle.inputData.Team  // @Zane, added this here just in case it helps. It did not.
  }
}

if (!bundle.inputData.Team){
  return { key: 'Members', choices: [ ] }
}
else
{
  return z.request(options)
    .then((response) => {
      response.throwForStatus();
      const results = z.JSON.parse(response.content);      
      const field = { key: 'Members', choices: results.map(x =>  ({label: x.fullName, sample: x.fullName, value: x.id})  ) }    
      return field;
    });

Userlevel 7
Badge +12

@nlemma 

Dynamic field A will need to be set in such a way that Zapier knows its value affects other dynamic fields.. meaning you will need to set the property altersDynamicFields to true in the field schema. 

https://zapier.github.io/zapier-platform-schema/build/schema.html#fieldschema

 

Userlevel 1

Thank you so much both @Get Lit - Words Ignite and @Zane 

That helped me resolve the issue. 

I see this as a potentially popular question for a lot of users. I believe adding an example that contains the `altersDynamicFields` property being set into the field schema section  would help resolve a lot of peoples questions. 

Eg, 

  • { key: 'abc', choices: [ { label: 'Red', sample: '#f00', value: '#f00' } ],   altersDynamicFields: true }