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:
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.