Form Elements

Form elements allow you to customize how fields appear on your AppPages. Caspio offers a variety of form element types described below in this article.

Display only
Dropdown
Listbox
Radio buttons
Text area
Text field
AutoComplete
Calculated value
Checkbox
Hidden
Multi-select list
Multi-select dropdown
HTML block
File upload

Display only

Displays only a field with an existing value that cannot be changed by app users. For Attachment data type fields, the Display only element shows the file preview in your chosen format. 

Display only can be configured with the following options: 

General  

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.
• Show file as (Attachment data type fields only) – displays the file preview as text, image, or both. You can configure the following settings, depending on your selection:
  • Text options – choose if you want to show the file type icon and the file size information. You can use the file name as the display name or enter custom text.
  • Image options – choose if you want the preview image to fill up the available space or to have specific dimensions.
  • Action – specifies what happens when a user clicks the preview content. You can enable file download, redirect to a specific URL, or expand the file. The available options vary depending on the file type.

Layout  

• Label position – you can choose between Left, Top, or No label. 
• Next element position – you can choose between Below or Inline. 

Note: Display only supports the following data types: Text (255), Text (64000), Number, Integer, Currency, Date/Time, Yes/No, List-String, List-Date, List-Number, Timestamp, Formula, Attachment.

Dropdown

Displays options in a list where the user is only allowed to choose one value. You can add predefined custom values, use a lookup table or view, or both as the source for your values. 

The dropdown can be configured with the following options: 

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.  
• Placeholder text – displays example content for a field. 
• Source 

• • Custom values – define the static list of items available in the dropdown. 
  • Lookup table
    
    • On the Lookup table tab, you can define the dropdown list based on table or view records. For example, if you store country names in a lookup table, you can use this option to select a country name from the names available in the lookup table. In such a way, you can re-use a lookup table in different DataParts. Custom values are not shared between DataParts. 
    • On the Filter tab, by selecting the Enable lookup table filtering checkbox, you can further refine the list of options in the dropdown based on a form field value. For example, when the user selects a region, you can display only the postal codes that are available for that region.
      You configure this feature by selecting the Form field to compare with a Lookup field. If the values match, the dropdown displays the relevant options for that value from the lookup table; if the values do not match, you can decide to either display all the options from the lookup table or display an empty list with a message.
      To view a sample use case for configuring a filtered dropdown, see Cascading Elements.
  • Both – a combination of custom values and a lookup table. 
• Default value – value that is automatically populated when a form is displayed. The value is assigned to Submission Form fields to facilitate the process of filling a form. 
  You can pass a static value by inserting it in the Default value field and a dynamic value using parameters. 

Layout 

• Field size – column width. You can select between: 

• • Auto – defines the width of a column by the size of the content inside a field,  
  • Fixed – allows for setting the precise size of the column field width in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size.  

• Label position – you can choose between Left, Top, Float, or No label. 
• Next element position – you can choose between Below or Inline. 

Note: Dropdown supports the following data types: Text (255), Text (64000), Number, Integer, Currency, Date/Time, Yes/No, List-String.

Listbox

Displays options in a list where the user is allowed to select one or more items from the list. You can add predefined values, use a lookup table or view, or both as the source for your values.  

Listbox can be configured with the following options: 

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.  
• Source 
  • Custom values – define static list of items available in the dropdown. 
  • Lookup table – define the dropdown list based on table or view records. For example, if you store country names in a lookup table, you can use this option to select a country name from the names available in the lookup table. In such a way, you can re-use a lookup table in different DataParts. Custom values are not shared between DataParts. 
  • Both – combination of custom values and lookup table. 
• Default value – value that is automatically populated when a form is displayed. The value is assigned to Submission Form fields to facilitate the process of filling a form. 
  You can pass a static value by inserting it in the Default value field and a dynamic value using parameters. 

Layout  

• Field size – field width and height.  

For width, you can select between: 

• • Auto – defines the width of a field by the size of the content inside a field,  
  • Fixed – allows for setting the precise size of a field width in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size.  

For height, you can select between: 

• • Rows – allows for setting how many rows from your list should be visible to the app user. To select a non-visible row, scroll the list.  
  • Fixed – allows for setting the precise size of the field height in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size. 

• Label position – you can choose between Left, Top, or No label. 
• Next element position – you can choose between Below or Inline. 

Note: Listbox supports the following data types: Text (255), Text (64000), Number, Integer, Currency, and Date/Time. 

Radio buttons

Displays a set of options where the user is only allowed to choose one option. You can add predefined values, use a lookup table or view, or both as the source for your values.  

The radio button can be configured with the following options: 

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.  
• Source 
  • Custom values – define static list of items available in the dropdown. 
  • Lookup table – define the dropdown list based on table or view records. For example, if you store country names in a lookup table, you can use this option to select a country name from the names available in the lookup table. In such a way, you can re-use a lookup table in different DataParts. Custom values are not shared between DataParts. 
  • Both – combination of custom values and lookup table. 
• Default value – value that is automatically populated when a form is displayed. The value is assigned to Submission Form fields to facilitate the process of filling a form. 
  You can pass a static value by inserting it in the Default value field and a dynamic value using parameters. 

Layout 

• Options per line – you can place multiple radio button options in a single line or only one option per line. 
• Label position – you can choose between Left, Top, or No label. 
• Next element position – you can choose between Below or Inline. 

Note: Radio buttons support the following data types: Text (255), Text (64000), Number, Integer, Currency, Date/Time, and Yes/No.

Text area

Displays a box for text entry. The maximum number of characters it can hold is 64000. This type is typically used for long descriptions or comments. The text area supports a rich text editor, which can be turned on by an app author.

Text area can be configured with the following options: 

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.  
• Placeholder text – displays example content for a field. 
• Character length – the number of characters a user can enter. You can select Display remaining characters to enable your app users to monitor the number of remaining characters. 
• Default value – value that is automatically populated when a form is displayed. The value is assigned to Submission Form fields to facilitate the process of filling a form.
  You can pass the static value by inserting it in the Default value field and a dynamic value using parameters. 

Layout 

• Field size – field width and height.  

For width, you can select between: 

• • Auto – defines the width of a field by the size of the content inside a field,  
  • Fixed – allows for setting the precise size of a field width in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size.  

For height, you can select between: 

• • Rows – allows for setting how many rows from your list should be visible to the app user. To select non-visible row, scroll the list. 
  • Fixed – allows for setting the precise size of the field height in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size. 
• Label position – you can choose between Left, Top, Float, or No label. 
• Next element position – you can choose between Below or Inline. 

Note: The text area supports the following data types: Text (255) and Text (64000).

Text field

Displays a single line for text entry. The maximum number of characters it can hold is 255. You can customize the text field to show as password encrypted characters (****) or include a calendar popup. For text fields, you can add a second field entry for confirmation. 

The text field can be configured with the following options: 

General 

• Text field options – you can choose between: 

• • None – a standard input field. 
  • Show as password – doesn’t show characters that a user enters but replaces them with asterisks (***) so they are not exposed on the screen. 
  • Calendar popup – used for saving a date in the text field. 
• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.  
• Placeholder text – displays possible content for a field. 
• Character length – the number of characters a user can enter.  
• Add confirmation field – requires an app user to verify their input. For this field, you can configure: 

• • Confirmation label – label for a confirmation field. 
  • Confirmation hint – text displayed in a confirmation field tooltip.  
  • Confirmation placeholder – example content for a field. 
• Default value – value that is automatically populated when a form is displayed to facilitate the process of filling a form. The value is assigned to Submission Form fields.
  You can pass a static value by inserting it in the Default value field and a dynamic value using parameters.

Layout 

• Field size – field width. You can select between: 

• • Auto – defines the width of a field by the size of the content inside a field,  
  • Fixed – allows for setting the precise size of a field width in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size.  

• Label position – you can choose between Left, Top, Float, or No label.
• Next element position – you can choose between Below or Inline

Note: The text field supports the following data types: Text (255), Text (64000), Number, Integer, Currency, and Date/Time.

AutoComplete

Displays a suggestion box as the user types keywords. It recommends choices based on Begins with or Contains matching values in the associated lookup table.  

Autocomplete can be configured with the following options: 

General 

• Autocomplete field options – presents a user with a list of suggested options from a lookup table. For example, when you type ‘a’, all options beginning with (or containing) ‘a’ are listed below the input. When you select Force selection, a user can only choose a value from the selected lookup table. 
• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.  
• Placeholder text – displays possible content for a field. 
• Character length – the number of characters a user can enter.  
• Lookup table or view – a source table or view for finding and recommending autocomplete options 
• Filter AutoComplete by – when the lookup table for autocomplete is selected, you can choose which field values will be displayed in the list of suggested values. A field for display may be different than a field for a value that is being saved, for example, even though the suggested list presents user emails, the user id is saved in the table.
• Default value – value that is automatically populated when a form is displayed. The value is assigned to Submission Form fields to facilitate the process of filling a form.
  You can pass a static value by inserting it in the Default value field and a dynamic value using parameters.  

Layout 

• Field size – field width. You can select between: 

• • Auto – defines the width of a field by the size of the content inside a field,  
  • Fixed – allows for setting the precise size of a field width in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size.  

• Label position – you can choose between Left, Top, Float, or No label. 
• Next element position – you can choose between Below or Inline. 

Note: AutoComplete supports the following data types: Text (255), Text (64000), Number, Integer, Currency, and Date/Time.

Calculated value

Calculated values generate dynamic calculations that automatically update as users interact with your form. The result of the calculation needs to be in a format that is compatible with the field data type.

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.
• Formula – the foundation for the calculation. You can construct a formula using parameters (including values from tables or from other fields in the form), SQL statements, and functions. You can check if your formula is correct using the Verify button.

Layout 

• Label position – you can choose between Left, Top, or No label.
• Next element position – you can choose between Below or Inline. 

Checkbox

A small square box that displays the field as an option. A user can mark it for positive (yes) affirmation. For negative (no) affirmation, the checkbox should be cleared. 

A checkbox can be configured with the following options: 

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip.  
• Display text – label shown on the left side of the checkbox. 
• Value when checked – value saved to a text field in the table when a checkbox is checked. 
• Default value – value that is automatically populated when a form is displayed. The value is assigned to Submission Form fields to facilitate the process of filling a form.
  To set up a default checkbox state, in the Default value field, click Selected or Not selected. To pass a value dynamically, select Parameter and type or insert a parameter with a parameter picker.
  For dynamic values, checkbox supports authenticated user fields, app parameters, and query string parameters.
  

  Note: When default value is passed as a parameter, the checkbox will remain unchecked for the following values: blank, “0”, “No”, “False”. For any other values, the checkbox is checked.   

  Layout 

  • Label position – you can choose between Left, Top, or No label. 
  • Next element position – you can choose between Below or Inline. 

  Note: Checkbox supports the following data types: Text (255), Text (64000), Number, Integer, Currency, Date/Time, and Yes/No.

Hidden

Hides the field so it does not appear on an AppPage. For instance, you can use it to stamp records with a user ID. 

Note: The Hidden form element supports only the Text (255) data type.

A hidden form element can be configured with the following option:

Default value – value that is automatically populated when a form is displayed. The value is assigned to Submission Form fields to facilitate the process of filling a form.
You can pass a static value by inserting it in the Default value field and a dynamic value using parameters.  

Multi-select list

Enables a user to select multiple values from the list of predefined custom values. This form type works only with List-String, List-Number, and List-Date data types.   

Multiselect list can be configured with the following options: 

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip. 

Layout 

• Field size – field width and height.  

For width, you can select between: 

• • Auto – defines the width of a field by the size of the content inside a field,  
  • Fixed – allows for setting the precise size of a field width in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size.  

For height, you can select between: 

• • Rows – allows for setting how many rows from your list should be visible to the app user. To select non-visible row, scroll the list. 
  • Fixed – allows for setting the precise size of the field height in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size. 

• Label position – you can choose between Left, Top, or No label. 
• Next element position – you can choose between Below or Inline. 

Note: Multiselect listbox supports the following data types: List-String, List-Date, and List-Number.

Multi-select dropdown

Enables app users to select multiple values from a list of predefined custom values. This form type works only with List-String, List-Number, and List-Date data types.  

Multiselect list can be configured with the following options: 

General 

• Label – instructional text or name for a field. 
• Hint – text displayed in a tooltip. 

Layout 

• Field size – field width and height.  

For width, you can select between: 

• • Auto – defines the width of a field by the size of the content inside a field,  
  • Fixed – allows for setting the precise size of a field width in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size.  

For height, you can select between: 

• • Rows –  allows for setting how many rows from your list should be visible to the app user. To select non-visible row, scroll the list. 

• • Fixed – allows for setting the precise size of the field height in pixels [1-9999px]. The content of a field will not be visible if it exceeds the set size. 

• Label position – you can choose between Left, Top, Float, or No label. 
• Next element position – you can choose between Below or Inline.

Note: Multiselect dropdown supports the following data types: List-String, List-Date, and List-Number. 

HTML block

Customizable HTML content used to add descriptive text, links, or graphics to an AppPage.  

You can configure the following options for HTML blocks:  

General  

• Label – Name for a field. If you enter the label, it will appear on the left of the form. 
• HTML editor:  
  • You can insert parameters to pass value dynamically, for instance, to display the name of a logged in user.
  • You can insert and format your text using the rich text editor or insert code in the Code mode. 

Layout  

• Field size – field width. You can select between: 
  • Auto – adjusts the width of a field to its content,   
  • Fixed – sets the precise size of a field width in pixels. The content of a field will not be visible if it exceeds the set size.   
• Label position – you can choose between Left, Top, or No label.  
• Next element position – you can choose between Below or Inline.

File upload

Displays a drag-and-drop control that allows app users to work on files that are saved directly in a table. They can upload, preview, replace, and remove files.

You can configure the File upload element with the following options:

General

• Label – instructional text or name for a field.
• Hint – text displayed in a tooltip.
• Show file as – displays the file preview as text, image, or both, as well as the controls to upload and work with the uploaded files. You can configure the following settings, depending on your selection:
  • Text options – choose if you want to show the file type icon and the file size information. You can use the file name as the display name or enter custom text.
  • Image options – choose if you want the preview image to fill up the available space or to have specific dimensions.
  • Drag & Drop uploader – choose if you want to use default labels for the controls that are visible in the uploader or enter custom texts.
  • Action – specifies what happens when a user clicks the preview content. You can enable file download, redirect to a specific URL, or expand the file. The available options vary depending on the file type.

The File upload element is supported for Sign-up forms, Submission forms, and Details/update forms.