How do I apply Display Logic to my Form?

Modified on Fri, 9 Aug at 8:59 AM

Display Logic determines when a component or group of components should be visible or hidden. If the logic evaluates as true, the component will be displayed. This is especially useful when you want certain parts of the form to appear only when they’re needed, keeping the form clean and relevant.

How Display Logic Works

Display Logic operates using JavaScript expressions. A component will display if the expression evaluates as true and will remain hidden if it evaluates as false. You can apply this logic to individual components or entire sections, groups, or tiles on your form.

Let’s explore how this works with a real-world example: a Student Absence Reporting Form used by school districts. In this form, Display Logic can reveal specific fields based on the reason for the student’s absence. Check out the nearby animation to see this in action — it’ll quickly show you just how useful Display Logic can be!

Where to Find Display Logic

You can find the Display Logic settings in the Properties panel of any component that supports it. Simply click the Display Logic icon, and a Display Logic window will appear.

Writing Display Logic

Although this may look daunting at first, you have options to choose from! You can use Droplet AI to write display logic expressions, write your own expressions, or use our helper functions to make those expressions easier.

Let's dig into each of these three options in the sections that follow.

Droplet AI

Not sure how to write the right expression for your Display Logic? Droplet AI can help! It’s like having a Droplet Team Member embedded right within Droplet, ready to help you craft the perfect logic for your form.

To use Droplet AI:

Select your component and click on the Display Logic icon in the Properties panel.

In the pink-shaded box, type the conditions under which you want the component to display, using plain language. Press Enter.

You’ll see the resulting expression appear on the right side of the window. Press Done.

Save your form, then use the Debug feature to test and make sure the Display Logic is working as expected.

⚠️

After testing, if your display logic is not working exactly how you'd like it to, you may need to re-prompt Droplet AI with a bit more specific information in your prompt.

Frequently-Used Examples

Below are some super common examples of display logic in action:

If Another Component Equals Something
Display a component when another component equals a specific value, such as showing additional questions when a parent selects “Sick” as the reason for absence.

We might write something like this as the display logic expression:

absenceReason === 'Sick'

This is effectively saying "display this component if the submitter's answer to the absenceReason component is Sick"

If Another Component Includes Something
Display a component when a multi-select component (like a checkbox) includes a specific value. In our Student Absence Reporting Form example, you might include a checkbox component labeled “Select all that apply for additional details:” with options like “Medical Visit Required,” “Extended Absence,” and “Homework Request.”

If a parent selects Homework Request, we might want to ask additional questions about that. So, we'd use something like:

additionalDetails.includes('Homework Request')

This is effectively saying "display this component if the submitter's answer to the additionalDetails component contains Homework Request". Other options in the additionalDetails checkbox could be chosen, but we're simply looking to see if one of them is Homework Request.

If Another Component Does Not Equal Something
Display a component when another component doesn't equal a specific value, such as showing additional questions when a parent selects a school other than the high school.

We might write something like this as the display logic expression:

school !== 'Athena High School'

This is effectively saying "display this component if the submitter's answer to the school component is anything except for Athena High School". The exclamation point (!) that replaces the first equals sign means does not (in this case).

Always Hide a Component
We often want to hide a component that only serves a calculation purpose and doesn’t need to be shown to the user, like Computed Component.

Use:

false

This is effectively saying "never display this component, no matter what!" Since components with display logic only show when the expression evaluates to true, by writing false, it will ensure that it is never true.

If Another Component Isn't Empty
Display a component when another component has some response from the submitter. A really common example of this is when you want a timestamp to appear when a submitter has adopted their signature on the submission.

We can write:

isNotBlank(signature)

This is effectively saying "display this component if the signature component has something in it."

Helper Functions

To make adding Display Logic expressions easier, Droplet provides “helper functions” that simplify the process. This article includes a complete list of these helper functions, along with descriptions and examples to help you get started.

What about Hidden Required Fields?

If a required field is hidden by Display Logic, it won’t be required. For example, if the Student Absence Reporting Form hides the doctor’s note field because the parent didn’t select “Sick,” that field won’t need to be filled out, even if it is required. In other words, only visible required fields will actually be required to submit the