Skip to main content

Beta guide for new forms on Quickbase mobile

Beta

This is a beta feature, which means we’re still developing it. Some functionality might change. 

To get access, register at quickbase.com/beta. After you register, we’ll contact you if you’re a match for the program. Contact your account team to learn more.

This article explains how to assign and use the latest version of forms for mobile. This is an upgrade from legacy forms.

Forms created in Quickbase are automatically available on mobile devices without any additional building needed. The forms canvas adapts to different screen sizes on desktop, tablet, and mobile devices.

It's recommended that app admins test forms for mobile on a mobile device to ensure they display and function as expected.

In this article

Assign forms as the default form for mobile

App admins can assign the latest, mobile-friendly version of forms to specific user roles using the column View/Edit/Add Form (Mobile). Then, when users with that role open the app on their mobile device and add, view, or edit a record from the specified table, they open the form assigned to their role.

c6e22161-82b9-4cac-bc3b-f5352d1fc36c (1).png

Alternatively, if app admins want mobile users to see the same forms they've assigned to desktop view, edit, and add actions, they can select <Use Full Site forms> in the View/Edit/Add Form (Mobile) column.

Override role settings by report

App admins can associate forms with a specific report for mobile. Users open the form you specify when they view or edit a record from within that report on mobile.66f578fb-af51-48c7-bc43-7809641b46e7.png

Understand how the form canvas translates to mobile devices

Forms are organized with pages, sections, and columns.

  • Pages can have multiple sections
  • Sections are collapsible and can have up to six columns
  • Columns have form elements

Quickbase automatically adjusts the height of a column to fit the form elements it has. You can customize the width of columns. On a desktop device, all six columns display side-by-side in a single row. Learn more about the form canvas.

Desktop layout example

For tablet devices

Forms provide tablet users with a similar experience to desktop when the tablet is held in the landscape position. The form is optimized to display the whole form with all six columns in a single row at 1080px wide.

Tablet layout example at 1080px wide

If in the portrait position or less than 1080px wide, the form automatically adjusts the layout to be optimized for tablet viewing. Instead of displaying all columns in a single row, the form adjusts to have two columns per row and maintains an appropriate column width.

Mobile layout example

For mobile devices

Because mobile devices have limited screen width, each column in a section stacks up, one on top of the other. When there's enough space, the form displays two field elements side-by-side in a single row.

example of the form canvas on mobile

Form layout on mobile

View record mode

In View record mode the form header displays the following actions (depending on the configured end-user permissions):

  • Edit record
  • Additional actions menu:
    • Duplicate
    • Email
    • Add record
    • Delete

6.png

Users also have access to the mobile app’s bottom bar.

7.png

Add/Edit mode

In Add/Edit record mode the form header displays only the Cancel button, the bottom bar is hidden, and the form fills the full screen.

8.png

Save bar

The save bar appears at the bottom of the form and is always easily accessible to users. Depending on the builder configurations (as with desktop forms), the Save button will appear either as:

  • A single Save button (if only the standard Save option is configured); or
  • A split button from where users can access all configured save options (Save & view, Save & keep working, Save & next/new, and Save).

9.png

The default Save button will always navigate the user back from where they opened the form (for example, from a dashboard or a report).

Tabs

If the form is set up to display pages as tabs, end users see the tabs bar at the top of the form at all times. Users can swipe through tabs, or tap the drop-down menu to view a list of the different tabs.

10.gif

Steps

If the form is set up to display pages as steps, end users see the steps bar at the top of the form at all times. Users can navigate between steps by using the buttons for the next or previous step, or open the drop-down menu in the steps navigation bar to view the steps in a list.

11.gif

Field and form component behavior on mobile

Field types

Field type Viewing records Adding/Editing records
Text Same behavior as desktop Same behavior as desktop
Text - multi-line Same behavior as desktop Same behavior as desktop
Text - multiple-choice Same behavior as desktop

Multiple choice options are presented in a modal. Users can:

  • Use the search option

  • Select an option from the list. Once an option is selected from the list, the modal is automatically closed and the option is populated in the field (no additional actions are needed to confirm the selection).

  • If Allow users to create new choices is configured, users can add new options to the multiple-choice list.
Multi-select - text Same behavior as desktop

Multi-select options are presented in a modal. Users can:

  • Use the search option
  • Navigate between the All and Selected tabs to preview all options or the options that they have already selected.
  • Selected tab also displays the number of options that were selected.
  • Users can also clear all selections with the button Clear All
  • Select an option from the All tab. Once the user has selected all options they want, they need to tap the OK button to confirm their selection.
  • If Allow users to create new choices is configured, users can add new options to the multi-select list.
Rich text Same behavior as desktop Same behavior as desktop
Numeric Same behavior as desktop Same behavior as desktop
Numeric - Currency Same behavior as desktop Same behavior as desktop
Numeric - Percent Same behavior as desktop Same behavior as desktop
Numeric - Rating Same behavior as desktop

 If the field is configured with input type User input, then the behavior of the field will be the same as desktop. 


If the field is configured with input type From another field or From List, then the options are presented in a modal. In the modal users can:

  • Use the search option
  • Select an option from the list. Once an option is selected from the list, the modal is automatically closed and the option is populated in the field (no additional actions are needed to confirm the selection).
Date Same behavior as desktop A date picker will be presented in a modal. Once the user makes a date selection, they need to confirm their choice by tapping OK.
Date/Time Same behavior as desktop Date and time pickers will be presented in a modal. Once the user makes a date and time selection they need to confirm their choice by tapping OK.
Time of Day Same behavior as desktop A time picker will be presented in a modal. Once the user makes a date selection they need to confirm their choice by tapping OK.
Duration Same behavior as desktop Same behavior as desktop
Checkbox Same behavior as desktop Same behavior as desktop
Address When users tap on an address link:
  • On Android devices - users are navigated to Google Maps with the address automatically populated.
  • On iOS devices - users are prompted to choose the maps app they want to open (Apple Maps or Google Maps).

For both Address fields and Latitude/Longitude fields, mobile users can either:

  • Manually enter their address or coordinates; or
  • Use the Locate button to automatically populate their current location in the fields.

If there is an entered address value, the user can go to their maps app by pressing the Open button (displayed below the fields and map):

  • On Android devices - users are navigated to Google Maps with the address automatically populated.
  • On iOS devices - users are prompted to choose the maps app they want to open (Apple Maps or Google Maps).
Phone Number When the user taps on a phone number they will automatically be navigated to the Phone app on their device with the phone number being automatically populated. Same behavior as desktop
Email Address Same behavior as desktop Same behavior as desktop
User Same behavior as desktop

User options are presented in a modal. Users can:

  • Use the search option
  • Select an option from the list. Once an option is selected from the list, the modal is automatically closed and the option is populated in the field (no additional actions needed for confirming the selection).

Note: User fields on mobile don’t support the functionality to search the realm or invite new users. You can select only from the list of users with access to the app.
List - user Same behavior as desktop

List-user options are presented in a modal. Users can:

  • Use the search option

  • Navigate between the All and Selected tabs to preview all options or the options that they have already selected.

  • Selected tab also displays the number of options that were selected.

  • Users can also clear all selections with the Clear All button.

  • Select an option from the All tab. Once the user has selected all options they want, they need to tap the OK button to confirm their selection.

Note: List-user fields on mobile don’t support the functionality to search the realm or invite new users. You can select only from the list of users with access to the app.
File Attachment

When a user taps on an attached file the app will open a preview of the file. The following file types can be previewed directly in the app:

  • Images (png, jpg, etc.), videos (mp4, mov, etc.) and pdf files.
  • All other file formats will not display a preview in the app.

For all file types the user will be able to download/share the file from the preview screen, no matter if the file can be previewed or not.

Note: Revision history and Lock/Unlock file flows are not yet supported on the mobile version of forms.

Users can choose between:

Using their camera to take a photo.

Upload a photo from their Camera Roll.

Upload a file from the device.

Note: Revision history and Lock/Unlock file flows are not yet supported on the mobile version of forms.
URL Same behavior as desktop Same behavior as desktop
Report link Same behavior as desktop Same behavior as desktop
Reference Same behavior as desktop

Options are presented in a modal. Users can:

  • Use the search option
  • Select an option from the list. Once an option is selected from the list, the modal is automatically closed and the option is populated in the field (no additional actions are needed to confirm the selection).
  • Add a new record (this action navigates the user to a new form). Note: Mobile forms do not support the sub-forms view.
Predecessor Same behavior as desktop

Predecessor options are presented in a modal. Users can:

  • Use the search option
  • Navigate between the All and Selected tabs to preview all options or the options that they have already selected.
  • The Selected tab also displays the number of options that were selected.
  • Users can also clear all selections with the button Clear All.
  • Select an option from the All tab. Once the user has selected all options they want, they need to tap the OK button to confirm their selection.
  • Add a new record (this action navigates the user to a new form). Note: Mobile forms do not support the sub-forms view.
Work Date Same behavior as desktop A date picker will be presented in a modal. Once the user makes a date selection they need to confirm their choice by tapping OK.

All standard Quickbase form and field limits apply to the mobile version of forms as well. Learn more about limits in Quickbase.

Form components

  • Pinned section—Coming soon. Not yet supported for public beta.
  • Embedded reports—Coming soon. Not yet supported for public beta.
  • Rich text—Just like desktop forms, builders can add rich-text components for non-editable text on mobile forms. The mobile version of the form honors all component customizations. Learn more about rich text components in forms.
  • Sub-forms—Not supported on mobile. Instead of presenting a sub-form, the mobile experience will directly navigate the user to the full form.
  • Form spacing—Not supported on mobile. On desktop forms end users can control the display density of a form with these spacing options: Relaxed, Normal, or Condensed. The mobile version of forms supports only the Normal density.

Upcoming features

  • Pinned sections
  • Embedded reports
  • Preview new forms from Test as a Role
  • Pull to refresh on form screen
  • Collision resolution
  • Deep links to new forms
  • Next & Previous record navigation
  • QR/Barcode scanning
  • Timezone helper
  • Honoring the table letting setting for auto-save when redirected away from the page
  • Support for the CSS class SaveBeforeNavigating

Related articles

Top