Supercharging Form Components with Display Rules and CSS

In this episode, we'll learn how to supercharge your Form Components using Display Rules, CSS classes, and custom CSS.

Features Discussed:

1. Trigger Pipe (Time: 03:11)
   Learn how this feature allows you to initiate a process and retrieve specific data such as the app ID, app name, the total number of items found, and the response status. For example, when searching for an app name, you can set up the pipe to return whether the search was successful and the related details.
2. HTML Component (Time: 04:27)
   Learn how when setting up your Tadabase app, you can display different messages based on conditions using the HTML component. If an item is found, you might show a success message, but if not, display an error alert. By defining custom CSS classes, like .app-failed for failure messages and .alert-danger for errors, you can dynamically control what content users see.
3. Display Rules (Time: 05:52)
   Learn how to search value, add and show rules, and handle when not found by displaying a danger message and hiding input fields like App ID and Template Name.
4. Display Rules (Time: 09:19)
   Learn how you can enhance user feedback by adding CSS classes to input fields via rules. This method allows you to dynamically insert icons, such as a checkmark, into the input fields using pseudo-classes in CSS. If the search is successful, an icon is displayed; otherwise, elements are hidden based on the rules set, guiding users through a visually intuitive multi-step form.
5. Display Rules (Time: 12:28)
   Learn how to manage form navigation elements, such as step indicators and buttons, by using display rules. You can conditionally hide or show these elements based on specific criteria, such as the number of items found in a search.
6. Display Rules (Time: 16:53)
   Discover how to manage display rules based on search results. This includes showing success or failure messages and applying/removing CSS classes to specific fields like template name and app ID. If the search returns no results, the interface displays a failure message and hides unnecessary elements.

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. On today's episode, we are going to supercharge a Tadabase form component.

Overview

What we're doing today is we're going behind the scenes to an upcoming application I'm building called the App Marketplace. This will be available for Tadabase users to purchase and install community-made templates. Community members and Tadabase users will be able to add or post a template of their own for resale.

The goal of today’s build is to take this form and turn it from its initial state into a more dynamic, user-friendly version. Although it looks like I removed everything from the form, what's really happening is dynamic hiding and showing based on pipe values and other factors. I'm going to show you how it works.

Searching for Applications

We needed a way for someone to search for one of their own applications and let us know whether or not that app was found in their Tadabase account. As you can see, I’m searching against my own account, and if I search for the name of the app that I want, if we find the app, we get a nice message. It shows us the app ID that we need to make this work, the name of the template, and the next steps.

Part of this process is ensuring that people can't continue through the form unless the app is found. If we don’t find an app, they can’t go any further. That was a big goal, and we were able to achieve it.

Building the Supercharged Form

Components Used

The main components we’re using here are the form component, display rules, CSS selectors, and custom CSS. All of this is built directly into the form component and the actual page itself. We’re adding just 25 lines of custom CSS, and the rest is handled directly inside the form.

Initial State of the Form

To start, the form has no rules or dynamic elements. When filling it out, we search for an app name, triggering a pipe. This pipe uses the Tadabase REST API to search for an app built by the user by the app name, returning the app ID, app name, total number of items found, and response status (either success or false). Depending on whether the app is found or not, the form displays different messages and elements.

Setting Up Display Rules

We define two CSS classes, app-failed and app-success, and use display rules to show or hide these messages based on whether the app is found. If the app is found (total items > 0), we show the app-success message; otherwise, we show the app-failed message.

We also dynamically show or hide certain form fields, like the app name and app ID, based on whether the app is found. These fields are set to read-only and are required, so users can’t modify them but must fill them in before proceeding.

Enhancing User Experience with Visual Feedback

We further enhance the form’s user experience by adding visual cues, like a checkmark next to the app name and app ID fields when an app is successfully found. This is done using custom CSS classes and pseudo-elements to insert icons.

Controlling Form Navigation

To prevent users from moving to the next step in the form if the app isn’t found, we hide the multi-step form buttons and step indicators until the app is found. We add a custom CSS class to the “Next” button and use display rules to control its visibility. This ensures that users can’t proceed without successfully finding the app.

Testing and Final Touches

Testing Success and Failure Scenarios

We thoroughly test the form by adding display rules and testing them step by step. We confirm that the correct elements are shown or hidden based on whether the app is found. If the app is found, the next step buttons and other form fields are shown; if not, they remain hidden.

Hiding Unnecessary Fields

Certain fields that should always remain hidden are controlled by setting their visibility based on whether the pipe returns a result. These fields are hidden by default and remain hidden regardless of the search outcome.

Customizing Form Layout with CSS

To improve the form’s layout, we add custom CSS to display the search input and button inline. This is done using flexbox, which helps align and space out the form elements cleanly. The search input is given a 75% width, and the search button is given a 20% width.

Conclusion

We’ve successfully taken the form from its initial state to a supercharged version, using a combination of CSS selectors, custom CSS, and display rules. This build showcases the power of Tadabase when combining its features to create dynamic and user-friendly forms.