Dynamically Toggle Field with custom React UI

[joarteag]

Hi all, I'm working with a custom UI implementation in React and I'm trying to work with the "Dynamically Toggle Visibility of a Form Field" with the idea of showing a checkbox if there is a specific country selected, but, there is a problem because we are overriding the form with our components, and the field that should be hidden waiting for the country selection is always rendered.

This is more or less how we render our components

switch (props.field.dataType) {
    case "email":
      return <EmailField {...props} />;
    ...
    case "select":
      return <SelectField {...props} />;
    case "checkbox":
      return <CheckboxField {...props} />;
    default:
      return null;
  }

So my question is if there is a way to achieve the behavior of the Field Toggle tutorial with a custom implementation, I tried to add a useEffect to react to the field changes and after that link somehow the fields that are related, but I don't know how to create a listener to the Marketo values, I just got this line to get the values but only once mktoForms2.getForm(formId).getValues(), and I don't know if there is a way to permanently listen if some value changes, or if there is another way to achieve the hide/show of the checkbox based on the value of the select field.

As an extra info the checkbox should be rendered and required only if certain country is selected (all of this rules coming from the marketo panel)

Any help or guidance will be really appreciated 

Thanks
Jordan

[SanfordWhiteman]

What do you mean by "dynamically overriding the form" and "custom implementation"? Are you using a visible Marketo form or not? Trying to read the raw form descriptor JSON only? Your phrasing is quite vague.

[joarteag]

Hi @SanfordWhiteman thanks for the answer, we are building the form reading the JSON.
Now I added a previous condition on our parent component in order to check if the field has an specific ID and some visibility rules, with that I'm controlling the component based on the value of the select component with and specific ID, if the ID's (hardcoded) don't match I render our generic fields, I think there is no way to do this automatically because how we are building the form.

Thanks

[SanfordWhiteman]

Seems like you’re trying to write your own substitute forms library using the Marketo form descriptor. Can’t imagine what would lead you down that path.

At the very least you have to reverse engineer how every possible part of the descriptor object works — but why? What possible advantage could there be over simply submitting a Marketo form?

[joarteag · Accepted solution]

Yes, I'm not sure what was the reason behind that decision, form the only way to do what the team wants  is to enter to the JSON response and check the rules and IDs, adding some custom logic when the conditions match, for me there is no way to add that logic with marketo because we are not directly working with the marketo form (in some way).

For now my approach is working but is obviously not the best one, I'll talk with the team in order to find why do we have the implementation that we have right now, because this probably will limit us in different ways in the future.

Thanks!