Skip to main content

Tips for building mobile apps

Making a few tweaks to your app you can give your users a great experience with the Quickbase mobile app, or in browsers on mobile devices.

The following tips help you make your apps easy to use in the Quickbase mobile app:

To learn more about the features available in the Quickbase mobile app, read About the Quickbase mobile app.

Tips for naming applications, tables, and reports

Quickbase may need to abbreviate long names in lists of application, tables, and reports, and in page titles.  

To help your users find apps, tables, and reports quickly:

  • When possible, use brief names.
  • Make sure that the beginning of the name is unique.For example, if you have three reports titled "In Progress Project Status for Managers", "In Progress Project Status for Team Members", and "In Progress Project Status for Leadership", they may all appear as "In Progress Project Status ..." in the list of reports. A user with access to all three reports wouldn't know which report to select.  Instead, you could name these reports "Managers: In Progress Status", "Team: In Progress Status", and "Leaders: In Progress Status", so that the report names are unique even when abbreviated.

Tips for reports

You can view table, chart, calendar, and Kanban reports within the mobile app. When creating mobile-friendly reports for your application, make critical or often-used data available in a table or chart report. You and your users will be able to view the report and associated records quickly, without having to switch between the mobile and full sites.

Tips for app home pages

The app home page is the first page you see when you open an application. By default, mobile users see a mobile version of the app home page which includes all of the same functionality as the regular app home page, with a few slight variations.

While you don't need to make any changes to an app home page to make it usable on a mobile device, you might want to modify your app home page with mobile users in mind if the current app home page:

  • Relies on information or links in a Rich Text widget. This information will be compressed so that only the text that fits in 30% of the browser window will be shown. While the user has the option to expand the widget to view all of the text, you might want to make certain that the most critical information appears within the first two or three sentences. Also, if this information is the first thing you want your users to see, place it at the top of the sidebar, as sidebar information appears first in the mobile app home page.
  • Includes critical buttons or links further down the app home page.Frequently used buttons and links should probably be placed in the sidebar, as the contents of the sidebar will appear first, before the contents of the main page body.
  • Includes a large number of tightly packed widgets.Remember, widgets that appear neatly in rows in a full browser will appear stacked in the mobile app home page. So a widget that appears in the third row in the full browser might not appear on the first screen of a mobile browser at all, if there are several widgets in the sidebar and in the two rows above it.
  • Relies on information from a report or an external web page.

To make your app home page mobile-friendly

  1. Create the app home page.
  2. When adding sections to the page:
    • Place critical rich text widgets in the sidebar, and make sure the most important information is contained in the first few sentences.
    • Include critical buttons or links in the sidebar.
    • Include up to nine embedded reports.

Tips for mobile forms

Note: Multiple forms are not available to apps in accounts on the Quickbase Essential plan.

You can create simplified forms that load faster and enable mobile app users to view critical information without a lot of scrolling. You might want to create mobile-friendly forms if the current forms include fields that are not necessary or functional for mobile users.  For example, vCard fields do not load or display in the mobile app. You could remove these fields from mobile forms.

To provide a mobile-friendly form

  • Include only those fields that a user would want to access on-the-go from a mobile device.
  • Keep in mind that the Same Row setting is not applicable for the Quickbase mobile app; each field appears on a separate row in the form when you are using the mobile app.

To ensure users see your mobile-friendly form

  • Set which form your users see by role. From the table home page, click Settings, then click Forms. Click Set how different roles use these forms, then select the form you want users in that role to see.
  • Or, specify an override of role settings, so that mobile users see the form you select when viewing and editing individual records from that report.

Mobile web preview

When testing as a user or role, you can check how the app appears in a browser on a mobile device.

On the right side of app pages, click the Mobile web preview icon:

A panel appears where you can see how elements of the app, such as home pages, tables, and reports look on a mobile device. The preview changes as you navigate through testing the app.

Note: Mobile preview is not currently available for use in Microsoft Internet Explorer.

Mobile workflow features

The following mobile workflow features are available on the mobile website and mobile app:

  • iFrames on a form when set in a formula url field.
  • data-autosave=true can now be used in formula rich text fields to force the record to bypass the save prompt.
    • This must be used for mobile, since the Auto save when redirected away from the page setting only applies to full site

      For example:

      <a data-autosave=true href='" & $urlToExecute & "' >This Link will autosave the record when clicked</a>

       

  • Formula URL controls to launch a link in a popup are now supported for a mobile browser
  • The following new CSS classes and attributes (introduced earlier this year) translate to mobile with slight differences in behavior. Note that popups in the mobile web are treated as a new tab, and are unsupported in the mobile app. Builders should use page navigations as opposed to popups if optimizing for the mobile app.
    • data-height/data-width (mobile web only)
    • data-OpenAsPopup (mobile web only)
    • data-replaceRid
    • SaveBeforeNavigating (when in the mobile app, will function only when navigating to *.quickbase.com URLs)
    • data-refresh (mobile web only)

Related topics:

Related articles

Top