Conditional Logic
Conditional logic lets you show or hide a component based on the value of another component. The form adapts as the submitter fills it in, keeping it clean — submitters only see what is relevant to them.
When a field is hidden, OSPROV clears its value. The hidden field will not carry data into the submission. This is intentional — it prevents stale data from sections the submitter never saw. If you need to preserve a value when a field is hidden, use a Hidden component with a calculated value instead.
The Hidden component does not have a Conditional tab. Conditional logic is available on all standard input components and layout components except Hidden.
Simple Conditions
Simple mode handles the most common case: show or hide when field X equals a specific value. No code needed.
- Select the component you want to conditionally display
- Go to the Conditional tab in the settings panel
- Set This component should Display to
True - Set When the form component to the field that should trigger the condition
- Set Has the value to the stored value that triggers the condition
Example: Show a "Medical Details" text area only when Leave Type is set to Medical.
In Simple mode, you select the source component from a dropdown — you do not type the field key manually. The builder lists all components already on the form.
Condition Values: Stored Value vs Label
The condition compares against the stored value, not the label the submitter sees.
For Radio and Select fields, open the source component's Data tab and check the Value column before writing a condition. For Checkbox, use true when checked and false when unchecked.
Example:
| Label | Value (stored) |
|---|---|
| Annual Leave | annual |
| Medical Leave | medical |
| Emergency Leave | emergency |
If your options are configured this way, the condition must say medical — not Medical Leave. Using the label text means the condition will never match.
Advanced (JavaScript) Conditions
For anything beyond a single equals check, switch to Advanced mode. Advanced mode takes a short JavaScript expression and assigns true or false to the show variable.
show = data.leaveType === 'medical';
Show when multiple values match:
show = ['medical', 'emergency'].includes(data.leaveType);
Show when two conditions are both true:
show = data.status === 'approved' && data.amount > 1000;
Common mistakes:
- Forgetting the
data.prefix —leaveTypedoes not work;data.leaveTypedoes - Using the label text instead of the stored value
- Field key mismatch — check the field key in the Technical Properties tab and copy it rather than typing it by hand. It is case-sensitive.
Conditions on Layout Components
Conditions work on layout components — Panels, Columns, and Tabs. Apply a condition to a Panel and every field inside it shows or hides together. This is cleaner than adding the same condition to each individual field.
Use a separate Panel for each conditional group. If two groups of fields need different conditions, they must be in separate Panels. Fields in the same Panel always show and hide together.
Conditional Validation
You can make validation rules conditional using custom JavaScript in the Validation tab.
Return true for valid input, or a string error message for invalid input:
if (data.needsApproval === true && !input) {
return 'This field is required when approval is needed';
}
return true;
Going Further: The Calculation Tab
The Conditional tab handles show and hide. For anything else — making a field conditionally required, disabled, or setting its value dynamically — use the Calculation tab. See Calculation Tab for full documentation and worked examples.