How do I use CSS classes with Display Rules?

In this episode, we’ll take a look at:

• The Form Component
• Display Rules
• Custom CSS classes

Features Discussed:

1. Form Component (Time: 5:24)
   Learn how to create and configure form components for efficient data collection.
2. Display Rules (Time: 6:26)
   Learn how to set up display rules to control the visibility of form elements based on specific conditions.
3. CSS Classes (Time: 6:35)
   Learn how to apply CSS classes to customize the appearance of your form components and enhance their styling.

Transcript Summary

Introduction

Today, we're talking about using CSS classes with display rules. This is a native feature inside of Tadabase, and it allows us to add CSS classes, remove CSS classes, and hide or show things based on CSS classes—all within display rules themselves.

Overview

We're going to use:

• A form component
• The display rule feature
• The ability to add custom CSS classes

This will allow us to clean up a form, make it more efficient, and improve the user experience without adding as many display rules as we normally would.

Finished Application

Let me show you the finished product. This is a simple form for Youth Sports registration. You can fill out the child's name and email, and based on the program selection, the form will show the relevant fields. For example, selecting football will show the football fields, and the same applies to hockey and baseball. The form dynamically adjusts to display the appropriate fields based on the selection.

Building the Form

Initial Setup

We're inside the Tadabase Builder with a simple form for collecting registration information. This form is designed for parents to sign their children up for various youth sports. All the information is collected in one form.

If we preview the form without any modifications, the parent has to fill out the child's name, email, and then select the program, which could be football, hockey, or baseball. The form will then require the parent to pick the relevant division and equipment.

Using Display Rules

Normally, you might add a display rule to show or hide fields based on the program selection. However, this can lead to a massive list of conditional rules, making it messy. Instead, there's an easier way using CSS classes.

Adding CSS Classes to Rows

1. Child Name and Email: First row
2. Program Selection: Second row
3. Football Fields: Third row, assigned the CSS class .football
4. Hockey Fields: Fourth row, assigned the CSS class .hockey
5. Baseball Fields: Fifth row, assigned the CSS class .baseball

Setting Up Display Rules

We’ll set up three display rules:

1. If the program selection is "Youth Football," show the .football CSS selector and hide the others.
2. If the program selection is "Youth Hockey," show the .hockey CSS selector and hide the others.
3. If the program selection is "Youth Baseball," show the .baseball CSS selector and hide the others.

This approach condenses everything into three rules. When a program is selected, the entire row associated with that CSS class is shown, and the others are hidden.

Advanced Usage with Images

Adding Images Based on Selection

You can take this further by displaying images based on the program selection. By adding or removing CSS classes, you can dynamically change the appearance of the form, including displaying specific images.

For example, you can add a CSS class like .football-image to show a football image when the football program is selected. The same applies to hockey and baseball.

Code Explanation

The CSS code uses pseudo-classes to append a background image to the form based on the selected program. The class names are .football-image, .hockey-image, and .baseball-image.

Managing Class Removal

To ensure that only the relevant image is displayed, you need to remove any previously added classes when a new program is selected. This ensures that only one image is shown at a time.

Testing the Form

When the form is previewed, selecting a program dynamically shows the relevant fields and image. The form updates correctly as the selection changes, ensuring a smooth and intuitive user experience.