Form Component

What is the form component?

The Form Component is a Data Component that you can add to pages within your app for users to add and edit records from the live app. 

Form components can also be used to automate workflows by triggering custom-automated tasks when forms are submitted, and they can also be used to automatically add and update records behind the scenes. 

 

How forms are processed

Once you add a form to a page, each form goes through a process starting from when the form loads onto the page on the live app until after the form is submitted. 

While each form's trajectory occurs within one process, we have broken down this process into multiple steps to visually explain this process as clearly as possible. 

1. Form loads:

   1. Display Rules are processed in real-time

   2. Button Display Rules run

2. The form is submitted:

   1. If Record Rules are set to ignore Validation Rules, Record Rules will run

   2. Validation rules are run

3. Post submit- Validation Passed:

   1. Record Rules are processed

   2. Table Rules are processed
   3. Equations are processed

   4. Emails are sent

   5. Text messages are sent

   6. Submit rules are processed

   7. Outgoing Webhooks are processed

Let’s explore each of these steps involved in the form component's process. go through what each item means then give more details about each of these steps.

1. The form loads onto the page on the live app and the fields populate within the form.

1.1 Any Display Rules are triggered and dynamically applied based on the form values. Display Rules are custom-defined rules to show or hide fields based on other fields within the form. For instance, you could have a Display Rule stipulating that if the “Status” field is set to “Other” within the form, show a text field that says: “Please elaborate.” 

1.2 Button Display Rules are then triggered and the form buttons are dynamically changed based on the defined button display rules. Button Display Rules are custom-defined rules to change the button of a form based on fields within the form. For instance, you could have a button display rule stipulating that if the “Notify User” field is set to “Yes” within the form, change the form button text to “Submit and Notify User.”

2.1 Record Rules contain an option to run before Validation Rules. If this is selected, Record Rules will run first, followed by Validation Rules. See 3.1 for more information on Record Rules.

2.2 The form is then submitted, but before any data is added or updated within the database, any Validation Rules are run. Validation Rules enable you to check if the values entered within the fields are correct. For instance, you could have a validation rule stipulating that if the uploaded file is not a PDF file, show a custom error message.

3.1 Post form submit, Record Rules are run. Record Rules enable you to automatically insert new or update existing records once the form has been submitted. For instance, you could remove the "Created At" field from the form and create a record rule stipulating that the "Created At" field be automatically set to the "Current Date and Time" of when the form is submitted. You can use record rules to automatically update and add new records behind the scenes each time a form is submitted.

3.2 Table Rules enable you to automatically modify record values on the Data Table level. This step happens outside the Form Submit Process but needs to happen at this point for the following steps to contain accurate data. For instance, you could use a Record Rule to set a Created At field to the current date/time. This Record Rule would be specific to this form. If you created this rule as a Table Rule, this rule would run regardless of how a record is created, edited, or both.

3.3 Any equation or complex formulas are processed.

3.4 Any automated emails that you designated within the form settings are now sent.

3.5 Any automated SMS/text messages that you designated within the form settings are now sent.

3.6 Any Submit Rules that you created within the form settings are run. Submit Rules determine what users should see next after they have submitted the form as well as where the users should be routed after they have submitted the form. For instance, you could create a submit rule stipulating that if the "Job Status" is set to "Completed" within the form, the user should be routed back to the home page once the form is submitted. You could create another submit rule stipulating that if the "Job Status" is set to "Incomplete" within a form, route the user to the details page of this job.

3.7 Any Outgoing Webhooks that match the purpose of the Form Component, ie. Add Record or Edit Record, are processed.

 

Adding form components

Forms can be added to a page for a variety of functions, and some form functions can only work when the form is added to a specific type of page. Therefore, before adding a form component to a page, it is important to plan ahead for what you want that form to accomplish, and based on the form's intended function you will know within which page you should add the form.

For instance, if you are adding a form component to add new records, this form can be added to any page in your app. However, if you are adding a form component to edit records, this form can only be added to a child page, such as a details page.

If you are adding a form component to add connected records, meaning to add records that are connected to the current page's records, this form can only be added within a details page of a connected data table. For instance, say you have a Companies data table and an Employees data table and each employee works for a specific company. Within the Companies details page, you can add a form to add new employees, which will add new employees and connect each one to the company that they work for. 

By thinking ahead about what you want each form to accomplish, you will be able to easily determine on which page you should add the form.  

 

Like all other data components, form components can be added to a page within your app, specifically within a column on the page.

To add a form component to a page, go to the Page Builder and select the page onto which you wish to add the form. Within that page's Content tab, click on the blue + icon within the column you wish to add the form component to and select the form component from the drop-down list of components. 

Once you click on the form component to add it to the page, you will be prompted to select the data table for which you want this form to add and edit records. You will also be prompted to configure the form component using either the Quick Add or Customize option.

If you choose to configure the form using Quick Add, all the fields within the data table that you selected for this form will automatically be added to the form within a two-column layout. If you select the Customize option, you will be able to manually customize the form layout as well as manually select which fields you would like to add to the form.

To learn more about adding data components, selecting data tables, and configuring component settings with either Quick Add or Customize, please see the Data Component Overview article. 

Adding form fields

If you added the form component using the Quick Add option, all fields within the selected data table have been automatically added to the form within a two-column layout and the form is now ready for use or further customization if you wish.

However, if you added the form component using the Customize option, you will be directed inside the form component where can manually create the form layout and select the fields that you wish to add to the form  

Structuring the form layout is similar to structuring pages. You can add rows and columns and specify how many columns should appear within each row. You can then add fields within the columns of your form layout to add those fields to the form.

For instance, the image below shows a combination of a one-column and two-column form layout: 

On the live app, this form component will display as follows. 

By default, each new form that has not yet been configured comes with a default row with one column. You can add your first field by selecting it from the list of Fields on the left of your forms settings.

Or you can restructure the row into the number of columns of your choice and then add fields within each column:

 

You can also add Connected Fields to your form, which are fields that are connected from fields within the form's data table to another data table, by selecting connected fields from the Connected Fields tab. We will discuss Connected Fields in-depth further within this article.

Once you have added all your form fields, you can further customize each specific field with several field customization options such as making certain fields required, hiding a field's title, positioning the field's title to the direction of your choice, and many other field customization options. Let's explore all the different field customization options below. 

Keep in mind that you can also customize the form title by clicking on the pencil icon to the right of the form title located at the top of the form page.

Customizing form fields

To edit a field within a form, either double-click on the field or click on the pencil icon to the right of the field you wish to edit.

A new Edit Field window will pop up for you to edit that field's settings. 

While some field customization settings are available for all field types, some field customization settings are only available for specific field types. We'll explore all of the different field customization settings as well as for which field type each setting is available. 

Universal field type settings

The following field customization settings are available for all field types:

• Field Title
• Help
• Required 
• Read Only
• Label Positions
• Label Text and Icons

These field customization settings can be customized for any field, regardless of its field type.

For instance, if you have a Property Management App with an Incident Report Form, any form field that you click on to customize will include, at least, these universal customization settings. 

Let's explore each of these universal field customization settings. 

Field Title

This is where you can customize the field's title to how you wish the title will display on the form on the live app. 

On the live app, the fields title will display with your customization.

 

Help Text

This is where you can enter help text for this field to guide users on how to complete this field.

On the live app, the help text will appear beneath the field.

 

Required

This setting will ensure that the form is not submitted unless this field is not blank. If you set a field's Required setting to Yes, the field will display with a red asterisk, indicating to users that this field is required to be filled out on the form. 

 

Disabled/Read Only

Enabling this setting will disable this field so that it can not be edited on the live app. The field will be "Read Only".

Please Note: Enabling this setting will disable the field within the browser, not on the server-side. Meaning that technically speaking, someone could change the "disabled" value within the browser to edit this field. Therefore, for maximum security, it is not recommended to add sensitive fields to forms that you do not want to be changed. While you can use this setting to add "Read Only" fields, please keep in mind that this setting will not guarantee that the field is not changed. To add sensitive fields that you do not want to be changed, Tadabase recommends adding the field as an HTML field or as a Details Component. 

Get Value from URL

When the Get Value From URL setting is enabled, the form value will be retrieved from the URL and the form will be triggered when the page loads, automatically using the values in the URL. This can be useful when you need to share a custom form query that will be auto-generated when the page loads. 

Under the Get Value from URL setting, you will be able to enter the parameter name within the Param Name field box. The parameter name refers to the name within the URL after which the values will be used within the form query. 

For instance, if you enter the word "amount" within the Param Name box as illustrated in the image above, whatever values follow the word "amount" in the URL will be used in the form query. 

If you are using several values to be retrieved from the URL, separate each value with a "&" symbol as illustrated in the sample URL below.

Fields that are supported:
Text
Long Text
Rich Text
Address
Currency
Date
Date/Time
Radio
Select
Decision
Rating
Slider

 

Label Positions

The Label is the part of the field that displays the field title. For instance, “Job title” is the label for the field pictured below.

 

Under the Design Tab of each field's Edit Field window, you can customize the label settings for each field, including the label position.

You can customize the label's position to appear above, beneath, to the right, or the left of its field:

 

By default, label positions are set to Top, meaning at default the labels will appear above their fields as such:

If you wish to change the label position to either the right or left of the field, you will be prompted to select the label's column size relative to the full 12 columns. 

For instance, if you change a field's label position to the left and select a column size of 2:

On the form on the live app, the label will take up 2 columns and the field box will take up 10 columns (2+10=12):

Alternatively, if you change the label position to the left with a column size of 6, the field's label will take up 6 columns and the field box will take up 6 columns (6+6=12):

If you change a field's label to the right or left, the column size of the label should be considered regarding how long the label is or how long you expect the field box/the users' responses to be. For instance, if a field's label is a wordy question, you may wish to select a larger label column size to allow adequate space for the full question. Alternatively, you can save room on the form by keeping a field's label position as the default top position or by selecting the bottom position.

 

Label Text and Icons

Within the Label Tab of a field's Edit Window, you can also customize that field's label styling options, including Text Style, Text Size, Text Color, and Icon.

For instance, as you can see in the image below, the label's Text Style was changed to Bold, the Text Size was changed to Large, the Text Color was changed to blue, and a calendar icon was selected. 

 

Now that we've explored the universal field customization settings available for all fields, regardless of their field types, let's explore the custom field customization settings that are only specific to certain field types. 

 

Option field type settings

When using Option field types within a form, such as Radio Fields, Checkbox Fields, and Select Fields, you can customize the following option display settings for each option field:

• Inline/Separate Line
• Option Label Position
• Option Icons
• Option Sorting

Let's explore each of these options and display customization settings specifically available for option field types. 

Inline/Separate Line

For each option field, you can customize whether you would like the field's options to be displayed Inline (within one line) or each on a Separate Line:

You can customize this setting for a specific option field via the Format View setting within the field's Edit Field window.

 

Option Label Position

You can also customize the position of the option labels relative to their radio buttons/checkboxes.

You can choose to position the option labels to the Right (default position), Left, Top, Bottom or Hide the option labels altogether. 

 

Option Icons

If in the Data Builder you selected icons for each option when you created this option field, you can now choose to display those icons instead of the radio buttons.

For instance, if you created a radio option field called "Job Status" in the Data Builder and assigned icons for each option, you can now choose to display those option icons instead of the standard radio buttons.

To show the option icons, change the Show Icons setting to Yes and choose the Icon Size.

On the live app, the Job Status radio field will display on the form with the option icons selected in the Data Builder instead of the standard radio buttons.

 

 

 

Option Sorting

By default, options within an options field will be displayed on a form in the same order in which they were added or sorted in the Data Builder. However, you can override this default sorting setting by changing the Sort Alphabetically setting to Yes, which will display this option field's options in alphabetical order. 

Attachment field settings

With an attachment field, you can customize the maximum file/image size, the maximum number of files, and the file type accepted.

You can also customize the way the form will toggle the user to select the file/image. On PC all toggle options will be the same to open the user's files to select one. For mobile users, there are a couple of options as seen below.

 

Rich Text/Long Text field settings

Field Height 

A custom form field customization setting specific to Rich Text and Long Text fields is the ability to set the default field height for these fields to any pixel height you need.

 

Address field settings

Current Location Button

A custom form field customization setting specific to Address fields is the ability to add a Current Location button that will auto-populate the address field to the current user’s location.

If you change this setting to Yes, users will be able to press the Current Location button on the form to auto-populate the address field to the user's current location.

 

 

Date range field settings

Hide Time Control

A custom form field customization setting specific to Date Range fields is the ability to display only All Day events, which will hide the time select drop-down list for this field.

 

Basic text field settings

Hide Values 

A custom form field customization setting specific to Basic Text fields is the ability to hide the values entered by a user within this basic text field.

For data privacy concerns, there may be times when you wish to hide the values that users enter within a certain field on a form, such as when a form prompts users to enter their social security numbers. If would like to hide the values entered within a certain field, you may set the field's Password setting to "Yes".

Please Note: Changing a field's Password setting to Yes will only provide an extra level of security by hiding the values entered by the user. Values entered within the field, while encrypted on the database, will still not be “hashed and salted".

 

Customizing connection fields

Connection fields are fields that connect records in one data table with records in another data table. For instance, if you have a Companies data table and a Jobs data table and each job is assigned to a specific company, within the Data Builder you would create a connection field within the Jobs data table to the Companies data table to connect these two data tables. 

Within a form component, you can add connected fields to select connected values from a drop-down list. For instance, within an Add New Job form, you can add the Company connection field so that users can select a company to assign each new job.

By default, when you add a connection field to a form, all options will be displayed and selectable within the connection field's drop-down list.

However, you may choose to filter which options are displayed within the connection field's drop-down list, based on either the logged-in user or on custom-defined filter rules. We will explore the different filtering options for connection fields below, beginning with the ability to filter connection fields by records that the logged-in user is connected to.

Filter options by records the logged-in user is connected to

When using connection fields within a form component, you can customize a connection field to only show values that the logged-in user is connected to. This feature only works when the connection is made from the Users data table to the connected data table (Users data table > Connected Data Table).

For instance, say that you have three data tables in your app:

1. Companies data table
2. Jobs data table (Each job is assigned to a company)
3. Users data table (Each user belongs to one or more companies)

In this example, the User belongs to one or more Companies (Users > Company connection). Since the connection is made from the Users data table to the Companies data table, you can filter the Company connection field to only show values that the logged-in user is connected to. In this example, this would mean that when a logged-in user adds or edits a job and clicks on the Company connection field to assign the job to a specific company, rather than seeing all the company options, s/he will only be able to see companies that s/he is connected to. This prevents the logged-in user from having access to view or select all companies within your database, which may be sensitive information.

To enable this filter, open the company connection field within the form component and select the Users > Company filter within the Limit to Companies the Logged-In User Is Connected To setting.

 

Filter options with filter rules

You can also choose to filter the options that display within a connection field's drop-down list by creating custom filter rules.

Within a form component, open a connection field to customize it, select the Filter Record tab, and click on the Add New Rule button to add a new filter rule.

You can then begin to add custom filter rules. For instance, for a Company connection field, you can set a filter rule to only show options of companies that were added to the database during the current year. 

Now, when a user is completing an Add or Edit Job Form and clicks on the company connection field to assign the job to a specific company, the user will only see companies that were added to the database during the current year.

 

Using filter rules to filter options by the logged-in user

You can also use filter rules to filter connection field options by the logged-in user. This method works when the connection field is made to the Users data table, not from the Users data table (Connected Data Table > Users Data Table).

For instance, say that you have three data tables in your app:

1. Users' data table
2. Companies data table (each company is assigned to a user. For instance, each company belongs to a CEO.)
3. Jobs data table (Each job is assigned to a company)

In this example, each company belongs to a user/CEO (Company > User connection), so the connection is made within the Companies data table to the Users data table. Since the connection is made to the Users data table and not from the Users data table, you can create custom filter rules within an Add or Edit Jobs Form to filter the company options by values related to the logged-in user.

For instance, within an Add New Jobs form you can create a filter rule within the company connection field to only show company options for which users' role is CEO. 

Now, when a user adds a new job and clicks on the Company connection field to assign the job to a specific company, rather than seeing all the company options, s/he will only be able to see companies for which s/he is CEO. 

 

Add new option

Within connection fields on a form, you can also enable the ability for users to add new options to a connection field directly from within the form on the live app.

For instance, if you have an Add New Jobs form with a Company connection field, when users click on the company connection field to assign the new job to a specific company, they can choose to add a new company option directly from within this form.

To enable this setting, open the company connection field within the Add Jobs form component and set the Allow Insert New Record setting to Yes. 

Enabling this setting will add a new child page containing a new Add Company form that can be customized just like any form.

 

And on the live app, enabling this setting will add a + icon to the right of the company connection field:

When users click on the +icon, a new window will pop up allowing them to add a new company record directly from within the Add New Job form. 

 

Dependent drop-downs

Dependent Drop-downs refer to when a field's drop-down list of options is filtered by values from another connected field on the form. 

For instance, say you want to track all your customers' cars including the car make (Ford, Audi, BMW, etc.) and the car model (M5, TT, F150, etc.). You create a form for users to input their car make and model, and instead of using text fields that require users to enter this information, you use drop-down fields on the form to allow users to simply select their car make and model from the drop-down lists. 

The Problem: If a user adds a BMW car make, there's no need for that user to then see options for car models belonging to an Audi or Ferrari.

The Solution: Using Dependent Drop-downs

Dependent drop-downs allow users to see only certain drop-down options based on the selection they made within another connected field:

To learn how to set up dependent drop-downs, let's first look at the data structure of these connected fields. Since different car models belong to one car make, the parent item is the Car Makes data table and the child item is the Car Models data table.

Let's take a look at how this data would be structured within the Data Builder.

Within the Data Builder, you would have a Car Makes data table:

And a Car Models data table with a connection field to the Car Makes data table (each car model belongs to a car make):

This data structure will allow users to select one car make for each car model that is added to the database. 

Additionally, you would also have a My Cars data table, which is the data table that will be storing all the cars, including their makes and models. So this data table would have two connections- one to the car make data table and one to the car model data table. You can also add additional fields to this data table such as the car name or the date the car was added to the database or any other necessary fields.

Now that we understand how the data is structured in the Data Builder, let's discuss how to go about creating the dependent drop-downs within the Page Builder so that when users add cars to the Add My Car Form they will only see car model options connected to the car make they selected within the car make drop-down field.  

To create the dependent drop-down, open the Add My Car Form component to edit it. 

Double click on the field that you wish to filter to only show options based on the selection made within the parent item/field, which in this case is the car model field. 

A new window will pop up for you to edit the car model field. Under the General tab, change the Show setting from All Records (the default setting) to Car Models connected to this form's Car Makes.  

Now, when users add their cars via the Add My Car form and select the car model, only model options that are connected to the selected car make will appear in the car model drop-down list. 

Adding related records while filtering by connected records

Within a details page of a record, you have the option to add a form component to insert a new related record while filtering only records that are connected to the details page.

For instance, say you have three data tables:

1. Companies data table 
2. Locations data table with a connection field to the Companies data table (each location belongs to a company)
3. Events data table with a connection field to the Locations data table (each event belongs to a location)

The following connection diagram visually displays the connection between these three data tables:

As you can see in the connection diagram above, the Events data table is related to the Companies data table via the Locations data table, but it is not connected to the Companies data table.

Now, say that when you are viewing the details of a particular company you would like to add a new event, and when choosing the event location, you would like to only see locations connected to this particular company within the location drop-down list.  

For instance, say that you have the following locations in your Locations data table and the following companies in your Companies data table that each location is connected to (each location belongs to a company).

Within the details page of each company, you want to add an Add New Event form which will add a new event for that related company and when users select a location for the event, the location drop-down list will only show locations that are connected to that specific company. 

To accomplish this, add an Add New Event form to the Companies details page and add the Location field to this form. Then, double click on the Location field or click on the Location field's pencil icon to customize it and change the Show setting to Locations (Company) is connected to this page's company which will set the location drop-down field to only show location options that are connected to this page's company. 

Now, when users are viewing the details page of a company, such as Tadabase, and they fill out the Add New Event form to add a new event to Tadabase when they select a location for the event they will only see location options that are connected to Tadabase. 

 

Viewing Connected Fields

Connected fields are fields from a data table that is connected to the current form's data table. You can add Connected Fields to a form to enable users to view those connected values within the form. 

Connected fields are read-only only, and while their values will be dynamically updated within the form when other form fields are selected, they can not be directly updated or edited by users within the form.

For instance, if you have a Course Registration App with a Course Enrollment form, you can add connected fields to the enrollment form to enable users to view connected values while they complete the form, such as the course capacity for each course, the number of already enrolled students per course, and the number of open seats available per course. 

As you can see in the gif below, when users select a course to enroll in, they can simultaneously view the connected field values including the course capacity, enrolled students, and open seats which update per course selection.

 

As you can see in the gif above, you can also create Button Display Rules to change the button text, colors, and behaviors for each course selection that is made. So, for instance, when a user selects a course with a full course capacity, the button will change to a red button warning with the message "This course is full. Please select another course." and the user will not be able to enroll in that course. We explore Button Display Rules further in-depth later on within the article.

 

Adding connected fields

You can add connected fields to a form similar to how you add regular fields to a form- by selecting them from the Connected Fields tab located on the left-side menu within the form component. When you click on a connected field from the connected field list, it will be added to the right side of the page within the form.

 

For instance, in the example used above with the Course Enrollment Form, the Course field was added as a regular form field from the Fields tab and the three connected values including Capacity, Enrollments, and Open Seats were added from the Connected Fields tab.

On the live app, this form component results in the ability for users to select a course for which to enroll while simultaneously viewing the connected values for each selection.

As you can see in the above gif, the field titles (labels) for some of the fields used within this form have been changed from their original field titles. You can customize connected fields on a form similar to how you would customize regular fields- by double clicking or clicking on the field's pencil icon within the form component to customize.

Please Note: At this time, if the connected field added to the form component has a connection of one to many, only the first value will be displayed on the form.

Form Rules

Within a form component, there are four types of form rules you can configure to customize your form's display, submit, validation, and record behaviors:

1. Display Rules
2. Submit Rules
3. Validation Rules
4. Record Rules

Each of these four types of form rules can be found within the Form Rules tab within any form component.

Let's discuss each of these four form rules. 

Display Rules

The first form rule listed within the Form Rule tab is Display Rules. You can create Display Rules to affect one field's display behavior on the form based on custom conditions and other field values. 

With Display Rules, you can select the following display actions to occur when the display rule is met: 

 

For instance, say you have an Add Jobs form for users to add new jobs and the form includes four fields: Job Name, Job Description, Job Status, and Due Date. Say that when users add a new job via this form, you want that when the Job Status is open and the Due Date is before today, the job description should dynamically be made a required field. You can accomplish this by creating a Display Rule.

To create this Display Rule, click on the Form Rules tab > Display Rules tab within the Add Jobs form and click on the Add New Display Rule button.

Then create the conditions you wish to set for your display rule. In this example, you would create the condition that if the Job Status is Open and the Due Date is before today, then Require the Description, otherwise Do Nothing.

Now, when users add a new job and set the status to open and the due date to before today, the description field dynamically becomes a required field:

 

You can add as many groups of conditions as you need for your form, and each group can have its own custom actions.

To add an And Condition where both the first condition and the second condition have to be true for the display rule to run, simply click on the + icon to the right of the first condition.

 

For each condition, you can choose if the condition should Match All (all conditions must be met for the display rule to run) or Match Any (any condition must be met for the display rule to run). 

Please Note: Be sure to not create impossible conditions, such as making a field required and disabled at the same time. This will make the form impossible to submit.

Display rules run in order from top to bottom. If one rule matches more than one condition, the last rule to be triggered will win.

 

Submit Rules

The second type of form rule listed within the Form Rule tab is Submit Rules. You can create Submit Rules to custom-direct users after the form has been submitted.

For instance, each form comes with a preexisting, built-in Submit Rule to Show A Confirmation Message (the action) of "Form successfully submitted" (the message) once the user submits the form.

You can customize this confirmation message that displays when users submit the form and you can also add additional Submit Rules by clicking on the Add New Submit Rule button. 

 

When creating a new Submit Rule, you can select one of the following three actions:

1. Show a confirmation message

2. Redirect to an existing page

3. Redirect to another website URL

Let's explore each of these three action types you can choose when creating a Submit Rule.

Show Confirmation Message

Like the default Submit Rule that comes built into each form, you can create additional Submit Rules to show a custom confirmation message based on custom conditions. 

For instance, if you have a Ticket Management App with an Add New Ticket form, you can create a Submit Rule to show a confirmation message (the action) of "We understand this ticket is a high priority and will respond as soon as possible!" (the message) when the ticket priority is set to High (the condition).

 

Now, when users submit a ticket with a priority of high, they will see the above confirmation message.

You can create as many custom confirmation messages as you need based on your custom-defined conditions. 

All rules will be applied in the order in which they were added and the default confirmation message submit rule will apply for all form submissions that do not have a unique rule assigned to them. 

 

Redirect to an Existing Page

The second type of submit rule action you can choose is to redirect the user to an existing page within your app based on custom-defined conditions. 

For instance, if you have a Ticket Management App with an Add New Ticket form, you can create a submit rule to Redirect To An Existing Page (the action), the FAQs page (the page) when the ticket priority is set to Low (the condition).

 The submission rule dropdown will show Parent level pages, as well as Child level Details Pages for the relevant data table 

Now, when users submit a new ticket with a low priority, they will be redirected to the FAQs page of the app.

You can create as many submit rules to redirect users to existing pages based on your custom conditions as you need. The default submit rule will apply for all submissions that do not meet any of your custom submit rules. 

 

Redirect to another website URL

The third type of submit rule action you can choose is to redirect the user to another website URL based on custom-defined conditions. 

For instance, if you have a Project Management App with an Add New Project form, you can create a submit rule to redirect the user to a specific URL when the project priority is set to Highest.

As you can see in the image above, you can include parameters in your redirect such as POST and GET parameters. If you would like to include parameters and values from the form in the redirect using GET or POST methods, select Yes for Send Query Parameters and choose the Method of GET or POST. If you have a service that can consume GET or POST requests, you can push data directly from the form to those services. 

 

Once you create a Submit Rule, the number of existing Submit Rules you have for each form will show within the Submit Rules tab for that form.

 

Validation Rules

The third type of form rule listed under the Form Rules tab is Validation Rules.  You can create Validation Rules to ensure that certain restrictions are applied before the form is submitted.

With Validation Rules, you can run rules to validate against custom values, other form fields, and form connection fields. 

Validate against custom values

You can create validation rules to validate against custom values. 

For instance, if you have an Add New Job form, you can create a validation rule to restrict the form from being submitted when a user adds a job with a start date that is older than 14 days from the current date and display a custom error message of "You can not add a job that is older than 14 days."

To create this validation rule, click on the Form Rules tab > Validation Rules > Add New Validation Rule button.

Then create the validation rule to restrict the form from being submitted when a user adds a job with a start date that is before the previous 14 days and display a custom error message of "You can not add a job that is older than 14 days."

Now, when a user attempts to submit a form with a job that is older than 14 days, the form will not be submitted and the above error message will display.

The above example demonstrates running a validation rule against a custom value of "before the previous 14 days." Alternatively, you can also run validation rules to validate against other fields within the form, which we will discuss below. 

Validate against form fields

You can create validation rules to validate against other fields within the form.

For instance, you can create a validation rule to restrict the form from being submitted when a user adds a job with an end date that is before the start date and displays a custom error message of "You chose an end date that is before the start date. Please revise your job dates to successfully submit this job."

Now, when a user attempts to submit a form with a job end date that is before the job start date, the form will not be submitted and the above error message will display.

 

 

Validate against form connection fields

You can also run validation rules to validate against connection fields within the form. 

For instance, say you have an Events Management App with two data tables:

1. Events data table
2. Locations data table with a one-to-one connection field to the Events data table (each event is assigned to one location).

Now, say that you want to create a validation rule to prevent the form from being submitted when a user adds a new event and selects a location that is already booked.

To create this validation rule for the Add New Event form, select the Locations connection field and select "is not unique" to restrict this form from being submitted if the location selected is already booked/is not unique. You can also add a custom error message to display when this run is met, such as "The location you selected is unavailable. Please select another location and resubmit this event."

Now, when a user attempts to add an event with a location that is already booked (not unique), the form will not be submitted and the above error message will display. The form will only submit once the user selects a location that is not already booked (is unique).

The above example refers to validating against a connection field that has a one-to-one connection. You can also validate against a connection field that has a one-to-many connection.

When running a validation rule against a connection field that is a one-to-many connection, you can choose to validate if all or any value is unique.

For instance, say you have an Events Management App with two data tables:

1. Events data table
2. Performers data table with a one-to-many connection field to the Events data table (each event is assigned to one or more performers).

Now, say that you want to create a validation rule to prevent the form from being submitted when a user adds a new event and selects performers that are all already booked together for a different event.

To create this validation rule for the Add New Event form, select the Performers connection field and select "All values are not unique" to restrict this form from being submitted when all performers selected are not unique/are already booked together for a different event. You can also add a custom error message to display when this rule is met, such as "All performers selected are already booked. Please select another performer and resubmit this event."

 

Now, when a user attempts to submit a new event with performers who all are booked together for a different event (all are not unique), the form will not submit and the above error message will display. As you can see in the gif below, a user attempts to add a new event with the Frozen Princess and Clown performers, which are already both booked together for a different table as you can see in the Events table component. Therefore, the error message displays, and the form is not submitted.

However, if the user attempts to resubmit the event with an additional performer that is unique/not already booked, the validation rule will not apply since not all values are not unique (meaning, at least one performer selected is unique) and the form will be successfully submitted. 

 

Alternatively, you can choose to restrict the form from being submitted if any of the values selected are not unique. For instance, even if one performer selected is unique/not already booked but the other performer(s) selected are not unique/are already booked, the form should not be submitted.

To create this validation rule that restricts the new event from being submitted if any of the performers selected are not unique, select the Performers connection field and select "any values are not unique".

Now, when a user attempts to add a new event with even just one performer selection that is already booked/is not unique, the form will not be submitted, and the above error message will be displayed.

You can also create validation rules that only run when both the first condition and the second condition are met. For instance, you can create a validation run to restrict the form from submitting if the location is blank and the performer is blank. To create this rule, simply click on the + arrow to the right of the first condition to create the second condition.

Now, when a user attempts to submit a new event and leaves the location blank and the performer blank, the form will not be submitted. 

 

Adding field values to error messages

In addition to creating basic custom error messages for each validation rule, you can also add field values to serve as field placeholders within the custom error messages to further customize the messages.

To add field values to an error message, click on the Add Field button and select the desired field value you wish to include in the message. 

For instance, as illustrated in the image above, you can create a validation rule to prevent a new job from being submitted when a user selects an end date that is before the start date and display a customized error message of "You chose an end date of (End Date) that is before the start date (Start Date)." 

This error message will appear as follows:

 

Checking for additional fields

When creating a validation rule, you also have the option to check for additional fields by selecting the Check Additional Fields checkbox.

For instance, if you have a Feature Voting Platform where users can vote on features, you want to ensure that each user can only vote for each feature only one time. Users can vote for multiple features, but you want to ensure that they can only vote for each feature only once.

You can accomplish this by creating a validation rule to prevent the vote from being submitted if the Voter (the auto-logged-in user) is not unique and the Feature is also not unique. Check the Check Additional Fields checkbox and select the Feature field to check if there is any existing record of the auto-logged in voter voting for the selected feature. 

Now, when a user attempts to submit a vote for a feature that is not unique to this voter, the form will not submit and the above error message will display. As you can see in the Votes table component below, logged-in voter Bob Lowell has already voted for the plugin feature and therefore can not vote for this feature again.

Please Note: This example assumes that you have already set the Voter as the logged-in user within Record Rules. 

Click here to learn more about checking for additional fields. 

 

You can create as many validation rules as you need for each form.

Once you create validation rules, you can view the number of validation rules you have for a form within the form's validation rule tab.

Record Rules

The fourth type of form rule listed under the Form Rule tab is Record Rules. You can create Record Rules to automatically update records as well as insert new records once a form is submitted. 

Record Rules automate records and tasks within forms similar to how Action Links automate records and tasks within tables, lists, kanbans, etc. 

Adding record rules

When creating a new record rule, you will select the action, the condition for when the action should take place, and the field values you wish to set for when the action occurs.

For instance, you can create a record rule that whenever a Note is submitted, automatically set the date and time for when the note was created to the current date and time. 

To create this record rule for the Add Note form, select the Form Rules tab > Record Rules > Add New Record Rule button.

Then, create the record rule to update this note record (the Action), always (the When/Condition), by setting the Date/Time Created field to the Current Date and Time (the field values to set):

Now, when users add a new note, even though there is no Date/Time Created field on the form, the note will automatically be saved to the current date and time to which it was added.

Please Note: Every time this form is submitted, even if the field is present in the form, it will be overridden by the record rule.

 

Record rule actions

When creating a new record rule, you can choose one of the following four actions:

1. Update this record

2. Update connected record

3. Insert connected record

4. Insert new record

Let's explore each type of record rule action. 

Update this record

Creating a record rule with the update this record action will automatically update the current record once the form is submitted with the custom-defined values you set based on the custom-defined conditions you set.

For instance, you can create a record rule that when the order form is submitted, automatically update this order record when the Order Date is over 180 days by setting the Order Status to a custom value of Archived. 

In this example, the action is "update this record", the condition is when the "order date is before the previous 180 days", and the field values to set are to set the "order status to a custom value of Archived".

Tip: A simple way to view and understand a record rule is to simply read the entire section as a sentence. For instance, "Update this record when the order date is before the previous 180 days by setting the order status to a custom value of Archived."

This record rule will run automatically once the form is submitted and the rule's conditions are met.

You can add as many conditions and field values to be set as you need for a single record rule. For instance, you can create a record rule to update this order record when the order date is before the previous 180 days and the order status is not Open by setting the order status to Archived and the Last Modification Date to the current date and time. Click on the + icon to the right of the first condition and field value to add these additional conditions and field values. 

 

When setting the field values to be updated for this record, you can choose from several field value options, depending on the field type selected.

 

Depending on the fields selected, you can choose from the following field value options to update this record:

• Custom Value - Choose a static value that will be used every time the condition is met.
  
  

• Set Blank Value - This will null the value.
  
  

• Form Value - Use the value from another field in the form to update this particular field's value.
  
  

• Connected Value - If this form's data table has a connection to a parent data table, you can use a value from the parent data table to update this field's value. For instance, if you are adding a task that belongs to a project, you can use a value from the projects data table to update this task.
  
  

• Logged in User's Field - Use any field which belongs to the user who is currently logged in and is adding/editing this form. For instance, when adding a new job you can retrieve the value of the logged-in technician's license number and update this job record with that value.  
  
  

• Auto-logged user- If the field being updated is a connection field to the Users data table, you can set this field value to be auto-saved to whoever is logged in.
  
  
• Current Date & Time- When selecting date and time fields, you can update this record's date and time to the current date and time that this record was submitted. 

 

Update connected record

Creating a record rule with the update connected record action will automatically update a connected record of your choosing once the form is submitted with the custom-defined values you set based on the custom-defined conditions you set.

For instance, say you have a Project Management App with two data tables:

1. Projects data table
2. Tasks data table with a connection field to the Projects data table (each task belongs to a project).

The following image illustrates the connection between these two data tables where each task belongs to a specific project.

Now, say that anytime you add a new task and assign the task to a project, you want to automatically update the connected project's record and set the Last Task Added field to the current date and time. 

You can accomplish this by creating a record rule within the Add Task Form to update the connected Project record and set the Last Task Added field to the current date and time that the task is submitted. 

Now, when a user adds a new task and assigns it to a project, that connected project record will be automatically updated to show the Last Task Added field as the current date and time that this task was added. 

This update to the connected record will occur automatically once the form is submitted. 

 

Insert connected record 

Creating a record rule with the insert connected record action will automatically insert a new connected record of your choosing once the form is submitted with the custom-defined values you set based on the custom-defined conditions you set.

Inserting a connected record will automatically add a new record to the connected data table as well as establish a connection for the new record between the current data table and the connected data table using a connection field that you specify. 

For instance, say you have a Health Services App with two data tables:

1. Clients data table
2. Tasks data table with a connection field to the Clients data table (each task belongs to a client).

Now, say that when a user adds a new client with a high-risk assessment, you want a new task to be automatically inserted into the connected Tasks data table called "Conduct initial in-home assessment" and a connection to be established between this new task and this new client.

You can accomplish this by creating a new record rule within the Add Client Form to insert a connected task record when the new client's risk assessment is high and set the task name to a custom value of "Conduct an initial in-home assessment".

Now, when a user adds a new client with a high-risk assessment, a new connected task will automatically be inserted within the connected Tasks data table called "Conduct an initial in-home assessment".

You can create as many conditions and values as you need for each record rule. For instance, you can add a condition to insert the new connected task when the client's risk assessment is high and the client's age is above 70 and to set the task name to "Conduct an initial in-home assessment" and the date the task was added to the current date and time.

 

Insert new record

Creating a record rule with the insert new record action will automatically insert a new record of your choosing once the form is submitted with the custom-defined values you set based on the custom-defined conditions you set.

The insert new record action is generally most useful for logging data that is not connected so that even if the current record is deleted the log/note detailing this record will not be orphaned.

Therefore, it is recommended to avoid using connected fields within an insert new record rule, and rather use regular fields, so that even if the current record is deleted the new note/log record will not be orphaned.

For instance, say you have a Clients data table and a Notes data table, and every time a user adds a new client you want to automatically insert a new record into the Notes data table to log the details of when the client was added to the database and by whom.

You can accomplish this by creating a record rule to insert a new note record within the Notes data table every time a new client is added and set the note fields to log the details of when this client was added to the database and by whom.

Now, every time a user adds a new client, a new note will be automatically inserted within the Notes data table logging when this client was added to the database and by whom.

Since this record rule uses an insert new record action (rather than an insert connected record action), even if this client record is ever deleted, the new note logging this client will not be orphaned. 

To successfully use the insert new record action and avoid ever orphaning the new record from the current record, it is important to not use connected fields within an insert new record rule. For instance, instead of using an Added By connection field to the Users data table, it is recommended to use a basic text Added By field and set the new note value to the Logged-in User's Name Field. This is because using connection fields can orphan the new record's fields should the current record ever be deleted, whereas using regular, non-connected fields will ensure that the new record's fields will not be orphaned should the current record ever be deleted. 

 

Record rule values

Once you specify the action and condition(s) for a record rule, you can specify the field values that you wish to be set when the record rule runs.

Field value options depend on the field type selected. For instance, if you specify to set the Job Date field when the record rule runs, date-related value options will be available to select for this date field. 

Depending on the fields selected, you can choose from the following value options to apply when the record rule runs:

• Custom Value

• Set to blank

• Form Value

• Connected value

• Logged in user field value

• Auto Logged User (when the field is set in a connection to the User’s table)

• Current date/time (when the field is set is a date or time field.)

Let's discuss each value option.

Custom value

Choose a static value that will be used every time the condition is met.

The custom value options will be dependent on the type of field selected: 

• Date/time fields can only have a custom value of a date and time
• Text fields can be any custom text value
• Connection fields must be a predefined connected record.
• Option fields can be any option from the list of options in that field

Set blank value

This will NULL the value.

Form Value

Use the value from another field in the form to update this particular field's value.

Connected value

If the form's data table has a connection to a parent data table, you can use a value from the parent data table to apply to this field's value. For instance, if you are adding a task that belongs to a project, you can use a value from the projects data table to apply to this task.

Logged in user's field 

Use any field which belongs to the user who is currently logged in and is adding/editing this form. For instance, when adding a new job you can retrieve the value of the logged-in technician's license number and apply that value to this job record.

Auto logged user

If the field being updated is a connection field to the Users data table, you can set this value to be auto-saved to whoever is currently logged in. 

Current date and time

When selecting date and time fields, you can save this record's date and time to the current date and time that this record was submitted. 

If you save a value to the current date and time, keep in mind that the timezone in your app will be used for this date/time value. Be sure that the timezone in your app is set correctly. Click here to learn more about setting your time zone. 

 

Sending automated emails

You can use forms to send automated emails from your app once a form is submitted.  

Within the Emails tab of your form component, click on the Add New Email button to add a new automated email. 

When creating a new automated email, there are two types of emails you can create: 

1. Basic Emails 

2. Custom Emails 

Basic emails

You can create basic emails that will be sent to a custom email address of your choosing when the custom-defined conditions are met. 

For instance, within an Add New Project Form, you can create a basic email type to send an automated email to admin@tadabase.io when the project priority is set to Highest.

Now, when a user submits a new project with the highest priority, a basic automated email will be sent to admin@tadabase.io:

 

Custom emails

You can also create custom emails that can be highly customized to match particular requirements such as customized subject and body messages, to and from email addresses, and from names using custom, field, and logged-in user field values. 

For instance, within an Add New Project Form, you can create a custom email type to send an automated email to the assigned team member's email field and Bcc the custom email of projectmanager@abc.com when then project priority is set to Highest. You can customize the From Name and Email of the sender to the logged-in user's name and email. You can also highly customize the subject and body of the email using field value placeholders by clicking on the Add Field buttons within the subject and body. 

You can add multiple conditions and email recipients for each email, and you can also create multiple custom emails to meet multiple condition scenarios for each form. For instance, you can create another custom email for when the project priority is set to Low and another custom email for when the project deadline is within one week, etc.

For each custom email, you can add one or multiple email recipients using the following values:

• Custom Value- enter the custom value of the email address that should receive this email
  
  

• Field Value- can dynamically retrieve any email address field you have in the current form or connected form. For instance, say your app has an Add Job Form and each job belongs to a particular customer. You can customize the recipient email address to the customer's email field value stored within the Customers data table so that when a user adds a new job and assigns the job to a customer, that customer will be notified via this automated email. 
  
  

• Logged-in user’s value- can set the From Name and From Email to the name and email of the currently logged-in user.

Additionally, for each recipient's email address you can choose if that recipient should be emailed as To::, Cc:, Bcc:, or Reply To:.

Sending to multiple recipients via a one-to-many connection field is not supported .

Sending automated text messages

You can use forms to send automated text messages from your app once a form is submitted.  

Within the Text Messages tab of your form component, click on the Add New Text Message button to add a new automated text message.

When creating a new automated text message, there are two types of text messages you can create: 

1. Basic Text Messages

2. Custom Text Messages

Basic text messages

You can create basic text messages that will be sent to a custom phone number of your choosing when the custom-defined conditions are met. 

For instance, within an Add Project Form, you can create a basic text message that will send an automated text message to the custom phone number you specify when the project deadline is today.

Custom text messages

You can also create custom text messages that can be highly customized with custom, field, and logged-in user values for the message body and recipient.

For instance, within an Add Project Form, you can create a custom text message that will send an automated text message to the assigned team member's phone number field value when the project deadline is today and the priority is set to Highest. You can customize the message body using field value placeholders such as the team member's name, the project name, the project priority, and the project deadline by clicking on the Add Field button within the message body.

 

You can add multiple conditions for each text message, and you can also create multiple custom text messages to meet multiple condition scenarios for each form. For instance, you can create another custom text message for when the project priority is set to Low and the project deadline is within one week, etc.

 

Customizing form buttons

Within the Options tab of the form component, you can customize the form's submit button options under the Submit Button Options section.

Let's discuss the different button setting options you can customize within each form component.

Disable form from being submitted

By default, forms are enabled to submit. If you wish to disable a form from being submitted, toggle this setting from Enable to Disable this form from being submitted.

 

Customize submit button text

By default, each form component's submit button says "Save".

 

You can customize the submit button text for each specific form within this setting by entering your desired submit button text. For instance, depending on your form's function, you can change the submit button text to "Add Event", "Submit Vote", "Enroll", etc.

Button Display Rules

You can also dynamically customize a form's submit button based on values inserted within a form. With Button Display Rules, you can create rules to customize the button text, colors, icons, behaviors, and more based on the dynamically changing values inserted within a form.

For instance, if you have a Course Registration App with a Course Enrollment form, the ability for students to enroll in each course is dependent on several course factors including the course's capacity limit, the number of students who have already enrolled in that course, and the course's real-time number of open seats. Based on these combined factors for each course, students will be able or unable to enroll for each course on a course enrollment form.

With Button Display Rules, you can manipulate the course enrollment form's submit buttons to dynamically enable or disable students from enrolling in a course with custom display messages and styles depending on the capacity, enrolled students, and open seat values for each selected course.

To create Button Display Rules, click on the Add New Rule button.

Then, begin adding rules to customize each set of conditions, button actions, button text, and button styles that you need for each submitted scenario within your form. For instance, if a course's amount of open seats is lower than 1 and the course's open seat value is not blank, change the submit button background to red, change the submit button text to "This course is full. Please select another course.", and disable the form from being submitted so that students can not enroll in this course that has no open seats.

 

Now, when students attempt to enroll in a course with no open seats, they will see a red error submit button that says "This course is full. Please select another course." and they will be unable to enroll in that course.

 

The following submit button customization options are available when creating Button Display Rules:

• Set text color

• Set text style

• Set background color

• Display icon

• Hide value

• Hide text value

• Change text

• Disable the form from being submitted

 

Customizing form titles

You can customize each form's title by opening the form component and clicking on the pencil edit icon to the right of the form title located at the top of the form's content.

On the form on the live app, the customized title will display at the top of the form.

 

Adding HTML titles to form

You can add HTML fields to form components to organize sections and titles within a form as well as to provide further instructions within a form. 

To add an HTML field to a form, open the form component and hover over the column within which you would like to add this HTML field. Click on the blue +icon to select a field and select Other > HTML.

Once the HTML field has been added to the column, click on its pencil icon to edit it.

A new window will pop up for you to edit the Title and Instructions of this HTML field. You can add a title and instructions or you can customize the HTML to display whatever text you wish.

For instance, you can customize the HTML field to serve as section titles within a form as such:

Simply add HTML fields above each section within your form and customize the HTML titles.

Adding emojis to forms

You can add emojis to any field within a form by right-clicking within the form and selecting Emoji.

Then select your desired emoji.

You can add as many emojis as you wish throughout a form.