How do I apply Display Logic to my Form Fields?

Modified on Thu, 22 Feb at 9:44 AM

Nearly all Droplet form components allow you to use Display Logic to display or hide them conditionally. You can find Display Logic in the Properties panel and when you press the icon, a formula field will open at the top of the canvas.

Display Logic evaluates Javascript expressions to show a field if the expression is true or hide the field if the expression is false. You can use this logic on single components or whole sections of a form.

Note about Data Types

Most components return data as a string, but some components use a different data type. Checkboxes return an array, for example, so you will likely use the includes() Javascript method on the component's ID to see if it contains the data you are looking for.

You can see how the data is formatted for each component using the Preview or Debug view.

Display Logic Examples

Here are a few examples of how Display Logic could be used in a form:

Example	Description	Display Logic Code Snippet
	An Input must be completed if the answer to the previous question is "Yes" but doesn't need to be completed if the answer is "No". I can use Display Logic to show that Input only when the previous answer is yes.	`licensedAsk==='Yes'` Add this code to the second field. When the component ID of the first Input is "Yes" this returns as true and displays the component.
	Sometimes we use Computed components to do calculations, concatenate strings, or reference a Dataset but the field doesn't need to be displayed on the form. The field highlighted to the left will display on my canvas as I build my layout but it doesn't show on the final form because I've added Display Logic to hide it.	`false` This is the simplest way to use Display Logic. The expression is always false so it is always hidden.
	Signature and Timestamp components work really nicely together to automatically show the date when someone signs the submission. We use Display logic to show the Timestamp component when the Signature component has text. This way the Timestamp will contain the time and date the signature was added.	`isNotBlank(signature)` This code snippet uses a helper function to check the field with the ID "signature" and see if it contains characters. If it is blank, the expression is false and the field is hidden. If it contains characters, the expression is true, and the field displays.
	For more complex forms, we sometimes add optional note fields for certain people to use on certain workflow steps. We can programmatically make these fields display only when it is their turn or they have notes in them using Display Logic.	`currentStep()==='hrStep' \|\| isNotBlank(value)` Or you can use the helper function: `or(currentStep()==='hrStep',isNotBlank(value))` This code uses the Javascript logical or, \|\|, to evaluate two statements. If either side is true, the field will display, and if both are false the field will be hidden. The first statement uses a helper function to see which step the form submission is currently on and if that step is called "hrStep". The second statement uses a helper function to check to see if there are any characters in this field (we use "value" to let a field refer to itself).

There are other helper functions, listed below, that can be used for Display Logic expressions. If you have questions about how to use them or how to write a different expression, please submit a support request with a short description of the display logic you would like to use or the problem you are trying to solve.

equals(expected, actual)

notEquals(expected, actual)

isBlank(value)

isNotBlank(value)

isGreaterThan(num1, num2) 

isGreaterThanOrEqualTo(num1, num2)

isLessThan(num1, num2)

isLessThanOrEqualTo(num1, num2)

and(val1, val2)

or(val1, val2)

includes(list, value)