In Preview: New UI design for desktop users

Hey everyone,

Weโ€™re excited to announce we are now previewing our new visual design for applications that are accessed on desktop browsers. 

Currently, your AppSheet applications tend to follow mobile design patterns even when your users have large screens and these patterns can be confusing to desktop users. The new design lets these desktop users navigate their apps more easily and access information in context, and provides an efficient way to create and update records without losing context. App creators can also present more information by leveraging the larger screens but still keep it organized.

Here are some before and after images that better illustrate the design changes.

Legacy Design - Screenshot #1: Sifting through a collection of records grouped by City and State after selecting a State (Deck View)

Arthur_Rallu_0-1659469291920.png

Legacy Design - Screenshot #2: Looking at a specific record after selecting that record in the screen above (Detail View)

Arthur_Rallu_1-1659469291926.png

Legacy Design - Screenshot #3: Editing an existing record/Creating a new record (Form View)

Arthur_Rallu_2-1659469291979.png

 

New Design - Screenshot #1: Seeing your data in context (Deck View + Detail View)

Arthur_Rallu_3-1659469291995.png

New Design - Screenshot #2: Focusing on a specific record (Detail View)

Arthur_Rallu_4-1659469292027.png

New Design - Screenshot #3: Editing in place an existing record

Arthur_Rallu_5-1659469291998.png

New Design - Screenshot #4: Creating a new record (Form View)

Arthur_Rallu_6-1659469292016.png

 

Whatโ€™s next? Well, this is still a work in progress. Weโ€™ve been gathering feedback from a number of design partners, including some of you in the AppSheet Community, and we know there is more to do before it can properly support all of your applications. At this stage, we feel that it would be good to let you play with the new design and to give you an opportunity to share your feedback - what you like, what doesn't work, what you think could use some improvements. This represents a significant change and your feedback will help us guide our next steps. 

As this feature is in Preview, you may see visual changes in your apps as we work to improve the new desktop design in real-time. We don't recommend using the new desktop design in your production apps.

Thank you 

The AppSheet Team

 

FAQ

How do I get access to this new desktop design?

We are currently slowly ramping this new experience over the next week or so, so you may not see this option in the editor immediately.  

For each application, you can opt-in to use the new desktop design. You can toggle between the new and legacy desktop modes, as desired.

Follow these steps to enable the new design in your app:

  1. Open the app in the app editor
  2. Navigate to the UX > Options pane
  3. Enable the Desktop mode (Preview) option - see screenshot below
  4. Save the app in the Editor

Arthur_Rallu_7-1659469291922.png

 

All users of this application that access the app on a desktop browser will then see the new design after their next sync.

How do I configure the design of my app? I donโ€™t see any new settings in the Editor!

There are minimal changes to the Editor for now. Mostly, the same settings are leveraged to specify the desktop and mobile designs. Let me give you an example.

Your apps have โ€œprimary viewsโ€ and โ€œmenu viewsโ€. With the new desktop design, all of your views will be accessible from a side menu. That menu will list first the โ€œprimary viewsโ€ and then the โ€œsecondary viewsโ€. In the future, we will adjust the configuration settings and in particular the language so that it makes sense for both mobile and desktop apps. For example, position values of "left most" and "right most" don't make sense for the new desktop design with its vertical menu structure.

Weโ€™ll be giving app creators more controls over some features that are currently set by default.

Is there some documentation or more information on what changed?
See Optimize the user experience using the new desktop design (Preview). Weโ€™ll update it over time.

Is there a list of functionalities that are known to not work with the new design?

Yes.
First, here is a
 list [as of July 31st] of (high-level) issues and requests that were reported to us and that still need fixes or assessments. Some of them are independent of the desktop mode, but we're still listing them here since people may want to know about them and so they don't need to report them unless it was reported for different app configurations :

General theme Issues
Form View
  1. Follow-up actions (reopen, next view, click-on-save action) do not get triggered or executed properly; sometimes it is dependent of the app configuration and sometimes it is not
  2. Delete and Done buttons are missing to delete new child row
  3. Some performance issue when there are many Enum value buttons and format rule(s)
Navigation expressions: LINKTOROW(), LINKTOFORM(), etc
  1. When used in emails
  2. When used to go to Dashboard Views
Format rules
  1. They donโ€™t properly show up in a dropdown (for Enum, Ref, etc)
  2. They don't always show up in the group-by section
  3. They donโ€™t show up new headers
Detail View UI

- In some configurations, showing the wrong display names in a Detail tab
- Requests to show the image label in the Detail tab

- Edit-in-place in Dashboard view

- Sync gets the app user out of Editing mode in a Detail View

General UI

- Improvement requests on the subnav bar (e.g. larger text button, better responsiveness w.r.t. title, actions, text)

- Clicking in grey area around onboarding view should not navigate the app in the background

- Filtering on Dashboard

- Tooltip for icon action buttons

Chart Views do not behave like other views

Localization of strings Some strings are missing
CSV import/export
  1. Error message when action was successful
  2. Export data based on what is visible to the user
Other app functionalities

- Missing Share, Feedback buttons

- App Gallery behaving differently

- Support of Amazon Cognito (missing account icon)

- OCR not working on Desktop

Functionalities for app creators โ€œPreview asโ€ is not available for the desktop emulator

Second, here is a list of some issues and feature requests that we know we are not going to tackle, at least for now.

Supporting multiple navigation actions in a grouped action

This is not something that we support. The team very intentionally did not want to support this. App creators should not rely on it and it wonโ€™t work in desktop mode.

Multiple requests to improve the Table View UI

We got requests to improve the Table View in general. The requests are valid, but that is out of scope for desktop mode. Changes we would be making would also impact the legacy UI and mobile apps.

LINKTOPARENTVIEW() not supported For desktop users, there are better options to navigate back: the browserโ€™s back button and the breadcrumbs.
Font size changes (via app settings) lead to layout issues Generally, we recommend using the browserโ€™s zoom which does a better job at resizing the app.
Background image  

See also Limitations and known issues

How do I provide feedback?

Please share your feedback in this thread below this message!

80 1,256 74.1K
1,256 REPLIES 1,256

I so much agree.

We could not wait, and have been using it for a while now. It works quite well in a quite complex app. I asume there is not to much fixes or tests left...?

Hello @WillowMobileSys and everyone else, 

The team has indeed started working on this a while back and we were hoping to give it the "General Availability" (GA) sooner, but we also heard from some AppSheet creators in the community and beyond that there were still some issues that were too important to not solve first. So we proceeded to doing that.

We never considered abandoning this work. We never stopped working on it and the whole team is committed to making it generally available. 

I can't share an exact timeline on when we'll announce the new experience as GA, but it should be pretty soon. Stay tuned. 

Thank You Arthur!  This is good information.  It would be good to apply an update the original post with this information.

I'm glad we have some re-assurances that AppSheet is indeed committed to this feature.  Looking forward to it.

In regard to "General Availability", can you confirm, @Arthur_Rallu , that this will be a generally available option, not the only mode for viewing an app via a browser?  As I have indicated above, my educational app will be ruined if various views are shown simultaneously because the whole idea of a flashcard app (my main app) is to hide the answer until the user is ready to view it.  For my app, consistency between the appearance on a mobile device and a computer is better than two separate modes that behave differently.

This post makes me happy ๐Ÿ˜€ Big appreciation to you all for all of your contributions, especially @Rifad, and thanks to the whole Google team!

Thanks @Joseph_Seddik I appreciate your kind words. I see that as a compliment. ๐Ÿ™‚ 


@Arthur_Rallu wrote:

Functionalities for app creatorsโ€œPreview asโ€ is not available for the desktop emulator


Screenshot 2024-05-04 at 19.22.30.png

Thanks for this great feature Team!

Hi, @Arthur_Rallu @Peter-Google  and @Adam-google 

Please pay attention to the new chart style that you are developing which is still unfinished.

I see that Google has been testing a new chart style since 4 years ago. Although it has not been completed and has many limitations, it seems that you have forgotten this unfinished feature. Please share with the community how Appsheet plans to improve the graph view.

1. There is no thousands separator so very difficult to define how much.There is no thousands separatorThere is no thousands separator

2. Can not click to chart to view filtered rows as legend chart. It auto jumps to any detail after clicking instead of filtered rows.

3. The height of the chart is inconsistent and gets distorted along the line as more slices are displayed, while the base of the chart has a huge amount of empty space.

Layout of chart is very tightLayout of chart is very tight

4. The labels displayed on the Pie chart are too small and the font size cannot be adjusted.

The label on the piechart is very smallThe label on the piechart is very small

5. Missing some useful chart such as Gantt chart, card board, bouble chart and Maps chart.

 

 

@hien_nguyen Thank you for this post, I agree 100%.

Please add that if you swap x and y axis, the column and value labels are swapped around when hovering over the bar... โ€ƒ

Label & Value correct:

IMG-20240513-WA0001.jpg

Label & Value swapped incorrectly:

Date shows value and value shows date. 

IMG-20240513-WA0002.jpg

โ€ƒ

 

Also would be nice for showing a value on top of bar,  or in bar , or outside bar... 

Yeah, please update some picture for help team dev clear for this issues.

Been using this with no problems until today, when some of my buttons, that WORKED LAST WEEK, are now not working. I have used desktop mode for the entirety of the use of the app and didn't have any problems until today. What did you all do? Why is my app functionality not working now, AFTER 7 months of use?

We are constantly responding to bug fixes and making improvements to the Desktop UI, as you can see in the Release Notes - sometimes changes will have unintended effects to other behaviors. If you are seeing something strange in your app please file a ticket with support so we can take a look! https://support.google.com/appsheet/gethelp

I did do this. They basically told me I am S.O.L (S*** out of luck) because I am running it in desktop mode which is preview. I have a button that is copy work orders. Which worked fine last week and since I added it to the app a month ago maybe. Now it is not working. I don't trust the app to work properly at all now if I don't know which buttons and bots will be active that were, ass i already stated, active or the previous 7 months of using the app.

Sorry to hear that. Can you send me a private message in this Community site with the AppName or AppID so that we can look further.

We identified the problem with the copy action and have rolled back the change for now until we can address the underlying issue. Apologies for the disruption it caused.

Also please note that the rollback may require a sync and a page refresh before you see the effect.

Stumbled across another bug with Desktop Mode. This has popped up within the last week. Dashboard with a Table view and Map view, interactive mode enabled. The "x" is no longer interactable/can't be selected. My mouse will change to the little hand like its there and wants to click on it, but nothing happens.

JMPeterson_0-1715629879643.png

When I go full screen with the Map view, it starts working again.

 

Hi @JMPeterson , thanks for reporting this, it's being looked at today.