Digioh supports Show/Hide Radio or Dropdown Options for form inputs based on values users select or submit in other fields. This feature customizes form visibility by showing specific options only when users make certain selections or input specific data. Common applications include displaying options relevant to a selected country or car make. The app also enables you to adjust the visibility of radio button and dropdown options based on values from other fields, making it a versatile tool for customizing option visibility in forms. Use Cases: This feature proves especially useful in scenarios such as:
- Country-Specific Options: Display brand options based on the selected country (e.g., show “Toyota” only when users select “Japan”).
- Product Customization: Show specific models based on the chosen product type, such as displaying “iPhone” options only when users select “Apple.”
- Service Availability: Display service options based on a user’s location, such as “Express Delivery” only when the country is “USA.”
- User Preference: Show meal preferences in a dropdown (e.g., vegan, vegetarian) only when users select “Yes” for dietary restrictions.
- Conditional Fields: Display specific car insurance options in a dropdown only when users select “Car” as their insurance type.
Installation
To take advantage of this feature, install the Show/Hide Radio or Dropdown Options app within Digioh. Here’s how:
- Access your profile menu in the top-right corner of Digioh.
- Select "Custom JS (Apps)."
- Find and install the "Show/Hide Radio or Dropdown Options" app from the Available section.
Configuration
You manage the app’s configuration using field-level metadata on the custom field that you want to have show / hide options based on another field's value.
You first need to configure which custom field will drive the show / hide logic. This is done using either metadata key: show_options_with or hide_options_with, with a metadata value of custom_X, where X is the custom field you will use to drive the logic:
- show_options_with: This key specifies which custom field should be evaluated to determine if the configured options should show. For example, show_options_with: custom_1 will evaluate the value of custom_1 and show the specified options based on its value.
- hide_options_with: This key specifies which custom field should be evaluated to determine if the configured options should hide. For example, hide_options_with: custom_1 will evaluate the value of custom_1 and hide the specified options based on its value.
Next, you'll need to add metadata to configure how each option in the custom field should behave based on the driving field. This is done using the metadata opt:<Option Submit Value> : Value
where <Option Submit Value> is the dropdown / radio submit value that you want to either show or hide if the user previously selected Value in the driving custom field.
Example Configuration
Suppose that you are configuring a 2-step box. First users will be required to select a country from a dropdown in Custom 1:
And based on the country that a user picks, a filtered list of car brands should be shown to them in Custom 2:
To configure the app, you would select Custom 2 and navigate to the Field Metadata. For this example, we'll show specific values for Custom 2 based on the selected country, so we'll first add metadata show_options_with : custom_1. We will then need to add a metadata pair for each dropdown choice to pair them with a country:
In this example, if a user selects Germany for the country, they'll see the options Audi & BMW; If the select Japan, they'll see Mazda & Toyota, and if they select USA, they'll see Dodge & Ford:
The options can also be configured to show / hide for multiple values by adding them in a comma delimited list in the metadata value, e.g., opt:BMW : Germany, USA
Questions? Comments? Let us know at support@digioh.com!