Notification

The AppSheet Help Center documentation can now be viewed in Japanese - AppSheet ヘルプセンターのドキュメントが日本語で表示できるようになりました。. Learn more

Optimize the user experience using the new desktop design (Preview)

To access your app using a desktop browser, you have the option of using the new or legacy desktop design. The new desktop design, currently in Preview, is optimized for desktop browsers. The legacy desktop design, currently enabled by default, provides an interface similar to a mobile or tablet device.

Optimize the user experience using the new desktop design, as described in the following sections:

Compare the new and legacy desktop designs

Compare the features and layout of the new and legacy desktop designs.

New desktop design (Preview)

Note: The new desktop design is in Preview. It is not recommended for use in production apps.

The new desktop design is optimized for desktop browsers, presenting a more complete view of information with a consistent organization and structure. The new desktop design lets users navigate their apps more easily and access information in context, and provides an efficient way to edit existing records without losing context.

The following provides an example of the new desktop design:

New desktop showing left navigation bar with primary views on top and menu views below, the area where you can filter by grouped items, the collection and detail views in separate panels on the same page, and the actions buttons that appear at the top of each panel

 

As highlighted in the previous figure, using the new desktop design:

  • The left navigation bar contains links to both primary and menu views. Users can expand or collapse the navigation bar. When collapsed (as shown), icons and tooltips enable users to easily identify the views.
  • The collection (card, deck, gallery, or table) and detail views display in separate panels on the same page. To adjust focus, users can expand to a tabbed view or resize the view panels. The desktop layout is customizable for detail views when configuring the detail view options.
  • Users can filter a collection view by its grouped items (configured using the Group by setting).
  • Primary actions for a view appear in the top navigation bar in the panel.
  • When editing row content, you can customize the editing experience to allow users to edit the content in place or edit content in a separate form. For more information, see the Desktop behavior option.
  • Users can view detailed information as card blocks within a detailed view (configured using Show type columns in a table). See Configure card blocks in detail views to optimize the desktop design.

Legacy desktop design

The legacy desktop design provides an experience similar to the mobile and tablet device.  The following provides an example of the legacy desktop design for a detail view:
 

Detail view in a legacy desktop displays in its own separate page, overlay actions appear as floating buttons, and primary view navigation appears along the bottom of the page (similar to mobile)

As highlighted in the previous figure:

  • Detail views display on a page separate from the collection view. Users need to navigate back to see the collection view.
  • The navigation bar for primary views appears at the bottom of the screen. Navigation for menu views appears in a drop-down (accessible only from the collection view). 
  • Overlay actions appear as floating icons. 

Enable the new desktop design

Note: Use of the new desktop design is not recommended in production.

You are required to opt-in to use the new desktop design. You can toggle between the new and legacy desktop modes, as desired. 

To enable the new desk mode for your app, when configuring general settings for views, enable the Desktop mode (Preview) setting in the General section.

On the UX Options pane, the Desktop mode (Preview) toggle is highlighted

Best practices for configuring your app

When using the new desktop design, consider the following best practices when configuring your app:

  • Reconsider your use of dashboard views in the new desktop design
    For example, you may have used the dashboard view to present more information on a single page. With the new desktop design, this level of information is provided by default, without the use of a dashboard view.
  • Revisit design elements implemented to improve the desktop experience
    You may have configured design elements to improve the layout in the legacy desktop. These elements may no longer be needed.
  • Test the app interactions thoroughly
    You may discover areas in the app where you want to make minor changes.

Limitations and known issues

For the current list of limitations and known issues, see "Is there a list of functionalities that are known to not work with the new design?" in the FAQ for the Community Announcement.

Was this helpful?

How can we improve it?

Need more help?

Try these next steps:

Search
Clear search
Close search
Main menu
10918329402314060652
true
Search Help Center
true
true
true
false
false