Dynamic Form Refetching
The framework supports dynamic form refetching, allowing you to rebuild the form based on user selections. This enables:
Use Cases:
- Conditional Fields - Show/hide fields based on other field values
- Dependent Dropdowns - Load options based on previous selections (e.g., select location → load departments for that location)
- Dynamic Validation - Change field requirements based on context
- Progressive Disclosure - Reveal additional fields as users make selections
How It Works:
- Mark a field to trigger refetch by setting
performRefetchOnChange: true - Mark fields whose values should be included in the refetch request with
includeValueInRefetch: true - When the user changes the field value, the framework automatically calls the action meta endpoint again
- The framework includes current form values in the payload
- Your plugin uses these values to regenerate the form with conditional logic applied
Example - Location/Department Dependency:
Initial Form:
{
"formFields": [
{
"key": "location",
"label": "Location",
"type": "string",
"required": true,
"performRefetchOnChange": true,
"includeValueInRefetch": true,
"singleSelectOptions": [
{"label": "New York", "value": "ny"},
{"label": "London", "value": "ldn"}
]
}
]
}After User Selects "New York":
Framework calls /action/meta again with:
{
"formFields": [
{"key": "location", "value": "ny"}
]
}Plugin Returns Updated Form:
{
"formFields": [
{
"key": "location",
"label": "Location",
"type": "string",
"value": "ny",
"performRefetchOnChange": true,
"includeValueInRefetch": true,
"singleSelectOptions": [
{"label": "New York", "value": "ny"},
{"label": "London", "value": "ldn"}
]
},
{
"key": "department",
"label": "Department",
"type": "string",
"required": true,
"singleSelectOptions": [
{"label": "Engineering", "value": "eng"},
{"label": "Sales", "value": "sales"},
{"label": "Marketing", "value": "mkt"}
]
}
]
}Example - Conditional Field Display:
Show additional fields only when a specific option is selected:
{
"formFields": [
{
"key": "requiresVisa",
"label": "Requires Work Visa?",
"type": "string",
"required": true,
"performRefetchOnChange": true,
"includeValueInRefetch": true,
"radioOptions": [
{"label": "Yes", "value": "yes"},
{"label": "No", "value": "no"}
]
},
// Only include these fields if requiresVisa === "yes"
{
"key": "visaType",
"label": "Visa Type",
"type": "string",
"required": true,
"singleSelectOptions": [
{"label": "H-1B", "value": "h1b"},
{"label": "L-1", "value": "l1"}
]
}
]
}Best Practices:
- Only trigger refetch when necessary (it makes an additional API call)
- Use
includeValueInRefetch: trueonly on fields needed for conditional logic - Preserve user-entered values when rebuilding the form
- Provide loading indicators for better UX (handled automatically by framework)
Updated 37 minutes ago
