Add Conditional Visibility & Data Validation

Topic

Adding Conditional Visibility and Data Validation can create a super intuitive experience for your app users, especially when your app contains a form. But you might wondering, "What are Conditional Visibility and Data Validation?"

Let's take a look at an example of an app that uses a form to collect data on hours of community service:


The form contains:

  • Name field: input cannot be left empty; it's a required field and must be filled in

  • Hours of Community Service field: input requires numbers, decimals are okay too

  • Submit button: a disabled, grey Submit is present when the fields are either incorrectly filled out or not filled out at all. A live, blue Submit appears when both fields have been correctly filled out.

In the example, Data Validation is performed on both fields to ensure they have the correct inputs (i.e. the Name field must be filled in and the Hours of Community Service field must have numbers). Once they are validated with correct inputs, the Conditional Visibility kicks in, meaning the grey Submit disappears and the blue Submit appears.

Steps

  1. Create a table with columns for each of the fields you want on the form > navigate to Builder > click the [+] sign > select Build your own.

  1. In Builder, click + Add objects > select Form.

  1. Fill out the Insert form screen.

  1. Add and format a Content box to appear like a disabled button using the Formatting Ribbon.

:art: Styling tip: We placed the context box directly under the blue button, matched it to the blue button's size, changed the text from Done to Submit (we did this with the blue button, too), centered the text, reduced the font size to 14, bolded the font, changed the font color to dark grey, and changed the fill color to a light grey.


  1. Select the blue Submit button > go to the Properties panel > go to Display > in the Set visibility field, enter the following formula:
    =AND($[Name content]<>"", ISNUMBER($[Hours of Community Service content]))

:mag_right: Formula breakdown!

=AND() means that both conditions below need to be true for the blue Submit to be visible:

  • $[Name content]<>"" means the Name field cannot be equal to empty
  • ISNUMBER($[Hours of Community Service content]) means the Hours of Community Service field must be populated with a number


  1. Select the grey Submit content box > go to the Properties panel > go to Display > in the Set visibility field, enter the following formula:
    =OR($[Name content]="", NOT(ISNUMBER($[Hours of Community Service content])))

:mag_right: Formula breakdown!

=OR() means that if at least one of the following conditions is true, the grey Submit is visible:

  • $[Name content]="" means the Name field is equal to empty
  • NOT(ISNUMBER($[Hours of Community Service content])) means the Hours of Community Service field is NOT filled with a number


:hammer_and_wrench: Builder tip: You can add a content box with text that can guide the user to enter the correct input. We recommend using a smaller font and different color.


Conditional visibility simplified

If you're not concerned about data validation, meaning the input (letters vs. numbers) the app user is entering into the fields, and just want to ensure no fields are left blank, here is a way to achieve conditional visibility (the grey/blue Submit button effect):

grey Submit =OR(ISBLANK($[Name content]), ISBLANK($[Hours of Community Service content]))

  • If either the Name field is blank OR the Hours of Community Service field is blank, then show the grey Submit.

blue Submit =NOT(OR(ISBLANK($[Name content]), ISBLANK($[Hours of Community Service content])))

  • Did you notice the =NOT wrapped around the same expression used for the grey Submit? This means, "Do the opposite."
  • If the Name field is NOT blank AND the Hours of Community Service field is NOT blank, then show the blue Submit.
Was this article helpful?
  • Yes
  • No

0 voters

1 Like