Design Form View

From each table created in AppAlloy, an automatic form view is available, with settings based on the imported data source.

What is a form view?

Form views are forms generated from your data table. From each column of your table, there is one input field added to the form.

By using the form views, the app users can add new rows of data or edit the existing ones easily on the small screen of their phones.

Accessing form view

By default, for each table imported, there is one form view created. To get access to this form view:

  • In the App Editor, go to the Design tab

  • On the left sidebar, in Tables, you can see the Form view option under the table.

Design form view

To start designing the form view, click the Form view option.

Set form name

The name of the form will be prominently displayed at the center of the screen to inform users about the form and the types of data they will be working with.

To set the form name:

  • In the design space of the Form view, on the left sidebar, click Form view.

  • On the right sidebar, navigate to Pages > Form name.

  • Set a name for the form as you prefer.

Set confirmation message

A confirmation message will appear when users tap the button to submit the form. This confirmation submission can help prevent accidental submissions and also gives users time to review their input if they want.

To set the confirmation message:

  • In the design space of the Form view, on the left sidebar, click Form view.

  • On the right sidebar, navigate to Confirmation, then switch the toggle button to enable confirmation message.

  • Configure the message as you prefer.

Set submission button & message

Designing the button to submit is to name the button. You may want it short as just "Submit" or "Send". You may want it to be clear like "Add new data".

Also, here you modify the message when the submission is completed.

To configure the submission button:

  • In the design space of the Form view, on the left sidebar, click Form view.

  • On the right sidebar, navigate to Submisson.

  • In Button Label, enter a name for the button

  • In Success message, write a message to your users when their submission is successful.

Manage form fields

Set field name

For any fields, the title helps describe more clearly what kind of data the form is collecting.

You can modify the title of each field by following the steps:

  • In the design view of the Form view, on the left sidebar, click on a form field.

  • Go to the right sidebar, in the Field name, and click the field.

You can set the field title by using the pre-defined data, or custom one with Custom or Power FX options. The title can be the column's name, a question, or a short description, it doesn't matter as long as it is clear about the data it should collect.

Configure field type

To create the default form view for your table, AppAlloy will learn the column type and its first 5 cells, then decide which type of form field is suitable to collect the correct data.

You can change the form field type to fulfill your need of collecting data, based on the type of your table.

If your table is an Alloy table, to change the form field type:

  • Go to the tab Data tab, on the left sidebar, and click on your table.

  • In the table, click on a column's heading.

  • In Type, click the field, and choose a type from the list.

If your table is synced from Google Sheets or Microsoft Excel, to change a component:

  • In the design space of the Record view, on the left sidebar, click on a form field

  • Go to the right sidebar, in Input method , click the field to drag the list, and choose a new field type.

Learn more about managing the data type while building your table:

Explore all field types:

Change field order

The app creator can directly change field order on the Form View on the app editor screen.

On the left sidebar, simply hold, and drag the field component up or down, to change the form field order within the form.

Hide a field

Too many fields to fill are overwhelming, as it makes it more complicated to complete the form. Sometimes, it is necessary to hide unnecessary fields to keep the form short, clean, and effective in collecting data.

To hide a form field, go to the left sidebar, hover the cursor on the field, and click the eye icon to hide or unhide the field.

Configure field visibility

In Visibility on the right sidebar, you can also control if users can see and/or edit the input of the field.

For the Read only setting:

  • Choose Yes if you do not want to collect data from users for this field, instead, you may want to keep it blank or collect default data, for example, the current date when users submit the form.

  • Choose No if you allow your users to input the data into the field.

  • Choose Power FX if you want to enable the read-only mode based on specific conditions.

For Hiden settings:

  • Choose Yes if you want to hide the field away.

  • Choose No if you want to show the field so users can see it in the Form view.

  • Choose Power FX if you want to set the appearance of the field based on specific conditions.

Manage input validation

What is Validation?

Validation ensures that data entered by users adheres to predefined rules and conditions, to maintain data quality and prevent erroneous submissions.

AppAlloy offers robust input validation features to guarantee accurate data collection while prioritizing an exceptional user experience.

There are basically 2 types of validation:

  • Required mode to ensure the fulfillment of input value,

  • Validation to ensure the validity of input value.

Enable required mode

The required mode in data validation ensures that the form always collects data for the field.

To enable the required mode:

  • On the left sidebar, click on the field.

  • Go to the right sidebar, and navigate to Validation.

  • Switch the toggle button to enable validation.

  • Tick the checkbox Required.

Once the required mode is enabled, users must to complete the field before submitting. If the field is empty and users click to submit, the form view will show a warning and demand users to complete the field.

Validate text input

The validation on text input is available when:

  • The field is shown as Text, or

  • The field is linked with column with type: Single-line text, Long text, Email, Phone number, Barcode.

For this type of validation, you can set:

  • Min length: the minimum number of characters entered as the input value.

  • Max length: the maximum number of characters entered as the input value.

  • Content type: the specific type of text value you want to collect (plain text, phone number, or email).

Content type validation

  • Plain text: any value without special requirements for characters.

  • Email: the input value should at least contain a valid email tag such as @gmail.com or @[company].net in case of organization email.

  • Phone number: the input value can contain the + symbol with the regional phone code, but must not contain alphanumeric characters or special ones like @, # or %.

    Examples of valid values for phone numbers: +123-456-789 or + 123 456 789 or +123456789

Validate number input

The validation on number input is available if:

  • The field is shown as Number, or

  • The field is linked with column with type: Number, Currency.

For this type of validation, you can set:

  • Min value: the minimum number that can be entered as the input value.

  • Max value: the maximum number that can be entered as the input value.

Validate uploaded file input

The validation on file input is available in the case:

  • The field is shown as Files, Photos, or

  • The field is linked with column with type: Photos, Files

For this type of validation, you can set:

  • Min files/ Min photos: the minimum number of files or photos that can be submitted at a time.

  • Max files/ Max photos: the maximum number of files or photos that can be submitted at a time.

Validate date input

The validation on date input is available in the case:

  • The field is shown as Date time, or

  • The field is linked with the column in type: Date

For this type of validation, you can set:

  • Disallowed date ranges: The limitation on which range users cannot choose. There are options for None, Past, Today, and Future.

  • Disallowed weekdays: The limitation on which day in a week that users cannot choose, for example, you may want users not to choose dates on Sunday or Saturday to set up a meeting.

Validate selection input

The validation for the selection input provides flexibility in regulating the number of selections each user can input for the field. This validation is available for:

  • The field is shown as Options, or

  • The field is linked with a column in type: Multiple select

For this type of validation, you can set:

  • Min selection: the minimum number of selections users must choose as the input value.

  • Max selection: the maximum number of selections users can choose as the input value.


What's next?

Last updated