Use External JSON To Control Dependent Select Fields

This guide explains how to configure Formyoula Select fields so that the available options in one dropdown depend on the selection in another, using data pulled from a publicly hosted JSON file URL via the “Select List Sync” field.

1. INITIAL SETUP:

  • Drag and drop two "Select", and a "Select List Sync" field onto your form as shown below.
  • Rename the fields as needed.
image

2. CONFIGURE THE “SELECT LIST SYNC” FIELD:

  • Click the pencil icon of the “Select List Sync” field.
  • Configure it as follows:
    • Formyoula Field Id: 1e96-0eca-94fe (Field Id of the Select field labelled Main Selection)
    • Formyoula Controlling Field Id: 426d-1925-4dab (Field Id of the Select field labelled Related Choice)
    • URL: Add the URL to a public JSON file that contains the option mappings (explained in the next step).
      • image
  • Save the changes.

3. CREATE A PUBLIC JSON URL:

  • To fetch the select options, we will need to host the JSON data publicly.
  • And use that URL in the “Select List Sync” field's settings under the “URL” option(step 3).
  • Please follow this example JSON code:

{
  "parent_select_values": [
    { "value": "Gold", "id":1 },
    { "value": "Silver", "id":0 },
    { "value": "Bronze", "id":2 }
  ],
  "select_values": [
    { "value": "X1", "valid_for": [0, 1] },
    { "value": "X2", "valid_for": [1, 2] },
    { "value": "X3",  "valid_for": [2] }
  ]
}
  • This JSON defines the options for the controlling field (Gold, Silver, Bronze) and maps which values should appear in the dependent field based on the selection.

4. TEST YOUR FORM:

  • Try your form.
  • Select a value from the Main Selection dropdown.
  • The Related Choice dropdown will auto-populate based on the JSON logic.
image
image
image

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂