Learn about building forms with Budibase.
Forms are the primary building blocks of any data heavy applications. With Budibase you can build rich, themeable forms to create and edit your data.
Forms are built up from 3 main component types - a form component, field group components and field components. It's important to understand the best component layouts for forms, so you can take advantage of features like embedding any other content inside forms, or using data bindings to link up your form to other components.
Forms can contain any content - not just field groups and fields - so you can easily nest any other components alongside your form components. The best way to achieve this neatly is to always put groups of fields inside a field group component, then you can simply include any other components inside your form, beside the field groups.
Forms automatically validate their fields if a form schema has been set, and they'll show validation errors. Forms provide a button action to validate the form programmatically, which you'll probably want to trigger when using the data from the form. This action will trigger the form validation, show any errors, and stop executing any further actions if the form is invalid. The recommended way to use this is for your first button action to be validating the form, and the second action to be performing your task - for example saving a row. This ensures only valid forms will be submitted.
Learn how to use the Budibase field group component.
Field groups are components which group fields together. They allow your fields to be neatly aligned with each other, and let you style you fields with consistent label positions.
Field groups are simple group components, so they don't have many settings.
Setting
Required
Description
Name
Yes
The name of the field group component
Labels
Yes
The position of the field labels
Each field component has a label associated with it, showing the name of the field. Field groups let you align your labels for multiple fields, to keep them looking neat and consistent. There are 3 different options for label positions - left aligned, right aligned and above your field.
Field groups have a powerful function which can save you a lot of time when working on forms - they let you reset them, which automatically populates them with all the fields in your form schema. This means you can generate a full form in one click, or you can add in missing fields if you change your schema.
When you select a field group component in the builder, you'll be able to press "Reset Fields" in the settings panel to perform this function.
Learn how to use the Budibase form component.
The Form component is the top level component of forms. All field groups and fields must be placed inside a form, and they won't work outside it.
Forms only have a few simple settings.
Setting
Required
Description
Name
Yes
The name of the form component
Schema
No
The schema for the form
Theme
No
The theme for the form
Size
No
The size theme for the form
Disabled
No
Whether the form is disabled (noneditable) or not
Forms have a Schema setting which is optional. The schema for a form can be a table, view, relationship, query or "custom". A custom schema means that there is no backing data source schema.
Choosing a form schema has the following advantages:
When adding fields, field names can be chosen from a dropdown rather than being typed
Field validation is automatically added to match the schema
If you want to create rows in a table using your form data, you'll need to choose the correct schema for the table you'll be saving your data to
Fields will be able to automatically prevent you entering an illegal field name for a certain data type
Form components can be automatically generated to match the schema
Learn how to use Budibase field components.
Each field component represents a single field in the form. There are different component for every data type - e.g. a text field, an options picker or a checkbox.
All fields have a field and a label setting. The field is the name of the field, or property of the schema. This can be free typed or, if a schema exists on the form, selected from a list. There are unique components for every type of data, and if your form has a schema then you'll only be able to choose field names which fit the particular type of component that is selected. The label setting is the label that will be displayed beside or above your field. Most fields also have a placeholder setting to control the text displayed when the field is empty.
Setting
Required
Description
Name
Yes
The name of the field component
Field
Yes
The name of the field in the schema
Label
No
The label displayed beside this field
Placeholder
No
The placeholder value to show if the field is empty
Disabled
No
Whether the field is disabled (noneditable) or not
Some field components for certain data types may have other settings, but in most cases this table is an exhaustive list.
Whether your form has a schema or not, you can always add custom fields that don't exist in the schema by free typing the name of the field. Data bindings will always reflect the names of all the fields in your form - so even if you don't have a schema on your form, you'll be able to bind to any of your fields.
