In Preview: New UI design for desktop users

[Arthur_Rallu]

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)

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

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

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

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

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

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

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

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	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 Delete and Done buttons are missing to delete new child row Some performance issue when there are many Enum value buttons and format rule(s)
Navigation expressions: LINKTOROW(), LINKTOFORM(), etc	When used in emails When used to go to Dashboard Views
Format rules	They don’t properly show up in a dropdown (for Enum, Ref, etc) They don't always show up in the group-by section 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	Error message when action was successful 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!

[Peter-Google]

Just to close the loop on this, the fix for this went live end of July 2023.

[Ratatosk]

Thank you for this great feature.

I was wondering.. When launched, will this Desktop preview be a new implementation and improvement of the overall app structure, capabilities and efficiencies, or is it a "fork" that will work side by side the original mobile app?

[Kirk_Masden]

I can't answer this question but  I'd like to say that I sincerely hope it will continue to be a fork or an option. I've built a flashcard app that depends on views NOT appearing simultaneously.  I realize that my app is a bit unusual in that regard but I hope it will continue to be possible to choose to make a desktop app look and function like the mobile version.

[Kirk_Masden]

Here's where I posted about who the new desktop version doesn't work for me:

https://www.googlecloudcommunity.com/gc/Announcements/In-Preview-New-UI-design-for-desktop-users/m-p...

[lizlynch]

Hi,

The following fix has been released in the May 25, 2023 release:

Item	Description
Bug	For desktop UI, fixed a "could not find row" error when returning to a newly added child form before saving the parent form.

[Saddam]

Why I can't see launcher to go back from app to portal??????

[Peter-Google]

Hi @Saddam , I just checked a few of my apps and I can see the App Gallery link fine.

Are you using the Branded Apps feature? If you enable Branded Apps, you will not see the App Gallery link, see this screenshot:

Otherwise, if you are still experiencing an issue and it's not related to Branded Apps, can you record a video that shows the issue and also shows that Branded Apps is disabled. Thanks.

[epsysllc]

Should user customizations to the location and size of "modules" in the desktop dashboard be saved when the app is closed and reopened? This does not seem to be the default behavior (always resets).  Is this a feature that could be added?

[Peter-Google]

Hi @epsysllc , thanks for the report. I just did a quick test on my dashboard view, resizing and moving the subviews, close and reopen, and everything worked fine.

Can you possibly record and share a video of what you are experiencing?

[epsysllc]

@Peter-Google I am no longer able to repeat the issue.  Dashboard views seem to be working on my end correctly.  Thanks for looking into it.

[Izzat_Safrah]

@Arthur_Rallu  @Peter-Google 

My report, the Format Rules only works with type  Enum in Desktop mode.

----------------------------------------------

I did an initial solution until the problem is resolved.  Click Here  

---

@Izzat_Safrah wrote:

3. When we use View Type Table it will appear in Desktop Mode like this

---

[Bulubulu]

Hi,

I just tried the new desktop mode which corresponds exactly to a feature I expected.

Unfortunately I find that all my actions using LINKTOROW() to point to a dashboard view do not work. Instead of pointing to the linked line, it displays the first line. However, it works in other modes.

I know this feature is in beta, but I'd like to point this out in case it's not already a known issue.

In general, I find it unfortunate that links to a specific line do not work well with dashboard views.

[Peter-Google]

Thanks @Bulubulu , I believe what you are referring to is the same issue reported by @thematgallery , take a look at this thread here.

We are still aiming to fix it soon, apologies for the delay. This behavior is a special case because there is no single table backing a dashboard, so LINKTOROW([some table's key], "Dashboard") is technically ambiguous (e.g., the key could be a valid key for multiple tables in the dashboard's sub-views's tables), but we know some creators really depend on it and want to support the basic use case, since filtering a dashboard to a row is useful. That's just a little context so you understand more, and we are aiming to fix it in the new Desktop experience.

[Bulubulu]

THANKS ! I use dashboards for two main reasons:

- To avoid having a too long scrolling on smartphone in the detailed views of long tables or which contain long texts. This makes it easier to access data using tabs.

- To have a more readable and more suitable detailed view on PC.

[Peter-Google]

Hi @Bulubulu , this should be fixed now, please test again (full reply on this other post). Thanks.

[Bulubulu]

What good news after the holidays! THANKS ! I tried it quickly and it seems to work. I will test more thoroughly in the next few days.

[Ali_Sabir]

It has been about 10 months since this preview was released. I hope it goes to GA soon as it is long over due. Most serious business applications are still using Desktop.

[KON_TROLL]

I kind of expected that. Appsheet has A LOT of preview and BETA out there. But at least they are still working hard to improve and fix bugs in the new desktop. That is good. (not like New charts, Okta, Quickedits, etc.....)

[Summer1234]

Wow, what an amazing experience you've created. The team behind this must be deeply talented. It does feels like it's missing the efforts of like ONE more engineer, but other than that, perfect. 👉😎👉

[Bulubulu]

Hiding columns using CONTEXT("ViewType") does not work.

[Peter-Google]

Hi @Bulubulu , Show_If expressions are only used to hide particular column values/cells (if the Show_if expression evaluates to false for that cell, that cell's value is not shown). To unconditionally hide a column, you omit it from a specified column ordering for a table view, as discussed on this previous Community thread. The other option is to define slices for your tables which omit certain columns, then use the slice instead of the underlying table for a particular view.

Hope that helps.

[Guillermo]

Hi,

Is there a way to check a list with all the bugs of the new Desktop?

I have been working a lot with this the last month and I have found several errors but the issues list of the post were updated 6 months ago.

@Arthur_Rallu 

[Peter-Google]

@Guillermo can you provide some more details of the bugs or issues you are experiencing?

[Luke_H]

@Arthur_Rallu Delete is not available if you add something to an inline view in a form and want to then remove it. 

[Peter-Google]

Hi @Luke_H , thanks for reporting this and apologies for the delay. I just repro'd and can confirm this; it appears to be a bug/regression. In legacy desktop, when you first add the child entry the actions are "cancel and save", but subsequent reopens of the form show "delete and done". In new desktop, it keeps showing "cancel and save", and doesn't show "delete and done".

I'll follow up on this internally and get back to you once it's fixed. Thanks for your patience.

[Peter-Google]

Just to close the loop, this issue was fixed July 2023, you will see Delete and Done buttons for child rows that were added during the current parent form:

[FaCe]

Action buttons' names are not shown completely: is it by design (see pic) ?

Any chance to solve it ?

Seeing the names truncated is not very elegant.

Is it also possible to add a tooltip where shown long text name?

Thanks for listening

 

[Peter-Google]

Hi @FaCe , our UX design is out this week, but I made a note to discuss this topic when he's back. Thanks.

[Mudit999]

Hi @Perter-Google, Could we get option to change the Font of the Display Name of Table View. Because in Desktop Mode, it serves as the Table header. so to differentiate between Table header and columns, we need some formatting applied on display Names.  

[Peter-Google]

Hi @FaCe , we've added this request to our backlog and we'd like to implement it some time after Desktop GA although we can't commit to any specific timeline. In fact, we've had some other requests on this one, so we're aware of the need to utilize more space on desktop when it's available. Thanks.

[FaCe]

Actually menu on Desktop view is displayed only with icons, any chance to have icons+text enabled (selecting as option) ?

[Peter-Google]

Hi @FaCe , users can always toggle the icon labels on/off using the hamburger menu at the top:

[FaCe]

Hi @Peter-Google thanks for the reply.

Yes i know it but i'm asking if possibile to add an option to make this behaviour "labels on / off" by design, without the need to manually do it by users. That would be extremely useful (and think it will be simple to implement, isn't it ?) thanks for listening

[Peter-Google]

I'll need to discuss that internally as well (alongside the topic in the other thread), thanks.

[Peter-Google]

Hi @FaCe , we've added this request to our backlog and we'd like to implement it some time after Desktop GA.

[kylekozlansky]

Found a bug 🐞

LINKTOROW goes to the first row in the table, not the referenced row on new desktop mode.

Works on mobile, worked when I reverted to old desktop mode.

[Bulubulu]

Maybe you have the same problem as I mentioned above. Does the issue only occur when pointing to a dashboard view?

[kylekozlansky]

Yes, only when pointing to a dashboard view. Seems to be a known issue.

[Peter-Google]

Hi @kylekozlansky , as @Bulubulu mentioned, if your LINKTOROW is targeting a Dashboard view, that currently doesn't work in New Desktop UI. We have a fix internally but it hasn't made its way all the way into production yet.

If you are referring to a view other than Dashboard, can you give us more details? Thanks.

[kylekozlansky]

Thank you for the feedback! Yes, only in a dashboard does this issue exist.